Search code examples
javascripthtmlcssflashswfobject

How to load a div with a flash object, but not display it (element loaded, not displayed)


I'm looking for something between display: none and visibility: hidden. In other words, I want for div element (with flash content) to be loaded, but not displayed at all.

To make it more clear: there is a flash object embedded through swfobject.embedSWF in the div. When I change display (via javascript) from block to none and then from none to block, it works different in different browsers:

in IE it works like I want it to work - I change the display to block and the object is still there, but in Chrome and FF it is loaded again, like for the first time when swfobject.embedSWF was called.


Solution

  • how about setting it to

    HTML (somewhere on the page)

    <body>
      <!-- other code -->
      <div id="my-div">
        <!-- your object / embed code -->
      </div>
    </body>
    

    in the CSS

    #my-div {
      left: -9999px;
      position: absolute;
    }
    

    EDIT: on reading your question again, I understood differently... you want to keep the div out of view... right?

    so you can still use on of the below mentioned jQuery calls to show it... but if you want to keep it hidden the above CSS should be enough... still the object should be rendered and loaded

    $("#my-div").css({ position: "static" });
    
    // or
    $("#my-div").css({ left: 0 });