I have a problem with the flyout generated by the Facebook Send button. After clicking the "Send" button the flyout is generated and displayed behind some elements. Obscuring the buttons in the flyout.
I read that this is because of a parent element with the overflow:hidden style. However, I cannot remove this attribute since it will mess up the rest of my sites layout.
I tried to dynamically remove the overflow:hidden attribute upon clicking the Send button (Accepting the layout mess if someone actually uses the send button). Using the following code:
FB.Event.subscribe("message.send", function(response) { //Remove the
overflow:hidden styling here });
Unfortunately this event only fires upon actually sending the flyout form, which is too late as need to take action as soon as the button is pressed that shows the flyout.
Could anyone tell me how to bind an onclick event to the "Send" button or how to reposition the flyout completely. Or perhaps there is an alternate solution I have not yet considered.
Thanks in advance
Fixed position might work for some, but for most it will mess up your layout.
What worked for me is to take off any overflow: auto higher up in your CSS.
I did that and it works great!
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 need a way of capturing onclick event when a user clicks out of a FocusPanel(in the form of a dialog box). I need to warn the user to save their work before clicking outside thus losing the panel. I know how to do it in JavaScript but it I am stuck with GWT. Any assistance will be appreciated.
Every click event provides coordinates of a click. Check that these coordinates are outside of your popup panel.
Alternatively, make your PopupPanel modal, so that users can exit it only by clicking on UI elements that you provide, for example, submit and cancel/close buttons.
We have a Facebook like button on a page that when clicked, the flyout layer initially is positioned correctly, then immediately positions itself far to the right, partially off the page. This appears to be done by Facebook's javascript code. Is there any way I can prevent the repositioning from happening, or override the auto-positioning of the flyout?
On my website the comment box that pops up when I press the Like button is placed behind some elements of the page and I really don't figure out how to fix it.
For 2 days I'm struggling with z-index property but no result and now I've found a solution by changing the overflow property of the parent div from hidden to visible/auto and it works! BUT I can't use this fix because that div has overflow set to hidden because I'm using the slimScroll plugin to customize the scrollbar...
This is the website, just click on any image and press the Like button to see what happens.
The right and left side of the popup are integrated in a table... I was thinking, if i remove the table and use just divs instead, the fix would be easier?
Thanks!
As you may know not long time ago facebook added several new features. One of them was a "New Stories" button which when clicked expands (with what I guess is a slideToggle effect) and shows new stories.
Here is the button I am talking about:
I would like to know How to achieve same slide / toggle effect and fade in effect that comes in after this button is clicked, with a help of jQuery.
I tried searching for this on internet, but all effects I found were regular slideToggle effects, I mean they started showing div from top and slided down to it's bottom (here is what I mean by regular content http://jsfiddle.net/TwxB4/), where as one facebook uses starts from the bottom of the hidden div and sort of slides to the top of it. (You will see what I mean if you check it on facebook).
Edit: I am only looking for a slideToggle effect and nothing else, I want to be abble to expand and shrink hidden div when user clicks on the link that lunches the effect.
Edit: Here is an illustration of the effect I'm looking for:
This example works the way you described, showing bottom content first:
http://jsfiddle.net/SBLNn/16/
Also full screen view here:
http://jsfiddle.net/SBLNn/16/embedded/result/
They may also do it by having the overflow of the feed hidden, and then setting a negative margin on the inner feed wrapper, then when you click they just animate that negative margin down to 0.
Does this works for you
http://jsfiddle.net/wb7h6/1/
updated version
http://jsfiddle.net/wb7h6/9/ I hope this is what you need
You want slideToggle() I think. See this jsFiddle.