ericcarroll.org

Conditional Love Object

CLObject (in order to give it an actual name), came about after frustration with getting Suckerfish Dropdowns to work with SWFobject. My Suckerfish dropdowns were behind my Flash animation in IE only. After trying various CSS changes (z-index, absolute positioning, etc), I realized that it might be possible to put conditional comments for IE on the embed tag, but Camino/Firefox/Flock would choke and not show anything at all while Safari and IE were fine.

Beat me to it

I worked for hours trying to get this right and testing things by trial and error (because, sometimes, you just want to figure it out on your own). Then, much later in the day, I come across David Grudl's post about the same thing I was working on so I tried his, but I was getting the HTMLtidy errors with Safari. I just had to simplify the comments a bit and it worked great for me.

After David's post deflated me a bit, which is not surprising since there are tons of smarter people than myself, I guess all I can be accused of is giving it a name (Great. Now I am in marketing?).

I give David Grudl full credit for this, unless someone can prove otherwise, but, either way, I think it is a great method for inserting Flash while still validating.

Even though my findings were almost three months later, I'll explain it here, anyway, but for more indepth information please see David's post

The Code

This code uses Conditional Comments for IE to hide one object from IE while the other is fed only to IE.

For Camino/Firefox/Flock, Opera and Safari

This bit is read as normal by most browsers, except for IE. The "!" tells IE to leave it alone and go on about it's quirky business.

<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flash_content.swf"
width="500" height="100">
<img src="alternate_image.jpg" width="500" height="100" alt="alternate content" />
</object>
<!--<![endif]-->


For IE

This bit is skipped by non-IE browsers. IE reads it and does it's thing.

<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="500" height="100">
<param name="movie" value="flash_content.swf" />
<img src="alternate_image.jpg" width="500" height="100" alt="alternate content" /></object>
<![endif]-->


What I had come up with didn't fix the Eolas issue with Flash content, but David has that covered as well in another post.

I could have just dug deeper for someone else's solution, but I did enjoy the challenge.