IE7 IE8 Compatibility Issues

jquery image cross fade

I just spent an hour trying to figure out how to make an image cross-fade into another image using the amazing JQuery library.

First I read this post,  and then continued on to part two.

These tutorials are close, but the code was a bit confusing at first, and it didn’t seem that simple to integrate into my site.

Then I found the motherlode:

This single JQuery CrossSlide plug-in is easy to use instantly. It lets you perform slide-in and slide-out transitions with or without transparency fading in between multiple images.

It even emulates the popular Ken Burns effect that is built into iMovie.

Color Scheme Designer: The Best Online Color Picker

If you haven’t stumbled upon the online Color Scheme Designer, I don’t think you’ve lived.

Maybe you’ve seen a Pantone color guide , which is great for designing for print, or a Javascript Color Picker or an HTML color picker form control you can use in your CMS system, but this web page goes way beyond that. Not only is this tool one of the most amazing DHTML / Javascript applications I’ve ever seen, it is extremely useful piece of software that I hope never goes down. The original version of the online color picker at WellStyled.com now has a new URL: www.colorschemedesigner.com. 

Using this tool you can interactively create and modify palettes consisting of 1, 2, 3, 4 or more color tones and play with the hues, saturation and brightness to capture a pleasing palette for use in any design. It sort of reminds me of Kai’s Power Tools Gradient Designer — online, on a web page you can bookmark.

Petr Staníček, the website’s creator is one of my heros. I’m moved to donate. It’s that good.

Detecting Flash Version for JW Player in Shadowbox

I ran into a situation today where a client told me the video player I integrated into his custom website CMS wasn’t working on his computer. Naturally, I gave him the standard web developer response to any bug: “Well, it works fine on my computer…” After all, I successfully tested on Firefox 2, Firefox 3, IE6, IE7, Safari 3, Safari 4, Opera and Chrome on my MacBook Pro running Windows XP under Bootcamp.

After a little technical sleuthing, we narrowed the issue down to the Flash plug-in version. Mine was Flash version 10.0 -r22 while his was Flash version 9.x. An unanswered forum post about Flash version detection at the Shadowbox website, and a forum post at longtail video both describe the exact situation we were having, so I knew I wasn’t crazy.

Okay, so we needed to test for the Flash plug-in version before blindly serving up an .flv coded for Flash 10 to users with 9 or lower. Remembering that the “old school way” of hand-coding the object/embed tag properties for embedding the Flash player in a web page allowed you to edit the required minimum version your content needs.

<OBJECT classid="clasid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
WIDTH="432" HEIGHT="330" id="myMovieName" >
<PARAM NAME="movie" VALUE="myMovieName.swf" />
<PARAM NAME="quality" VALUE="high" />
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED
src="/flash/ myMovieName.swf" quality="high" bgcolor=#FFFFFF
WIDTH="432" HEIGHT="330" NAME="myMovieName" ALIGN=""
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

On this particular site, and most modern websites with multimedia capabilities, we’re loading a Shadowbox gallery via a Javascript file, that in turn loads the Flash player dynamically depending on the type of media that is selected for viewing/playback. I figured the first place to look was the Shadowbox API. I thought I it would probably have a ‘minimum required Flash player version’ variable to pass to it. Sure enough, there is:

flashVersion: The minimum Flash version required to play a flash movie (as a string). Defaults to “9.0.0″

Here’s my new sample Javascript code to embed Shadowbox version 3.0b, and test for the Flash Version:


<link rel="stylesheet" type="text/css" href="javascripts/shadowbox3.0b/shadowbox.css">
<script type="text/javascript" src="javascripts/shadowbox3.0b/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
language: "en",
players: ["qt","flv","img","swf"],
flashVersion: “10.0.0″
});
</script>


Uploaded, tested, works. What this code actually does (for users with Flash 9.x and below) is causes the included SWFObject with ExpressInstall.swf to be displayed instead of your content, which seamlessly encourages your website visitor  to upgrade their Flash plug-in. If you want more customizable control over the alternate content your user sees, you might want to look into the Flash Detection Kit at Adobe.

Don’t you love well-documented open-source software? What a treat it is when fantastically useful and free code is actually documented and works as expected. That’s the beauty of open source. As it turns out, if we weren’t using Shadowbox to display Flash video inside a gallery, here’s how you can do the same thing with the JW Player Support for FlashVars API, by using the client variable:

client (Flash MAC X,0,XXX,0): Version and platform of the Flash client plugin. Useful to check for e.g. MP4 playback or fullscreen capabilities.


Note this not the same thing as the JW Player API. You use that if you want to customize the JW Player itself, mostly from within Flash.

On a somewhat related note, while talking about this issue with the best Flash designer in Florida I work with frequently, he asked me if I had ever heard of Kewbee, the Browser Plug-in Switcher, which is a great way to run multiple Flash versions simultaneously on the same computer. I think I’ll give that a try to make online software browser testing even easier. Now who doesn’t want need that?