For some reason the Facebook Like button on my webpage has only a small hotspot, I'm only able to click in the area just under where it says 'like' rather than the whole Like button.
http://www.melbournedodgeball.com.au/team/3
If I go to a page for a team that does not exist, the problem is not there:
http://www.melbournedodgeball.com.au/team/300
Any ideas why this could be the case?
Upon inspection with chrome inspector, it seems your
<h2> Ya Mum!</h2>
element is somehow blocking part of the like button where it is clickable. if you could somehow shrink the width or get it to stop flowing over the like button, the problem will be solved.
Edit: Tried changing font size for h2 and it also made the whole "like" button clickable.
Looks like its the position:absolute on the iframe, try just using float and you should be right.
Related
I added the facebook Like button to my website and am having an issue. When the Like button is clicked, the box that pops up doesn't overlay the other content like it does on most websites, instead creating a vertical scrollbar in the container (expanding it).
This issue actually exists on facebook's own website:
https://developers.facebook.com/docs/reference/plugins/like/
If you scroll about half way down the above page and click the Like button, the same issue happens:
The only difference there is that they have overflow set to hidden, instead of auto.
How can this be fixed?
Add to your CSS file:
.fb-like{overflow:hidden;}
This should solve the problem.
I'm using Harvest's "chosen" plugin, and it's working fine until the browser window increases too far in width-- then for some reason it calculates that left should be -9000 and renders off screen.
Furthermore, I can no longer get it to close by clicking outside of the dropdown area.
Screenshot below-- what can be seen of the dropdown is circled in red. Has anyone else run into this problem?
I just realized what's going on.
When you're outside of the input/dropdown, the dropdown is still rendered, but given a left of -9000px.
My browser width is currently about 9400 px.
Still don't actually know why it's not closing, though.
EDIT: edited the src to use show/hide instead of left and it works now....
I am fading in a hidden div as an overlay div (with jQuery). It appears above all elements of my page, except the Facebook Like button.
I tried z-index: 100; in CSS but it didn't work.
Anyone had that problem?
PS: Same thing happens with the Twitter button, but not with the Google +1 button
<fb:like href="http://www.apple.com" send="true" layout="button_count"
width="450" show_faces="false"></fb:like>
Ok, this seems to make sense, considering the twitter and Facebook button will use JS to create their buttons.
Because the JS will run client side after all your styles have loaded, it can always overwrite any attempts to cover it up.
I actually think covering up the facebook like button might be against the TOS but you will need to check into that.
Things to try
Encompassing Div
Create a div around it, with the appropriate z-index.
Correct z-index
Make sure the FB and Twitter buttons aren't creating z-index's greater than yours. While z-index technically only goes from 0-255 (i think), people go negative and above 255 to make sure they are the highest or lowest.
JavaScript
After the buttons have loaded, use JS to set the z-index or other properties to hide
I am using this:
http://www.useful-dates.com/search/
What script do I need to use so that the scrolled underneath scrolled div stays hidden and then appears when you click it and disappears when you click outside of the appears div?
Like this, but i have had no luck duplicating:
http://rob-bell.net/static/ddlist.html
Iv searched and tried all kinds of things on the net and no luck, please help.
Something has to be there in the background to catch the click. Looks like they used display: block with a fixed height/width in the working example, so that a click outside the drop-down would hit the "body" element, to which the event is attached.
Looking for a way in CSS (in the child theme) to make a pop out from one div display over another, without blocking the links in the lower div when the pop-out is closed.
I am trying to use the Facebook Like Button with the comment pop-out on the pages of my site and have made the .widget-pad area of my section appropriately sized to display it when it pops up, so that it goes over another section and div that is containing a large image that links to another page.
However, when the Like button is unclicked and the pop-up is not displayed the linked area (silver part in this pick) is not-clickable.
The area below where the transparant div from the Like Button is still clickable.
How to make it so I can still click the links below where a popout happens on my page?
Ok I found the answer -- I needed to use CSS to select the .widget element and not the .widget-pad element I had been using before.
Note to all trying to deal with implementing Facebook Like in WordPress widget, something like this can help if you are having trouble getting the Comments pop-out to display over other <div>'s:
.widget{overflow: visible}