Menu
I have a problem with the jquery show function in firefox.
Situation: I have loaded a iframe with an aspx page in a popup (fancybox). In that aspx page I have a button with an onclick event which calls a custom function and in that function it fires the .show() function on a div. This div has a style element which contains: display:none;.
This works in IE, safari, chrome. This even works in firefox when I load the aspx page standalone. It doesnt work in firefox in the fancybox-iframe popup. I get no javascript errors. Even the display:none is removed from the style attribute, but the div doesnt show up.
The html from the page
<div class="popupWrapper">
..some elements
<div id="psharebutton" style="display:none;">
..content of the div
</div>
</div>
The javascript code:
function dolinkedin(url, title, summary, source) {
$(".smbutton").addClass("buttonDisabled");
$("#linklinkedin").removeClass("buttonDisabled");
$("#psharebutton").show();
parent.sizeFancybox();
}
The button where the popup is triggered, is a anchor, which has the fancyboxiframe class. Fancybox will automaticly generate the js code for showing the popup.
I have checked these topics:
I have checked if my html is valid and it is.
Any idea?
BHD
401
I had a similar problem and my solution was to do
$("#psharebutton").css("display", "inline-block");
instead of
$("#psharebutton").show();
A jquery "show" is identical to setting the display style attribute to "block". I found that I needed "inline-block" for firefox and chrome (I didn't need this for IE). I believe (but have not confirmed) that jquery is smart enough to know what the previous display value is and use that, but in my case I started out with display set to "none" so there was no previous value.
134
Just write down like $("#psharebutton").attr('display','') or $("#psharebutton").attr('display','block').
function dolinkedin(url, title, summary, source) {
$(".smbutton").addClass("buttonDisabled");
$("#linklinkedin").removeClass("buttonDisabled");
$("#psharebutton").attr('display','');
parent.sizeFancybox();
}
I had a similar problem. I did set this in my css:
body { display: none }
and tried to change this in jQuery:
$("body").show();
which did not work in Firefox.
After I changed the HTML to
<body style="display: none">
and removing the part from CSS I was able to use jQuery show(); flawless
It seems that the inheritance of css rules does not follow the same routine in Firefox as in IE / Chrome.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
