Jquery .show() not working in firefox

jquery firefox show
Maarten Kieft picture Maarten Kieft · Sep 1, 2011 · Viewed 8.8k times · Source

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

Answer

Kirk Liemohn picture Kirk Liemohn · Aug 15, 2012

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.

Related questions

JavaScript console.log causes error: "Synchronous XMLHttpRequest on the main thread is deprecated..."

I have been adding logs to the console to check the status of different variables without using the Firefox debugger. However, in many places in which I add a console.log in my main.js file, I receive the following …

Read More
Can I call jQuery's click() to follow an <a> link if I haven't bound an event handler to it with bind or click already?

I have a timer in my JavaScript which needs to emulate clicking a link to go to another page once the time elapses. To do this I'm using jQuery's click() function. I have used $().trigger() and window.location also, and …

Read More
jQuery $.ajax(), $.post sending "OPTIONS" as REQUEST_METHOD in Firefox

Having trouble with what I thought was a relatively simple jQuery plugin... The plugin should fetch data from a php script via ajax to add options to a <select>. The ajax request is pretty generic: $.ajax({ url: o.…

Read More