11

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

Community
  • 1
  • 1
Maarten Kieft
  • 6,806
  • 3
  • 29
  • 34

4 Answers4

11

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.

Kirk Liemohn
  • 7,733
  • 9
  • 46
  • 57
  • 1
    Your answer and the answer of DJ were probably the solution, unfortunately I can't reproduce it anymore, but after seeing similar behavior I'm quit sure that was indeed the case. I up voted both your answers. – Maarten Kieft Nov 15 '13 at 15:47
2

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.

Markus Bucher
  • 326
  • 2
  • 10
1

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();
    }
DJ.
  • 394
  • 5
  • 5
0

It may be just a side-effect of a js error. It's always worth hitting F12 and seeing if there are any js errors in the console. I had a similar issue where I couldn't figure out why .show() wasn't working on an input that had a style of 'display:none' in Firefox and it turned out I had a badly formed selector which was missing a closing ] and threw an error you don't see, until you open Firebug. Chrome was more tolerant showed the button while Firefox caught the bad selector.

Brendan
  • 1,486
  • 3
  • 19
  • 27