Firefox doesn't hide dive when using jquery hide()

Question

So I've trying to get Firefox to hide a div on page load without much success. It works in Chrome and IE though. My HTML looks like this

<div id="container">
  <iframe src="www.google.com"></iframe>
</div>

<a href="#" id="showBtn">Show</a>

And my Javascript looks like this

$(document).ready(function () {
  $("#container").dialog({ autoOpen: false, Title: "Hello, World!" });
  $("#container").hide(0);

  $("#showBtn").bind("click", function () {
    $("#container").dialog("open");
  });
});

So here's what I'm trying to do. On page load, the #container would be hidden and remain so until user clicks the 'Show' button.

Oh actually, hide() WITHOUT parameter magically works! Thank you! — 0x56794E, Feb 28 '13 at 04:39

score 1 · Answer 1 · answered Feb 28 '13 at 07:06

<div id="container">
    <iframe src="http://www.google.com"></iframe>
</div>

<a href="#" id="showBtn">Show</a>

jquery code

$('#showBtn').click(function () 
{

  $("#container").css("display","");

});

window.load=$("#container").css("display","none");

score 0 · Answer 2 · edited May 23 '17 at 11:49

That works fine in Firefox 19.0 on Mac OS X (as it does in Chrome). Your issue might be with the content you are trying to put in an iframe. It won't work with Google.

Functioning jsfiddle (code is same, included as StackOverflow requires it):

$(document).ready(function () {
  $("#container").dialog({ autoOpen: false, Title: "Hello, World!" });
  $("#container").hide(0);

  $("#showBtn").bind("click", function () {
    $("#container").dialog("open");
  });
});

The reason why Google won't work in an iframe: How to show google.com in an iframe?.

You may find that some versions of jQuery with certain browsers won't work if hide has an invalid parameter of 0.

score 0 · Answer 3 · answered Feb 28 '13 at 04:41

0

As @EnterJQ pointed out, hide() without parameter solved the problem!

answered Feb 28 '13 at 04:41

0x56794E

20,883
13
42
58

score 0 · Answer 4 · answered Feb 28 '13 at 04:46

0

You can not load google into iframe. see: here

answered Feb 28 '13 at 04:46

what

338
1
6
13

score 0 · Answer 5 · answered Feb 28 '13 at 04:50

do it in this way

<div id="container" class="display-none">
  <iframe src="www.google.com"></iframe>
</div>

<a href="#" id="showBtn">Show</a>

css

.display-none{
display:none;
}

initially your div would be hidden and when the user clicks show button just toggle the class.

$("#container").toggleClass('display-none');

hope this helps.

Firefox doesn't hide dive when using jquery hide()

5 Answers5