hide and show: issue while loading a page

Question

Hello,

I am hidding a Flash component when my page is loading (I want it to load in the background), and then display it when it is fully loaded.

For that purpose, I have the following JavaScript code to hide it once the DOM has loaded:

$(document).ready(function()
{
    $("#test").hide();
});

At this point, the flash is hidden. Then later on, I call a method that calls:

$("#test").show();

But at this point, the flash does not reappear. I tried also in the console in Firebug, and it did not work. I tried to do the same thing with a div, and it does not work as well.

If I do not hide the div/flash when it loads, but later on hide and show it in Firebug's console, then it works fine.

Does anyone please know why I do get this behavior?

EDIT:

Thank you very much,

Rudy

Answer 1

To hide a flash element and still have it load, you can position it outside of the visible area, instead of hiding it. Use CSS to do this so that the element is already hidden before the onload event is fired. Then, when you are ready to show the flash element, just remove the loading class.

CSS

#flash-container { position: absolute; top: ... }
#flash-container.loading { top: -1000px; }

HTML

<div id="flash-container" class="loading">
  <object ...></object>
</div>

JavaScript

$("#flash-container").removeClass("loading");

Also, as part of your #flash-container CSS definition, you'll need to define positioning for when the element is visible.