Geek Answers Handbook

Stop reloading flash file when using show and hide methods

I have a webpage in which a flash file is embedded. Flash file has a quiz consisting of 4 questions. When the user answers the first question, the second question will be displayed. This flash drive is embedded in a div called divFlashcontent.Now I want to hide and show the quiz inbetween.Ex: When the user clicks the button ("Pause"), I want to hide the quiz. and when he clicks the “Continue” button, I want to continue (show) the quiz. I am using the jquery show () method and hiding the method for this. But the problem is that when I call the show method, the contents of the flash memory are loaded again (showing the quiz from the very beginning). This does not show the scene on which we pressed the pause button. How can i solve this? I want the flash to be at the same stage where it became hidden.

+6
javascript jquery flash
source share
4 answers

The internal $.hide() method does css: display:none; for your item. This will restart the flash every time. I would suggest hiding your flash in a different way, since it does not respond well to this css property.

Here is a plugin that hides your element by placing it on the screen. This does not work in all cases, but can be very useful if it applies to you.

CSS to add:

 .flashHide { position:absolute; left:-99999px; }

And the plugin to add:

 (function($){ var hideClassName = 'flashHide'; $.fn.extend({ flashHide: function() { return this.each(function(){ $(this).addClass(hideClassName); }); }, flashShow: function() { return this.each(function(){ $(this).removeClass(hideClassName); }); } }); })(jQuery);

Then you will use it as follows:

 $('div#flashContainer').flashHide(); $('div#flashContainer').flashShow();
+9
source share

I know this is an old thread, but I want to post a simple solution for those who are looking for one that does not require changes to existing JS code. In my case, I had an existing Tabets component that created new tabs and dynamically loaded the html into which SWF was embedded.

IMO, the easiest way to handle this is to place the iframe wrapper around the SWF - then it will not close / reload when you show / hide the Div container.

To fix this problem you just need to insert a simple html shell file.

Old way:

Main application -> HTML loader -> SWF file

New way:

Main application -> iframe loader -> HTML loader -> SWF file

A simple example:

 <iframe src="/stuff/swfContainer.html" style="width:100%;height:100%;border:0px;"> </iframe>

then inside swfContainer.html do something like this:

 <html> <head> <style> body { margin:0px; } </style> </head> <body> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="MySwf" width="100%" height="100%" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"> <param name="movie" value="/stuff/mySwf.swf" /> <param name="quality" value="high" /> <param name="allowScriptAccess" value="sameDomain" /> <embed src="/stuff/mySwf.swf" quality="high" width="100%" height="100%" name="MySwf" align="middle" play="true" loop="true" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer"> </embed> </object> </body> </html>

This is a simple code example, since you probably want to use swfobject to load SWF, but I will leave it to you.

+1
source share

You had many options, but it’s best to add flash code to the eq #hiddeflash container, inside the fixed code. You also need to play with your overlay z-index and position:

 /*1*/ visibility:hidden!important; /*1*/ position:absolute; left:-300%; /*3*/ width:0; height:0; /*4*/ visibility:hidden!important; /*5*/ display:none
0
source share

The only solutions that work for me in Firefox and Chrome are the css code on the flash container:

If you want to “remove” the flash from the document (for example, display:none ):

 width:0; height:0;

If you only want to hide the element without "deleting" from the document:

 visibility: hidden

Customization tips don't work in Chrome

0
source share

More articles:


All Articles