From jQuery JavaScript Library

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.

Contents 1 The Problem 2 The Goal 3 The Solution 4 A Closer Look 5 Compare jQuery to Other Solutions 6 Related jQuery Tools

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.

Wouldn’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>");
 });

Assuming your images are formatted 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() - only it executes faster and sooner, causing no "nasty" flashes of unstyled content.

$(”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) 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:

First, the old-school, multiple divs hard coded into the html as seen on the original article:

And now, the jQuery method, which uses JavaScript to wrap the image at runtime:

View the source of this page and you'll see the huge difference in markup!

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?)

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(). More information can be found in the DOM Manipulation documentation.