For the current EforAll Expo*1 web site, the designer suggested that we use a flash piece for the background. It’s a kind of hip event, for gamers and other technophiles so we made some assumptions about our user base and decided it was worth a go. The onus fell on me, as these things do, to set up this effect.

I’m not sure whether or not I’m proud or completely ashamed of this one. On the positive side, it was interesting to script and it looks kind of cool. On the negative it adds nothing to the site other than some pizzazz and therefore feels like a goofy script from back in the dHTML days.

I’m sure you all have your own opinions on the matter 🙂

Whatever side of the fence you fall on, I figured it might be interesting to explain how I got this nasty beast out the door.

My original attempt was to do it with just CSS. I envisioned some perfect voodoo combination of "overflow:hidden;", wmode=transparent and the like combining to create some magic. While I had some success, the amount of time I had to get it to work coupled with the inevitable cross browser problems, made me reconsider that approach. After a glance at the schedule and some thought I decided that if I went with a JavaScript based solution, I could be certain of implementation success and I would be able to do it in a lot less time than I had already spent on the CSS only solution.

I planned to create two DIVs, populate them with the two wings of the flash background and then set the widths of the DIVs dynamically so as to suppress any potential scroll bars. This would create the appearance of flash in the background without having to have the content sit on top of a SWF.

To start off I sketched out a skeleton of the script:

I then ported those steps over to Homesite as comments forming the shell of my script. I like doing that sort of preparatory work for any script that would be a new challenge for me, to make sure I have all the logic worked out before I type a single line. It doesn’t always work, fo course, but it saves a lot of headaches later to have a good roadmap in place even for small scripts such as these.

In the end, I created two functions which run onload;

insert_flash() ;
set_dimensions();

set_dimensions() also runs onresize.

insert_flash() looks like this. Comments explain the code:

function insert_flash() {

  //create a left div

           leftdiv=document.createElement("DIV")

  //give it an ID to hook JS and some styles defined in the  CSS

           leftdiv.setAttribute("id","left-bg");

  //create a right div

           rightdiv=document.createElement("DIV")

  //give it an ID to hook JS and some styles defined in the  CSS

           rightdiv.setAttribute("id","right-bg");

  //dump them into the doc at the bottom of the DOM

           document.getElementsByTagName("body")[0].appendChild(leftdiv)

           document.getElementsByTagName("body")[0].appendChild(rightdiv)                   

  //I use this totally ugly method to get the flash into the  documents. 

  //I know there are better methods. This one is so  straightforward I don't care about elegance.

           document.getElementById("left-bg").innerHTML='         <div><object  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"  width="460" height="578"><param name="movie"  value="/themes/idg_assets/flash/bgglow_left.swf" /><param name="quality"  value="high" />; <param name="wmode"  value="transparent"><embed src="/themes/idg_assets/flash/bgglow_left.swf"  quality="high"  ;  wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer"  type="application/x-shockwave-flash" width="460"  height="578">;</embed>; </object>;</div>;';

           document.getElementById  ("right-bg").innerHTML='     <div><object  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"  width="460" height="578"><param name="movie"  value="/themes/idg_assets/flash/bgglow_right.swf" /><param name="wmode"  value="transparent">;  <param name="quality" value="high" />;           <embed  src="/themes/idg_assets/flash/bgglow_right.swf"  quality="high"  pluginspage="http://www.macromedia.com/go/getflashplayer"  wmode="transparent"  type="application/x-shockwave-flash" width="460"  height="578">;</embed>; </object>;</div>;';

 }

set_dimensions looks like this. Comments again explain the code:

function set_dimensions(){

  //cross browser doc width. From ppk? I don't remember where I got this.

                 docWidth  = (typeof( window.innerWidth ) == 'number') ? docWidth = window.innerWidth :  docWidth = document.documentElement.clientWidth;

  //cross browser doc height.

                 docHeight = (typeof(  window.innerHeight ) == 'number') ? docHeight = window.innerHeight : docHeight  = document.documentElement.clientHeight;

  //if you were going to repurpose this, you would want to

  //change the following 1000 to something like

  //document.getElementById("wrapper").style.width

  //or

  //document.getElementById("wrapper").offsetWidth;

  //I just knew that the wrapper div had a width of 1000 and  just worked 

  //with that knowledge.

  //anyway, I'm just making sure we don't pass any nonsensical values  (in this case, a negative width) to the next part of the script

                if (docWidth>;1000){

  //again. We just want to make sure we pass a good value so  we parse an integer out of the diff

  //.5px doesn't really make much sense.

                     diff=parseInt((docWidth-1000)/2)

                }

                else {

                      diff=0;

                }

  //then we just set some styles

                document.getElementById("left-bg").style.width=diff+"px";

                document.getElementById("right-bg").style.width=diff+"px";

                document.getElementById("left-bg").style.height=docHeight+"px";

                document.getElementById("right-bg").style.height=docHeight+"px";

  }

The CSS looks like this:

#left-bg,
#right-bg {
width:100px;
overflow:hidden;
position:absolute;
top:0;
z-index:0;
}
/*pin the left to the left edge*/
#left-bg {
left:0;
}
/*pin the right to the right edge*/
#right-bg {
right:0;
}
#left-bg div,
#right-bg div {
position:absolute;
top:0;
z-index:0;
}
/*pin the div containing the SWF to the right edge of the left div.
This ensures the div expands the same way a centered background image would
*/
#left-bg div{
right:0;
}
/*pin the div containing the SWF to the left edge of the right div.
This ensures the div expands the same way a centered background image would
*/
#right-bg div{
left:0;
}


And that’s that. It went really smoothly and it looks pretty cool across browsers (Safari, Firefox 2, IE6 an IE7). My biggest gripe about the way it looks is the way that Firefox waits until the resize event is completely over to redraw the screen. Because of that, things can look less than optimal in firefox with a dramatic browser resize. Other than that, I’m pretty happy with it (even if I’m kind of embarrassed to have written such a gratuitously useless script.)

*The site, since this article was written, has been rewritten. I’m no longer responsible for anything you see there in the way that I normally am. I tried my best to guide the site’s production, but we’re working with Drupal in a big way so the front end is simply out of my hands.