Playpen #3 - Changing Your Stripes

You know what they say about Leopards... well at least you can get a table to change its stripes with a bit of DOM scripting.

It's a fairly trivial problem, but seeing as I'm pretty green when it comes to unobtrusive JavaScript, it's somewhere to start!

The Playpen #3 page shows off the table, which has a new class added on alternate rows, and defines a new background colour in the CSS. OnMouseOver will change the class again, to give another colour. But I'm having real trouble resetting the original class/colour onMouseOut... It's probably because the DOM is changed on the fly, and the original (not moused over) state of the alternate row is never actually "stored" on the page. If anyone has any suggestions, I'd be very interested to hear.

For the record, my stripeTables script looks like this:

function stripeTables() {
if (!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
for (var i=0; i<tables.length; i++) {
var odd = false;
var rows = tables[i].getElementsByTagName("tr");
for (var j=0; j<rows.length; j++) {
if (odd == true) {
addClass(rows[j],"altrow");
odd = false;
} else {
odd = true;
}
}
}
}

addLoadEvent(stripeTables);

And this is highlightRows:

function highlightRows() {
if(!document.getElementsByTagName) return false;
var rows = document.getElementsByTagName("tr");
for (var i=0; i<rows.length; i++) {
var rowclass = rows[i].getAttribute("class");
rows[i].onmouseover = function() {
addClass(this,"highlight");
}
rows[i].onmouseout = function() {
this.setAttribute("class" , "rowclass[i]");
}
}
}
addLoadEvent(highlightRows);

I thought getting the Class attribute and storing as rowclass would allow me to reset it to what it was before the onMouseOver event, but sadly the table rows become unstripey once they are moused over!

The only other way I can think of doing it is writing some sort of subtractClass script to complement addClass, but seeing as this will almost certainly involve hideous regular expressions, I'm rather shying away from that.

Anyone have any ideas what I'm doing wrong?

A Little Light Reading

If you're thinking of dipping your toes into the standards compliance/css development pond (come on in, the water's fine!), and you aren't able to afford some of the swanky courses available out there, a good alternative is to read some books by well-respected practitioners in the field, at least to get you started.

Here's a small selection which I've read recently, and have found to be extremely useful. I'll try to add to the list on an ongoing basis, so you might like to come back and check it again later.

I no particular order (other than the order I've read them in!):

• 
  The CSS Anthology - Rachel Andrew, pub Sitepoint
  Excellent all-round introduction to using stylesheets for layout and positioning, with practical real-world examples. Good for people relatively new to CSS - I knew how to change fonts etc but was pretty green regarding CSS for layout until I'd read this and digested it thorougly.
• 
  Build Your Own Standards Compliant Website Using Dreamweaver 8 - Rachel Andrew, Sitepoint
  Invaluable for pointers on getting the most out of Dreamweaver 8 and making sure your code validates nicely, is properly semantic and doesn't suffer from coad bloat. Good chapter on layout of forms without tables.
• 
  Dreamweaver 8 Unleashed - Zak Ruvalcaba, SAMS
  A big, thick wedge of a book (I've actually read most of it but not quite all yet). Excellent advice on using Dreamweaver for dynamic projects. Gives code and method examples for ASP, ASP.NET and PHP server models, which is great as some books limit themselves to one flavour. I currently do most of my dynamic projects with ASP.NET, but in future I'll be getting to grips with some PHP too, so it's great not to have to buy another book right from the start.
• 
  The Zen of CSS Design - Dave Shea & Molly E. Holzschlag, New Riders
  The book of the website. Dave and Molly take a few of the excellent examples from the CSS Zen Garden site, and deconstruct them, with explanations about each technique explained along with copious screenshots (full colour). Yes, you can look at the site directly and try and work out what the stylesheets are doing, but that's pretty hard if you are a novice, and these succinct explanations are a great help in developing your understanding of how to apply the theory to real-world examples.
  
• 
  DOM Scripting (Web Design with JavaScript and the Document Object Model) - Jeremy Keith, Friends of ED
  A great introduction to the scary world of JavaScript for anyone who is thinking about delving into unobtrusive JavaScript which can add progressive enhancements to your site, whilst degrading gracefully if a browser does not support JavaScript (or has it turned off).
  
• 
  CSS Mastery, Advanced Web Standards Solutions - Andy Budd, Friends of ED
  Definitely not for beginners, but takes the examples and techniques to the next level for people who have some experience with coding standards-compliant (X)HTML/CSS. Two chapters at the end, written by Cameron Moll and Simon Collison, bring together lots of the techniques described earlier in the design of two case studies.

That's it for now, although I have a big fat PHP book sitting on the pile to read. I'll add more when I've had time to digest that.

D Is For DOM and d.Construct

Inspired by Christian Heilmann's presentation on DOM Scripting last week (he made JavaScript sound fun, for heavens' sake!), I thought I would try and get my head round the concept. I'm much more familiar with CSS and tend to cower in the corner at the thought of writing any Javascript. So I thought I would buy a book. Well, I actually went into Borders looking for a newbie's guide to PHP but came out with Jeremy Keith''s DOM Scripting: Web Design with JavaScript and the Document Object Model (Friends of ED). How did that happen?

Talking of Jeremy and his friends at Clear:left, I have bought my ticket for the 2006 d.Construct meeting in Brighton on 8th September. It promises to be a good event, and I thought I might make a weekend of it and see a bit of Brighton while I'm at it (or is that just so I can recover from the post-con hangover??).