Flash Reloads on Javascript show/hide

I don’t work that much with flash, especially I don’t tend to show and hide objects on a website with Javascript. Today was an exception.
Apparently, when you hide an flash object with Javascript and then show it again, toggle the visibility if I may, the flash will reload every time you show it. That’s quite annoying, especially if loading the flash involves server calls and such.

It took me a while to confirm that this was actually my problem but once I knew exactly where the problem lie I already had a solution in mind.

Instead of showing/hiding the flash object I move it out of the view by setting the left margin to -10000px. Only doing this will however make sure that the flash still occupies the space it was in and I want to swap the content where the flash was for another div. By positioning all these divs absolute that problem was taken care of. Great news for my end users :)

I won’t post example code as all you really need to do is set position: absolute in the css and then toggle margin-left between 0 and 10000px (or any other value that you like and is enough to hide it) in your Javascript code.

Write Comment

CAPTCHA image


Comment Preview


#

4 Responses to Flash Reloads on Javascript show/hide »

1
Comment by Adde | 2009/08/27 at 07:40:09

A good old fulhack! :)

2
http://blog.nordenfelt.com Comment by Nordenfelt | 2009/08/27 at 11:35:41

I wouldn’t say that. I think this is a rather nice solution to be honest.

3
http://dblaci.hu Comment by DBLaci | 2010/01/05 at 10:09:06

I tried to hide the container of the flash with visibility, instead of display. Changing the position was OK, but i wanted to hide the empty space too. Setting the overflow to hidden, and height to 0 didn’t work. Changing the overflow was reloaded the flash too.

In Internet explorer setting the height to 0 doesn’t work. You can set to ‘1px’, but setting it to ‘auto’ doesn’t work either…

Putting the flash into divs, or iframe doesn’t prevent reloading either…

4
http://blog.nordenfelt.com Comment by Nordenfelt | 2010/01/09 at 19:52:00

@DBLaci: Yeah, that’s what I found too. Manipulating size and/or visibility of the div will make the flash reload.
Moving the div outside of the view port doesn’t. I “hid” the empty space with absolute positioning. This solution will probably not be suitable for all cases so it is by no means a perfect solution.
However, if using absolute poisitiong for the flash file and the element you wish to replace it with then this solution will work.

Let’s just hope that HTML5 or future browsers adress this issue propery instead of us having to hack our way around it…

10 Most Recent Twits

Loading twits...