Beginner

Order: newest first | oldest first
20 Sep 2006

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

PLAIN TEXT
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 »

Levels: Beginner, Intermediate | Categories: DOM Modification, DOM Traversing | 30 Comments »

11 Sep 2006

Slicker Show and Hide

Last time I showed you how to make something appear and disappear on a web page. This time I'll show you how to do it with style.

Like we did last time, we'll start with our $(document).ready() and put everything else inside of it.

Adjust the Speed

This time, however, we're going to adjust the speed at which our item shows and hides. To do so, we put a speed indicator — "slow" or "normal" or "fast" or a number of milliseconds (1000 = 1 second) — inside the parentheses: Read the rest of this entry »

Levels: Beginner | Categories: Effects | 324 Comments »

06 Sep 2006

Basic Show and Hide

As promised in my last entry, I'll be showing you a simple effect that you can do using jQuery: showing or hiding something, or a group of things, on the page. The two functions that let us do this are, not surprisingly, show() and hide().

jQuery also comes with another function called toggle(), which will make matching elements visible if they are hidden or hidden if they are visible.

So, let's get down to business. We're going to start with our $(document).ready() function.

Read the rest of this entry »

Levels: Beginner | Categories: Effects | 56 Comments »

05 Sep 2006

Multiple $(document).ready()

One more great thing about $(document).ready() that I didn't mention in my previous post is that you can use it more than once. In fact, if you don't care at all about keeping your code small, you could litter your javascript file with them.

It's great to be able to group your functions within a file or even across multiple files, and jQuery's flexible $(document).ready() function allows you to do that, pain free.

You could, for example, have one .js file that is loaded on every page, and another one that is loaded only on the homepage, both of which would call $(document).ready(). So, inside the <head> tag of your homepage, you would have three references to JavaScript files altogether, like so:

PLAIN TEXT
HTML:
  1. <script src="/js/jquery.js" type="text/javascript"></script>
  2. <script src="/js/common.js" type="text/javascript"></script>
  3. <script src="/js/homepage.js" type="text/javascript"></script>

You could also do something like this inside a single .js file:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function() {
  2.   // some code here
  3. });
  4. $(document).ready(function() {
  5.   // other code here
  6. });

A final note: In a comment to my previous post, Jörn gave this excellent tip for shrinking your code:

Even for this little amount of code is a shortcut available: 

$(function() {
// do something on document ready
});
A function passed as an argument to the jQuery constructor is bound to the document ready event.

Coming Up: In my next entry, I'll show how to do a simple effect with jQuery. You'll be amazed at how easy it is!

Levels: Beginner | Categories: Events | 34 Comments »

03 Sep 2006

A Getting Started Guide

Jörn Zaefferer has put together a nice "Getting Started Guide" that can help people, um, get started wtih jQuery. It'll help anyone who is new to jQuery, and even those who are fairly new to JavaScript and programming in general — just the kind of help I like. Here is what the guide includes:

  1. Setup
  2. Hello jQuery
  3. Find me: Using selectors and events
  4. Rate me: Using AJAX
  5. Animate me: Using FX
  6. Sort me: Using tablesorter plugin
  7. Plug me: Writing your own plugins
  8. Next steps
We'll be covering some of these topics here, too, but the more people who get the message out about how easy it is to use jQuery, the better.

Levels: Beginner | 4 Comments »

02 Sep 2006

Introducing $(document).ready()

This is the first thing to learn about jQuery: If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

Read the rest of this entry »

Levels: Beginner | Categories: Events | 162 Comments »