Stop reloading flash file when using show and hide methods

Question

I have a web page where a flash file is embeded in that.The flash file is having a quiz consist of 4 questions.When user answer the first question the second question will be shown.This flash is embeded in a div called divFlashcontent.Now i want to hide and show the quiz inbetween.Ex: When the user clicks a button("Pause"), i want to hide quiz. and when he clicks "Continue" button, i want to continue (show ) the quiz. I am using jquery show() method and hide method for this. But the problem is ,When i call the show method the flash content is being loaded again(Showing the quiz from the start).It is not showing the stage where we clicked the pause buttton. How can i solve this ? I want flash to be in the same stage where its become hidden

Answer 1

The internal $.hide() method does a css: display:none; on your element. This will cause the flash to reload each time. I would suggest hiding your flash a different way, since it reacts poorly to this css property.

Here is a plugin that hides your element by positioning it off of the screen. This doesn't work in all cases, but can be very useful if it applies to you.

The 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 would use it like this:

$('div#flashContainer').flashHide();
$('div#flashContainer').flashShow();