The Memorial Day weekend is coming to a close - I’ve been away from the computer for almost 48 hours (gasp!) and I want to get another jQuery tutorial up and online quickly.

I’m dying to do the write up for “Edit In Place the Jquery Way” and “Multiple File Upload Magic” but the code for both is a little more in depth and it just feels like I should tackle a few of the easier tutorials in the beginning.

So here goes -

Ever since making the switch away from table layouts for my websites in favor of all CSS (it must be two and a half years or more now) I’ve been consuming all the information I can find on the subject.

Way back in May of 2004 (ancient history) A List Apart had a great tutorial on creating drop shadows (Onion Skinned Drop Shadows) for any image, regardless of size.

The comments for the article are no longer available, but some of them echoed the sentiment from the editor’s note at the beginning of the tutorial.

Editor’s Note: The techniques demonstrated in this tutorial are not for everyone. The design method works its magic by nesting divs that have no semantic or structural value. If that bothers you (and there are good reasons why it might), this is not the tutorial for you.

(Emphasis added by Jack)

The Problem

Some CSS techniques require “extraneous” markup because currently only one background image can be assigned per element.

For example:

Here is the html code used in the A List Apart tutorial:

<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<img src="object.gif" alt="The object casting a shadow"
/>
</div><
</div>
</div>

All of those divs serve as “hooks” for background images that make up the drop shadow.

Woudn’t it be nice if we could trim down our source code to:

<img src="object.gif" class="dropshadow" alt="The object casting a shadow" />

Which leads us to…

The Goal

I’m going to show you how easy it is to remove extraneous markup from your html source code using jQuery. Using this method will keep your code cleaner and (more importantly) will make it future layout changes much easier.

The Solution

Here’s how jQuery attacks the problem.

$(document).ready(function(){
$("img.dropshadow")
.wrap("<div class='wrap1'><div class='wrap2'>" +
"<div class='wrap3'></div></div></div>");
});

And then the images would be styled like so:

<img src="object.gif" class="dropshadow" alt="The object casting a shadow" />

A Closer Look

$(document).ready() is jQuery’s version of window.onload()

$(”img.dropshadow”) tells jQuery to find all images with the class name “dropshadow”. If you wanted to use an id instead, you could do something like $(”img#dropshadow”)

wrap() tells jQuery to use the DOM (Document Object Method Model) to wrap the images with the class=”dropshadow” in the html inside the parenthesis.

The End Result

Silly picture… but it’s the same one used in the original Onion Skinned Drop Shadows:

jQuery Drop Shadow Example

Compare jQuery to Other Solutions

From the jQuery site there’s a link to the Ajaxian website where another javascript library was used to create the Onion Skin Drop Shadow with javascript and I think the amount of code and the complexity of the code speaks for itself. Personally, I would prefer jQuery (but you already guessed that, didn’t you?)

To be fair… no one library is perfect for every job or every coder. This tutorial really isn’t meant to prove that jQuery is the “One True” all purpose javascript library.

Try Prototype, Scriptaculous, YUI, Rico, Behaviour, Moo.fx and the dozens of others. If you find one that works better for you… then use it.

jQuery is a tool that spoke to me. I hope this tutorial has shown you one more useful way to use it.

Related jQuery Tools

jQuery makes it incredibly easy to manipulate the html generated by your visitor’s browser.

You should take a moment and see what you can do with jQuery using append(), prepend(), before(), after(), html(), and remove().

Meatier Tutorials On the Way

For degree of difficulty, today I scored a one or a two. But that’s okay because even though the concept is simple, it’s applicable to lots of situations you come across in your design and coding work.

And besides, regardless of when you read this tutorial, I posted it after a Memorial Day of fun in the sun on the beaches of Florida. I just put the family to bed and I still have sand on my feet.

Rest assured, before we get to the end of the 15 Days of jQuery you’re going to see some more advanced tutorials, examples, and code.

[tags]jQuery, javascript, DOM, drop shadow[/tags]