However, when I load up the page with the iframe and click on the image link in the page that is in the iframe I want the lightbox to display in the parent window and not in the iframe.
you can call parent function with below code
<a onclick="parent.ShowLighbox('http://example/sampleImagePath.jpg');" href="#" >Show Lightbox</a>
and on your parent windows implement that function like below
function ShowLighbox(imageURL){
//write your code to show lightbox
}
I'm using leaflet sidebar v2 and I need to have a button in sidebar that allows user to active control to click over map to get a poppup. That it works, but tab is expanded without content, and this is not necesary, in fact, in mobiles screen, is better not expand tab.
Is possible to click over a button in sidebar "collapsed" and continue "collapsed"?
Thanks a lot.
I got it myself :)
Just changing the "normal" code to add a sidebar's button:
<li><i class="fa fa-info"></i></li>
To:
<li><a class="customButtonSideBar"><i class="fa fa-info"></i></a></li>
Pay attention, the diference is eliminate href attribute of a element, then add a jquery click binding to control the action:
$('.customButtonSideBar').click(function(){
...your code...
});
I have a like button that is loaded from ajax on to my page. When the user clicks it, a popup appears with a textbox that the user can fill and a description of my website. I want to access the dom of that popup, which is in an iframe.
This is so I can add text to the textbox.
All of the following is done in Firebug's Console.
I access the iframe with this:
var x = document.getElementsByTagName("iframe")[3] // the '3' selects this specific iframe
Then, I try this...
x.documentWindow
And I get
undefined
Now this probably has something to do with it, but Firebug's DOM Window does not show inside the iframe. It just shows this:
<iframe id="f3fb49f36c" name="f1b13ffab" scrolling="no" style="border: none; overflow: hidden; height: 225px; width: 401px; " class="fb_ltr" src="http://www.facebook.com/plugins/comment_widget_shell.php?locale=en_US&master_frame_name=f39fb5fa34&offsetX=0&sdk=joey"/>
BUT, in in the Element tab under Chrome's Developer Tools, I can see everything inside it.
Any help you can offer is appreciated.
Take a look at https://en.wikipedia.org/wiki/Same-origin_policy.
It's not possible.
I have included the facebook like plugin
I have added below the title of my article.
The like button is displayed well and is working but...
When we click like a popup appears so that the user can post some comment.
That popup is distorted and the content is overflowed and the publish and close buttons for that popup are away from the layout.
Here is a screen shot...
I have added a border to the div which contains the facebook plugin html code.
Here is the live url where you can see the problem.
I was checking in firefox 9
In that popup i cannot see the publish and close buttons.
here is the live url
http://vikku.info/programming/chrome-extension/get-selected-text-send-to-web-server-in-chrome-extension-communicate-between-content-script-and-background-page.htm
sample code
<div class="fblike" style="border:1px solid red;">
<fb:like href="http://vikku.info/programming/chrome-extension/get-selected-text-send-to-web-server-in-chrome-extension-communicate-between-content-script-and-background-page.htm" send="false" show_faces="false" layout="button_count"></fb:like>
</div>
also you can view source.
Remove this CSS from your style in your head section of your page and it will popup fine.
/* for facebook width 100% */
iframe.fb_ltr { width:100% !important; }
I'm using the following code for my like button
<fb:like id="facebook-like" href="http://mysite.com/index.php" layout="button_count" width="450" show_faces="false" font=""></fb:like>
Some users have experienced the like button not showing up. Noted in 3.6.17 but observed in other versions. I'm somewhat familier with the firefox iframe bug, but I was currious if anyone has any work arounds for the facebook like button.
Like buttons that are rendered with javascript (<div class="fb-like"/> and <fb:like/>) get height=0 if they are initially hidden (display:none).
To work around this, create the element with javascript after the container is displayed, and then run:
FB.XFBML.parse();
Example:
result.show();
var like_box = $(".fb-like-inactive", result);
like_box.removeClass("fb-like-inactive");
like_box.addClass("fb-like");
FB.XFBML.parse();
This CSS solved it for me
.fb-like span, .fb-like iframe { height:25px!important; width:150px!important}
This is still an issue, as can be seen here (also contains fix):
http://codepen.io/wiledal/pen/cGnyq
Firefox does not draw the Facebook-like if the div is hidden at the time of parsing. In the example above I delay the showing of a div after different times. You can see that a like-button shown after 500ms does not get rendered in Firefox.
I managed a work around which does not cut off the comment dialog after liking, simply by using min-height and min-width instead of set values that was previously proposed.
.fb-like span, .fb-like iframe {
min-width: 100px !important;
min-height: 20px !important;
}
I had the same problem on Firefox only (v.29.0.1) and it turned out to be AdBlock plus (v.2.6) blocking the Like and Share buttons from rendering.
Can you try calling the like button like so:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=195243810534550&xfbml=1"></script><fb:like href="http://mysite.com/index.php" send="false" width="450" show_faces="true" font=""></fb:like>
And let me know if you're still seeing issues.
Leaving an answer because I can't leave comments yet...
Oli's nice CSS hack looked like it worked initially:
.fb-like span, .fb-like iframe { height:25px!important; width:150px!important}
but it clipped the comment box that tried to pop up when we actually clicked the like button.
Per's delayed parse solution seems to do the job; here's a bit more detail. In our case we had the like button in a drop down menu, which looked like:
<ul>
<li class="control_menu">
<span>menu name</span>
<ul style="display: none;">
<li><div class="fb-like-inactive" data-href=...></li>
...
</ul>
</li>
...
</ul>
with code that shows the drop down ul when the user hovers over the control_menu element. We used this code to handle the delayed parsing:
$(document).ready(function() {
$('.fb-like-inactive').closest('.control_menu').hover(function() {
var inactive = $(this).find('.fb-like-inactive');
if (inactive.length && (typeof FB != 'undefined')) {
inactive.removeClass('fb-like-inactive').addClass('fb-like');
FB.XFBML.parse(this);
}
});
});
It finds the fb-like-inactive buttons, then looks up the tree to find the containing control_menu elements, then attaches an event to the control_menu elements to detect when the user hovers over them. When it detects a hover for a particular menu element, it looks for inactive like buttons within that element, marks them as normal fb-like, and then parses just the content of that element.
I hope this saves someone some time.
I just spent an hour on this and on a much more basic level, you need to know that the Facebook buttons will not render when testing your page locally.
It may seems obvious but it will only work when rendering from a webserver.
Per's solution is based on the XFBML version of the fb button and I wasn't sure how to do this with the "html5 version" or if it is really possible but I found a CSS/JS solution that doesn't clip content instead so here it is:
html
<button class="like-button">I like this stuff</button>
<!-- This is a hidden like-box -->
<div class="social-share aural">...stuff...</div>
CSS:
html body .aural {
position: absolute;
font-size: 0;
left: -9999px;
}
jQuery:
$('body').on("click", '.like-button', function(e) {
var $socialShare = $('.social-share');
$socialShare.css({'font-size':'1em'});
var sw = $socialShare.width();
$socialShare.animate({left: sw-80}, 400);
});
You may have to use !important rule (in both css and js) or nest the .aural class depending on the rest of your css. If it doesn't work I'd suggest trying to change the default layout so it doesn't override .aural or nest .aural and as a last resort use !important..
I had the same problem but the culprit was setting tracking protection in about:config to true.
This tip turned me on to the idea initially:
Lifehacker: Turn on Tracking Protection in Firefox to Make Pages Load 44% Faster
My solution is completely different to any of the above.
I have a character animation in my page, and one of the elements has the id="body" (which is perfectly reasonable) however this seemed to kill the FB script.
As soon as I renamed my id, the share started working again; I can only presume there was some kind of conflict, as id'ed elements can be referenced as global variables.
I found this out through the usual process of removing elements until things worked, so I'm fairly sure it was this.