SimpleViewer, SWFObject, Flyout Menus, and Z-Index
Animated flyout menus? Nifty. Flash slideshows? Also nifty, and SimpleViewer Pro is one of my favorites. I was about to throw them both out the window tonight, though, because I could not for the life of me get the flyouts to, well, fly out *above* the SimpleViewer on the main page of a site we’re working on. No matter what z-index I threw at the containing divs, it wouldn’t budge. Found a number of recommendations for adding the ‘transparent’ parameter thusly:
<param name="wmode" value="transparent" />But since we’re using the swfobject embed method for this particular SimpleViewer implementation, that wouldn’t cut it. Fortunately, I eventually ran across a post in the SimpleViewer forums that implemented the same parameter in a slightly different way, by adding ‘params.wmode = “transparent”‘ to the header script. Here’s the script pulled from my updated header:
<script type="text/javascript">
var flashvars = {};
flashvars.baseURL="gallery/";
flashvars.galleryURL = "gallery.xml";
var params = {};
params.bgcolor = "FFFFFF";
params.allowfullscreen = true;
params.allowscriptaccess = "always";
params.wmode = "transparent";
swfobject.embedSWF("gallery/simpleviewer.swf", "flashContent", "505", "300", "9.0.124", false, flashvars, params);
</script>
Et voilà – SimpleViewer behaving nicely and obeying z-index rules.
Dani made this mess on August 24th, 2010 and filed it under Random Drips, Tech Splatters