I’m trying out different jQuery plugins in different parts of this site, so if you come across a shadow or a cool popup on a page, be sure to hit that F-12 button on your FireFox (you have Firebug Plugin added, right?) and take a closer look towards the end of the HEAD tag.

For the shadows on the font, I’m using the ‘dropshadow’ jQuery plugin (http://eyebulb.com/dropshadow/index.htm) and the code in the HEAD tag:

$(document).ready(function(){
$("#header h1").dropShadow({left: 1, top:1, blur: 3, opacity:0.35});
$("h4").dropShadow({left: 1, top:1, blur: 3, opacity:0.35});
$(".post-title").dropShadow({left: 3, top:-5, blur: 2, opacity:0.25});
});
So there are three types of tags on this page that are getting shadows:

1. the <h1> tags in the element whose ID is “header” (<div id=”header”> in this case)
2. all the <h4> tags in the document wherever they are
3. all the elements whose CLASS is “post-title” (<tagname class=”post-title”>)

The $(document).ready function makes sure that the entire DOM is loaded before the JavaScript in this function fires up. This prevents the script to try to modify something that may not have been loaded in yet.

This is same reason Google asks you to put their codes ‘right before the tag.’ The entire analytics function can be put in here and will work as expected (maybe my next project?).