Intermediate

Fancy Drop Cap – Part 1

Introduction

Last spring when I implemented a new design for my weblog, I wanted to use a fancy drop cap for the first letter of the first paragraph of the first post of each page. There are all sorts of ways to make a drop cap happen, but since I was reading Jeremy Keith's excellent book DOM Scripting at the time, I thought I'd do it that way. The DOM scripting method that I put together had some important benefits for me at the time:

  • It used an image, so I didn't have to worry about installed fonts on users' machines
  • The HTML source stayed intact, so search engines wouldn't trip over a first word with a missing first letter.
  • It degraded nicely, so if users had JavaScript or images or both turned off, everything would still look fine, just a little less pretty.

Now that I'm learning jQuery, I thought I'd revisit my code and see if I could tidy it up a bit, the jQuery way.

Image Set

AI first put together a set of images, one for each letter of the alphabet, using a font from the Dieter Steffman collection at typOasis. If you don't want to go through the laborious process of converting letters into images, you can download mine (20KB zip). See the letter "A" floating to the right of this paragraph for an example.

Setting up the Code

Instead of putting all of the code in a $(document).ready() function, I created a separate function and just called it inside $(document).ready():

JavaScript:
  1. $(document).ready(function() {
  2.   swap_letter();
  3. });
  4. function swap_letter() {
  5.   //all the code goes here
  6. }

Now we can get down to business.

Insert Image Here

The easiest part of the process was inserting the image, because jQuery makes it almost effortless. Read the rest of this entry »

Scroll Up Headline Reader

A couple weeks ago someone on the jQuery discussion list asked if someone could reproduce a rotating headline box in which the headlines, in succession, scroll up into the box, pause, and then scroll up out of the box. Since I already had some code for rotating images on a page, I decided to recycle it and take the challenge.

Here is the finished product. (Please note that if you are looking at this in a feed reader, you won't be able to see the effect. )

Read the rest of this entry »

Copy Events from One Element to Another

Need to clone an element and its events? Sure, you could rebind the events after doing the clone, but that wouldn't be very DRY now, would it? Introducing Copy Events, a new plugin for jQuery.

Read the rest of this entry »

Accordion Madness

A few weeks ago I wrote about two ways we can achieve the "accordion menu" effect, and I promised to describe a third option. Well, this is it, Option 3. But first, here is a list of my other show-hide-toggle entries, as well as Jörn Zaefferer's accordion menu plug-in:

Read the rest of this entry »

Half-Star Rating Plugin

There was a request recently on the jQuery discussion list for an enhancement to Ritesh Agrawal's Simple Star Rating System to allow for 1/2 star ratings. So I took it upon myself to add the feature.

Update

I'm not supporting my version of this plugin at this time. I meant it more as a proof of concept, an attempt to help an individual on the jQuery discussion list.

Keep in mind that this plugin does not "degrade" when the browser doesn't have JavaScript or when JavaScript is disabled. The the elements for the stars are created by the jQuery code, so when JavaScript isn't available, the elements don't appear. Therefore, if you are not absolutely certain that visitors to your site will have JavaScript available, this plugin probably isn't the best solution for you. (See Wil Stuckey's jQuery Star Rating Plugin for a degradable option.)

Read the rest of this entry »

Automatic Page Contents

It's been so long since I last posted a tutorial here that I'm afraid everyone might have forgotten about the place. For the past few months, there has been a little "Page Contents" menu at the top-right corner of some of the pages on this site — actually, any page that has more than one <h2> elements in the main content area. In this entry, I'd like to demonstrate how to create an automatic page contents list using jQuery.

Read the rest of this entry »