jQuery: JavaScript popups over Flash

Simple Flash objects do not cause problems with JavaScript popups. For example, you can specify a full screen width in your CSS and the JavaScript popup will appear as expected, provided that you've previously allowed your browser to do so. Also call-to-action based popups will work fine. Problems arise when you use some parameters on your object element. For example, the following is a plain Flash object:

<div>
  <object data="path/film.swf" type="application/x-shockwave-flash" width="300" height="300">
    <param name="path/film.swf" value="path/film.swf" />
    <param name="src" value="path/film.swf" />
  </object>
</div>

Using jQuery, you can simply open a popup by using a link action, like so:

$('#run').click(function(e) {
  
  
 window.open(
 'http://onwebdev.blogspot.com', 
 'onwebdev', 
 'scrollbars=no,status=no,resizable=no,top=120,left=0,width=300,height=300'
 );
    
    
 e.preventDefault();
  
  
  
});

Browsers do not apply default restriction to popups created in this way, so you'll see the following:

Our popup is placed just over the Flash object, covering it entirely. We can run another test by opening a popup when the DOM is ready. First, however, we set our object dimensions to the full screen dimensions:

html, body {
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100%;
 min-height: 100%;
}

div,  object {
 display: block;
 height: 100%;
 width: 100%;
}

Then jQuery:

$(document).ready(function() {

   window.open(
   'http://onwebdev.blogspot.com', 
   'onwebdev', 
   'scrollbars=no,status=no,resizable=no,top=120,left=700,width=300,height=300'
   );

});

This kind of automatic popups is blocked by browsers, but if you allow your pages to display them, you will see something like this:

Now, as I said earlier, problems arise when you set some parameters on your Flash object. These parameters are actually Flash parameters that will tell the browser to use the default behavior of the Flash interpreter. They actually have a precedence over JavaScript, so it's better to avoid them. Further, if you use a JavaScript-based Flash library, like SWFObject, be aware of the fact that these libraries can affect your popup displaying, because they actually add a loading handler to your pages that may override your popup call.

2 thoughts on “jQuery: JavaScript popups over Flash”

  1. Unfortunately not. The point is that the second part of this code will be blocked by browsers since it takes place when the document is loaded. So I decided to avoid to make a live demo. Thanks for the comment :-)

Leave a Reply

Note: Only a member of this blog may post a comment.