Zebra Striping Made Easy

Starting Point

"If you enjoy my tutorial you're going to love my new software for web designers:"

• This demonstartion is an adaptation of a well written snippet of code by Mathew Pennell - "Striping Your Tables the OO Way"
• Let's use Mathew's layout and style sheet as our starting point
• No javascript yet
• Here's how it looks:

CSS To Pay Attention To

"If you enjoy my tutorial you're going to love my new software for web designers:"

• "alt" class will be applied to every other table row
• This will give the zebra stripe
• "over" class will later be used to create the highlight effect when the cursor moves over a row
• I'm going to remove tr:hover from the style sheet because Internet Explorer doesn't support it
• In "good" browsers (Firefox/Opera/etc) the tr:hover instruction works great - no javascript needed

One Minor Change

"If you enjoy my tutorial you're going to love my new software for web designers:"

• Add a class to the table we want striped
• class="stripeMe"
• Soon you will see that using the class (and not an id) gives us more flexibility
• We will be able to pick and choose which table or tables on a page we want to stripe

First Steps With jQuery

"If you enjoy my tutorial you're going to love my new software for web designers:"

• First line grabs the jQuery library
• Highlighted section is an improvement over the traditional window.onload function
• Now our code will execute faster

The Basics - Made Simple

"If you enjoy my tutorial you're going to love my new software for web designers:"

• jQuery code starts with $
• Followed by parenthesis
• Inside parenthesis is what you tell jQuery to find - don't forget the quotes
  • $('p') = find all paragraphs
  • $('.whatever') = find everything with class="whatever"
  • $('.stripeMe tr') = find all tr (table rows) inside an element with the "stripeMe" class
  • In our example... find all rows of a table with class="stripeMe"

• $('.stripeMe tr').addClass('alt'); means add the class "alt" to every row of any table with the stripeMe class
• Note - We want to do alternating rows but let's tackle this one piece at a time

Alternating Rows Is Easy

"If you enjoy my tutorial you're going to love my new software for web designers:"

• $('.stripeMe tr').addClass('alt'); means add the class "alt" to every row of any table with the stripeMe class

• This is not exactly what we want

• The change is really easy
• $('.stripeMe tr:even').addClass('alt');
• Now our table is striped

Quick Recap

"If you enjoy my tutorial you're going to love my new software for web designers:"

• Just three lines of code gives us this:

• Alternating rows!
• Other examples on the web, no matter how well written, use lots of code - most of which is beyond the reach of the beginning coder
• Now you can include these three lines of code (plus jQuery) and any table with class name "stripeMe" will be striped
• Just one step left...

Highlight Row As Cursor Rolls Over

"If you enjoy my tutorial you're going to love my new software for web designers:"

• If you have used javascript before, you are familiar with onMouseover, onMouseout, onClick, onSubmit...
• These are events. They can be used to trigger specific code to execute when the event occurs
• jQuery makes events easier than you might imagine
  • Remember $('.whatever') means "Find objects with class name 'whatever'" (Simplified explanation)
  • $('.whatever').mouseover() tells jQuery "Everything with class name 'whatever' will have a new onMouseover event
  • Inside the mouseover parenthesis you will put a function. The function tells jQuery what happens when the event (mouseover) occurs

Add A Class When Mouseover Triggered

"If you enjoy my tutorial you're going to love my new software for web designers:"

• What you're about to see is as complicated as this tutorial gets. If you can make it past this... you're home free.
• $(this) tells jQuery to refer back to the last time $() was called

• Here's what this code means, section by section
  • Find all rows (tr) inside any page elements with class name "stripeMe"
  • Assign the mouseover event to each row
  • When the mouseover event is triggered, here is a function to execute
  • $(this) refers to all those rows jQuery found
  • Add the class "over" to those rows (on mouseover)

Mouseout

"If you enjoy my tutorial you're going to love my new software for web designers:"

• Mouseout is pretty much the same as before
• Instead of addClass we use removeClass

The Finished Product

"If you enjoy my tutorial you're going to love my new software for web designers:"

• (The tutorials not over... but let's see what we've accomplished)
• See the finished demo here (opens in new window)
• We could quit here... but jQuery gives us the flexibility to shorten up our code even further

Did I Goof?

"If you enjoy my tutorial you're going to love my new software for web designers:"

• "What the heck, Jack... you said you were going to get this code down to less than 5 lines"
• Here's where we are right now

• Not bad... but let's do better

Chainable Methods

"If you enjoy my tutorial you're going to love my new software for web designers:"

• jQuery lets you 'chain' methods together
• When you're giving jQuery two or more instructions for one element you can remove some redundancy
• For example:
  • $('.whatever').mouseover().mouseout();
• Here's what that looks like in the "wild"

• Now time for some "cheating"...

Pile It On One Line If You Want

"If you enjoy my tutorial you're going to love my new software for web designers:"

• If you've written it correctly, you should be able to write it on one line
• Click here to see the javascript
• So, let's wrap up and see if using jQuery was worth it

Why Use jQuery?

"If you enjoy my tutorial you're going to love my new software for web designers:"

• jQuery helped us accomplish several key goals
  • jQuery slimmed down the code dramatically
  • We made use of the Document Object Model (advanced javascript) without climbing a steep learning curve
  • Our code allows us more flexibility since we can stripe any table on a page by giving it the "stripeMe" class name
  • Our code executes sooner thanks to jQuery since it doesn't wait for the entire page to load
  • We were able to chain several instructions together and save space and time