5

Is there a way to create an element and have it hidden initially? I am creating an iframe but don't want it shown right away.

informatik01
  • 16,038
  • 10
  • 74
  • 104
gdanko
  • 1,922
  • 4
  • 20
  • 31

5 Answers5

6

Very simple. Just do this:

var myFrame = $("<iframe>").hide();
gilly3
  • 87,962
  • 25
  • 144
  • 176
  • But I cannot show it when I need to. Even if I later use .show(), nothing happens. – gdanko Mar 14 '11 at 15:09
  • Make sure you are inserting it into the document somewhere. My code above only creates the element. It can't be displayed until it is added to the document via something like `$(".parent").append(myFrame)`. – gilly3 Mar 14 '11 at 16:01
4
var my_iframe = $('<iframe name="your_iframe" src="your_source"></iframe>');

now my_iframe holds your jQuery created iframe. Modify it, do what you wish and then put it in the dom.

It wont be visible until you insert it into the dom.

Kyle
  • 21,978
  • 2
  • 60
  • 61
3

Just create it and style it as being hidden, in one of many possible ways, like this:

var secretThing = $('<iframe></iframe>', { css: { 'display': 'none' }});
$('body').append(secretThing);

Another way to make something hidden is to position it far off the viewport, or to put it behind something else, or to set some dimension to zero. It depends on the rest of your design. Personally, I'd be inclined to give the element a class value that makes it hidden.

(@gilly3 wisely notes that the handy jQuery "hide" function might be a simple way to do this.)

Pointy
  • 405,095
  • 59
  • 585
  • 614
1
var theElement = <create the iframe here>;
theElement.hide();
// append theElement here
Dre
  • 4,298
  • 30
  • 39
  • I did that before. But I'd like it to not be shown at all. My fear is that it will appear really fast on the screen and I don't want that. – gdanko Mar 10 '11 at 13:44
  • Uh, that is exactly what I told you to do. create the element ( like people do in many other places ), set it as hidden, append it to the document. – Dre Mar 10 '11 at 13:45
  • Ummm.. I tried that. But using .show() later will not reveal the iframe. – gdanko Mar 14 '11 at 15:10
0

Like this:

var FName = $("<iframe>").hide();