Here is my problem:
I have successfully included the Facebook Like button on my test page. There are several items per page and there is a facebook like button per item. I am using the XFBML version.
Everything runs fine if the buttons are present in the page on load. However, Now I want to show the buttons per item only on mouseover on the container element having the item and the button.So, the fblike button html is hidden on page load and I added some code like this to show them on mouse-hover:
$(content).mouseenter(function(){
$(this).find('.fblike').show(); // toggle the display of the button
FB.XFBML.parse( this ); //re-parse xfbml
});
The button shows up perfectly on mouse-hover on the container now but never works. Clicking the button doesn't do anything.
Has anyone run across this problem before ?
EDIT:
.fblike is a class on a div containing the fb:like tag.
Re-parsing is required because on page-load, each div with the class .fblike is hidden. The Facebook JavaScript SDK doesn't parse the xfbml tags inside elements which are hidden.
I think you problem is in this variable scope. Try this:
FB.XFBML.parse($(this));
Because you don't need this (anonymous function being called) but element (on which this anonymous function was called).
Related
I have cart icon, which when clicked loads the cart of the user in a Modal. However, any link or HTML form items like input or buttons that are within this modal are unusable. It can never be brought to focus nor clicked. I tried playing with CSS property z-index with no success.
Check site here.
Add any product to cart and then click bag/cart icon on the top right to see the issue.
Changing the pointer-events value in CSS solved the issue. wrapping the content part in an element with class modal-content is also fixing the issue as suggested in comments.
I have a page where I plan on having multiple modals that can be opened. The first one works fine, I link to it in several places on the page. When I added the second one though upon clicking it all I get it a darkened screen. The modal doesn't show up.
I read through everything I could find both here and on materialize website. Tried a few things like adding multiple triggers to init.js:
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger1').leanModal();
});
Nut that didn't do anything. Tried calling it as a js function under onclick instead of through the href tag and class, but its the same.
Any ideas?
Try to place the modals just below the calling button, it may work. I've gone through it a lot of times. So go through it once, if it still create a problem please let me know. And please post the modal code also.
When I added the second one though upon clicking it all I get it a darkened screen
It's mean that it could not get the id of second modal.
I have a multistep Drupal 7 form. I'd like to show it in a Bootstrap Popup.
This form works fine on a normal page however when I put it into a Bootstrap popup it closes the popup when the first button is pressed.
I use drupal_render(drupal_get_form('MYFORMNAME_form')) to put the form into the popup body.
How can I make this multistep form work properly in the popup?
when you say bootstrap popup, do you mean a modal window (http://getbootstrap.com/javascript/#modals)? Modals in bootstrap are defined inside the body of the page and just hidden/shown as needed. If you want one to act as its own window, you need an iframe in it, because submitting the form will not trigger whatever mechanism you put in place to show the modal dialog in the first place.
Another option is to use code to re-show the modal, with the form at whatever stage it is at, with each page load (next button, etc.)
A last option is to do all of the form navigation via AJAX. Then you don't ever need to put the form inside an iframe nor include code to re-show the modal with each submission of the form, since the page never gets refreshed.
IMHO the iframe is easiest, and a decent option if you don't have any qualms about iframes. You just need to place the form in a separate page and include it inside the iframe. Some theming work will enable you to turn off the normal page chrome that will make your modal look like a miniature version of your site -- you probably don't want your header, navbar, footer, etc. inside the modal.
You could use the Popup forms module. It claims:
Works well with multi-step forms. Just don't add [the] "Next" button id to
[the] 'close_buttons' array to keep [the] popup open [when navigating between steps].
This solution is not using a Boostrap Modal ("Bootstrap popup") though rather a jQuery UI dialog. It requires a bit of custom coding to use this module. Example code is provided on the project page.
I'm adding facebook login buttons to fancybox (version 1.3.4) modals (one for join, one for login). The facebook buttons all get instantiated when the page loads, but are hidden. After triggering the fancybox login modal, the facebook buttons get rewritten in the modal and load correctly the first time. However if you close the modal and then reload it a second or third time, there is no facebook login button. It's just blank. When I look at the inline html block
that fancybox based the modal on, the facebook button markup that was generated when the page initially loaded is gone...actually not completely gone, but the button code deep in the iframe is wiped out.
I've seen suggestions to iframe these facebook buttons, so I tried adding an iframe instead of the raw facebook button markup. Note that I am not using the iframe fancybox type and I can't currently do that. When I include <iframe src="/myfacebookbuttonpage"></iframe> in the modal section, again it loads correctly the first time and then after closing the modal, looking at the source I can see the iframe rewritten as <iframe src="about:blank"></iframe> and the innards of the iframe are blank.
Anyone have any idea what's going on here? Or is this attempt to include facebook login buttons in fancybox modals completely wrong for some reason?
It's a bug in fancybox v1.3.2+ when using inline iframes.
As a work around, you may edit the fancybox js file or apply the workaround in your custom fancybox script.
Go here for further instructions
I'm trying to implement a send button on my custom FB tab app.
Using the XFBML share button works, but when you click on it, the pop-up (aka "flyout") gets hidden due to the overflow: hidden; css.
Changing the overflow attribute to visible, for example, doesn't have a effect (probably cause I'm telling FB to resize the tab:
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
</script>
Screenshot of the problem:
http://i.stack.imgur.com/sHH1a.png (I'm a new user, not allowed inline images)
Is there a way of telling the box to display on top of the right FB sidebar or on the left of the button instead of the right?
Do I need to create a dialogue box with share & like buttons? (this might become problematic as I intend to display a send button next to each row).
Link to raw tab index.php : http://openair.co.nz/facebook/events/
You may consider positioning the Send button to the left side of the tab iframe, and make sure that the bottom send button has enough space below itself to open a popup without losing it again. No other known solutions (my opinion)