unobtrusive zebra striping with prototype.js

November 30th, 2007
Posted by David Lowenfels
Filed in:
zebra stripes

I just cooked up some flexible zebra striping for prototype. I call it ...drumroll please… ProtoStripe!

badum-ching! ;)


// protostripe.js

Event.observe( window, 'DOMContentLoaded', function() {

  $$('.striped').each( function(e) {
    Selector.findChildElements(e, ['tr','li']).each( function(e, idx) {
      e.addClassName( idx % 2 == 1 ? 'odd' : 'even');
    });    
  });

});

Just include it in your HTML header, and any tables or lists with class=”striped” will have their appropriate children decorated with “odd” and “even” CSS classes. Unobtrusive JavaScript rocks! :)

actionmailer ActionView ActiveRecord activesupport agile ajax alphadecimal audio autotest BDD blocks capistrano ssh ruby console controller css dashboard widget delegate dog puppy naming name DRM email obfuscation exceptions factories factories-and-workers factory pattern filemerge find and replace finder fink fixtures fun functional testing gem gems git google maps haml hash helper helpers imagemagick install Intertrust irb javascript jquery jrails logo macro math meetup model openssl OS X patch Pioneer Electronics plugin polymorphism project management prototype.js rails rails gotcha rails,patch,validations railsconf rake rmagick RSA encryption ruby ruby on rails script scrum scrum lessons rails scrumninja shoulda subversion SyncTV TDD testing textmate tips tricks unique hashes unix shell validation view yaml zebra stripes