Koke’s

Zebra tables revisited

Posted by Jorge Bernal February 13, 2006

Some time ago, I read an article about Zebra tables with javascript. This methods saves a lot of unnecessary markup, but has some flaws:

• You can only invoke it for a specific table
• It doesn’t work if the td or tr has a class defined.

So I have rewritten this library to match all the tables with the same class (eg. listing).

function stripe(cls) {

   // the flag we'll use to keep track of
   // whether the current row is odd or even
   var even = false;

   // obtain a reference to the desired table
   // if no such table exists, abort
   var tables = document.getElementsByTagName("table");
   for (var t = 0; t < tables.length; t++) {
     if (tables[t].className == cls) {
       // by definition, tables can have more than one tbody
       // element, so we'll have to get the list of child
       // tbody's
       var tbodies = tables[t].getElementsByTagName("tbody");

       // and iterate through them...
       for (var h = 0; h < tbodies.length; h++) {

        // find all the tr elements...
         var trs = tbodies[h].getElementsByTagName("tr");

         // ... and iterate through them
         for (var i = 0; i < trs.length; i++) {

           trs[i].className =
             even ? 'tr_even' : 'tr_odd';
           // flip from odd to even, or vice-versa
           even =  ! even;
         }
       }
     }
   }
 }

Then you can define your row styles like:

tr.tr_even { background-color: #ffffff; }
tr.tr_odd { background-color: #ecddac; }

CSS Image replacement revised

Posted by Jorge Bernal February 02, 2006

I’ve found a really nice article about current and new techniques to replace some text (usually a title) with an image: Revised Image Replacement.

I was using the classic FIR method for this kind of job in my latest works, but the problem with this one is that some screen readers omit the text because of the display: none. Since this methods were mainly focused in making fancier headers without compromising accessibility, that doesn’t help much.

The new method also uses a span inside the h* tag, but instead of setting display to none, it sets width and height to 0, and hides the overflown text.

Sample code

Imagine your page starts with something like:

<h1 id="header"><span>Koke's</span></h1>

and the CSS is like:

#header {
  width: 131px;
  height: 98px;
  background: transparent url(/files/fir-test.png) no-repeat;
}

#header span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

will result in:

Koke’s