Saturday, January 30, 2010

swfobject 2 tweaking for firefox

Generally I avoid flash if I can, but I found what I thought would be a quick side job (yea craigslist computer gigs category), fixing a flash embedding problem with a website.

The site used swfobject version 1.4, and it wasn't loading files in Internet Explorer. After a little searching I found the swfobject website, saw there was version 2 out. I emailed the person with the problem, and told them I could fix it. I figured a quick upgrade and the problem would be solved.

4 hours later.

So it turns out the Firefox 3.5 has a display issue which is trigger when using version 2 of swfobject. After reading many forums complaining about this or similar problems, I finally found two potential answers to the problem. See comments 6, 33, & 37 at url http://code.google.com/p/swfobject/issues/detail?id=327

After using the code generator at
http://www.bobbyvandersluis.com/swfobject/generator/index.html

I added the following code to the javascript in the header of the html page:
swfobject.switchOffAutoHideShow();  /*line added to help fix firefox issue*/
swfobject.embedSWF("example.swf", "flashContent", "100%", "100%", "8.0.0", "expressInstall.swf", flashvars, params, attributes);
and added the following html tag to the body of the page:

<div id="wrapper"> generated flash content html code </div>

CSS code must also be added to this page for the code to work with Firefox 3.5. I put the code in a linked css file, but it can be placed within the generated code if desired:
html, body, div#wrapper {
border: none;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
div#wrapper {
background: none;
}
body {
border: 0px; /* IE MUST have a border set for slideshow to work */
}
the div#wrapper tag and corresponding css make sure that the area of the content block in which the flash file is inserted is not zero. This is necessary when using percentages to set the height and width of the flash object.