Now that I am doing professional web layouts for clients, I find myself appreciating the quick, easy, and well-documented jQuery library. I just don’t have time to hassle with Dojo and its size, widgets I don’t need, and messy documentation.
Recently for one client I needed to use a flash sidebar. The image was a slowly rotating, “fanned picture” slideshow provided by my designer partner. This would be OK, except I really dislike all the tag soup of object embedding, especially on dozens of pages. Also, I wanted to make sure that the site wouldn’t look strange with Flash turned off. In that case, I wanted to use a simple freezeframe of the first slide from the image set.
Setup
- I put the flash files in media/images/pagename.swf
- I put the snapshots from the first slide in media/images/pagename.jpg
- I am loading jquery.js, and its jq-flash plugin in the header
Dead Simple Markup
I put in two lines of code. That way, even if javascript is turned on, the user will still get the jpg version.
<img class="flashout" src="media/flash/pagename.jpg" alt=""whatever"/>
<a class="flash w:320 h:420" href="media/flash/pagename.swf"></a>
jQuery makes it easy
In my site.js file, I disable the image and enable the flash with just a couple lines of simple code.
var SSS = {
flashInit : function() {
if (jQuery.fn.flash) {
$('a.flash').flash({ params: {wmode : "transparent", version : 7}})
.html("");
$('.flashout').hide();
}
}
};
$(function() { SSS.flashInit(); });
If that doesn’t look so simple, let me explain. First, I am making a toplevel namespace, “SSS” for my company name. In that, I put an init function. The init function says, “If we have a flash function available, then activate all objects with the class name “flash” on the page. Remove any innerhtml associated with the flash element. Lastly, hide anything with a “flashout” class name.
The wonderful, terse line ending the code is jQuery’s excellent command to “execute as soon as the domain object model is ready.” In most cases, this will be before the image even appears on the screen, so it will not even be noticed by the viewer.
Technorati Tags: flash, jquery, degradable, accessible, accessible js, javascript
7 responses so far ↓
1 sime // Jan 10, 2007 at 5:09 pm
I’ve never seen classes defined like this: “w:320″ and “h:420″, can you explain this?
2 sime // Jan 10, 2007 at 5:16 pm
Opps, I see the reference to the plugin now. Sorry!
3 Joel Birch // Jan 26, 2007 at 11:08 pm
That wonderful terse line could be even more terse:
$(SSS.flashInit);
Try it and see!
On another note, why do you check for a flash object? In what situation could your script run where the flash object is not available - assuming you always include the plugin?
Cheers
4 Bruce // Jan 27, 2007 at 10:39 am
The reason I check is because I wanted to put this script in the main site script, but not all pages have flash. To reduce wasted requests to the server, I don’t load jq-flash or swfobject on those pages.
5 Joel Birch // Jan 27, 2007 at 10:14 pm
I see, that makes sense. Personally I would tend to include those plugins even if not used just because I assume they are downloaded once and then drawn from cache on subsequent pages. Therefore there are no requests made to the server for those scripts. Unless of course the user never visits the page that you did want to use the scripts on, in which case the initial download is wasted. Am I missing something?
6 Bruce // Jan 28, 2007 at 1:29 pm
No, that’s reasonable. In this case, Flash is only used on the front page, so it is pretty likely many will never need it. Possibly over-optimized to even bother with it, but no big deal.
7 Joel Birch // Jan 28, 2007 at 3:17 pm
Okay it’s clear now. I certainly appreciate your meticulousness - I am the same, which is why I wanted to verify this. Thanks.
Leave a Comment