Well let’s assume you’ve a <div> and like to load a .swf flash file into it. We suppose you’re using swfobject or any other library or even if you don’t use library that should be a simple thing to do.
But what happens if the <div> has the style property “display:none”. Than unfortunately the flash file does not load. You get the file from the server, but when you set the <div> to be “display:block”-ed the flash starts the play from the very beggining.
Actually that’s supposed to be default action. In fact the workaround is like so. You put the <div>, not to be hidden with that “display:none”, but to be with 0px width and height. something like that:
<div style=”width:0px;height:0px;overflow:hidden;”></div>
The overflow is important – cause you’d like to load the swf file into the <div> and if the swfobject.crateSWF or embedSWF is with 100% width and height, the flash will result with zero height and zero width.
So you may put the flash to load in something like that:
<div style=”width:800px;height:600px;”></div>
and put that one into the div with overflow hidden. Than the outer <div> will be ivisible but present to the page and the inner one will be with fixed width and height.
Now when the flash loads, or if the user clicks on some part of the page or fires some event, you can simply reset the width and height of the outer <div>. The resulting piece of code will look like:
<div style=”width:800px;height:600px;overflow:hidden;”>
<div style=”width:800px;height:600px;”> the flash goes here with 100% width and height </div>
</div>
With jQuery that should look as follows:
$(document).ready(function() {
$(‘#outer-div’).css({ width: ‘800px’, height : ‘600px’ });
});
Now you can load the flash in background, even you can start loading it after everything else is loaded – i.e. on document ready event of jQuery, so if you have havy computations in that flash you can simple show something else to the user till the flash loads.
Actually I noticed some problems with 0px height and width. Sometimes the flash needs any value but non-zero. So the simple solution is to put 1px for both height and width.
Greetings
Thanks a lot for the ‘1px’ update Sir. It saved my day.
Great help. Thanks!
I was looking for a way to display a loading animated gif in the position on the page where the flash movie will load and play. (a flash movie that is not open source and has no preloader element).
My aim was to hide the flash while loading the swf then bring it back in when the flash movie triggers its onReady type event.
I had tried the display:none first and has th same problem as mentioned above. So I tried your suggestion.
It owrked, except there is an unfortunate side effect to either hiding or setting the size to 1px, in that if a user has a browser with a Flashblock plugin, they will not see the play button that Flashblock provides that allows the user to allow the particular flash movie to play. This can lead to a situation where the movie never plays, there is no way to get it to play, and the website visitor can end up thinking the site is broken.
Hello GUYS:
I am a new at using Jquery, but I need help in eliminated the white space of swf movie in my website as it load. I would like to try this method in ‘load flash .swf in hidden div’, but I am not sure how to write everything in the & tag.
Can you please past all the needed codes & how I should plug them in the & tag???
Sorry for asking too much
*but I am not sure how to write everything in head&body tags
*Can you please past all the needed codes & how I should plug them in head&body tags.
CORRECTION
And I load swf ;but it doesn’t work with IE7.