evolt.org Workers of the Web, Evolt!

Ok, let's repeat the trinity of web standards: Markup is the structure, Style Sheets are the presentation and Javascript is the behaviour. That much should be common sense by now. New starters in web development have the chance to follow these rules easily - no more annoying IE4s and Netscape Communicators to worry about - modern browsers can do the CSS and xHTML dance quite well. The separation of markup and presentation is practised a lot, and loads of tutorials and templates help the developer to do so.

With Javascript, it is still a bit dodgy, as too many good resources get lost in the mass of bad or outdated ones.

Look - new Javascript!

2004's state-of-the-art Javascript should be unobtrusive and easily maintainable. In essence, this means:

• Only apply itself when it is possible to do so.
• Use the markup as it is without the need to add inline event calls.
• Be independent of the input device (insofar this is possible).
• Play along well with other Javascripts (no common global variables, no event hijacking).
• Keep the visuals to the CSS, to avoid double maintenance.

The last item is what this article is about. Many a time, you encounter scripts that are nice in themselves, but fail to completely separate the presentation from the behaviour. We cannot assume that every web developer knows Javascript - and its syntax. To avoid frustration using a script, we need to find a way to allow the developer to skin the outcome of this behaviour with CSS. This also makes maintenance easier, as you don't need to check in two places, if you have to change the visiual outcome - all it needs is a change of the CSS.

We want clickable headlines - now!

Let's take a look at an example. Say we want to make every second level headline in a document clickable. What it should do is collapse and expand an adjacent element.

Headers as they are are not clickable elements, so we need to make the user aware that ours are. We do this by adding a > and a hover state.

In the world of non-Internet Explorer, the hover could be done via CSS, but in the real world, we do it via Javascript to ensure that the majority of users will see the effect.

When the header was clicked, we want to give it a selected state.

Now, if we kept the design in the Javascript, this could be done like this:

// Define colours
var hovercolour='#ffc';
var normalcolour='#fff';
var highlight='#69c';
function init()
{
 var h2s,i,tohide,tohideobj,isexpanded;
// grab all second level headlines and loop over them 
 h2s=document.getElementsByTagName('h2');
 for (i=0;i<h2s.length;i++)
 {
// get next sibling (the element to hide, check that it is an element
  tohide=h2s[i].nextSibling;
  while(tohide.nodeType!=1)
  {
   tohide=tohide.nextSibling;
  }
  h2s[i].tohideobj=tohide;
// add the hover function onmouseover and onmouseout 
  h2s[i].onmouseover=function(){hover(this,this.tohideobj,1);}
  h2s[i].onmouseout=function(){hover(this,this.tohideobj,0);}
// hide next element and add onclick event to show and hide it
  tohide.style.display='none';
  h2s[i].onclick=function(){collapse(this,this.tohideobj);return false}
  h2s[i].insertBefore(document.createTextNode('>'),h2s[i].firstChild);
 }
   }
// hover function, adds the hover colour 
// unless the headline is an active trigger
function hover(o,ho,state)
{
 if(ho.style.display=='none')
 {
  o.style.background=state==1?hovercolour:normalcolour;
 }
}
// collapse function, shows and hides the element and sets the highlight 
// colour of the headline
function collapse(o,ho)
{
 ho.style.display=ho.style.display=='none'?'block':'none';
 o.style.background=highlight;
}
window.onload=init;

It does work, but has some disadvantages:

• We need to know javascript (at least how to set variables) to change the look and feel.
• We can only change backgrounds, if we also wanted to change the colour, we'd need to set more variables and extend the hover and the collapse functions.

Becoming classy

What to do? Easy - put all the presentation in style sheet classes, and use the className attribute to change them.

This also means we won't have to add the > any longer, as that can be done in a background image.

.hover{
 padding-left:30px;
 background:url(arrow.gif) 5px 5px no-repeat #ffc;
 color:#000;
}
.highlight{
 padding-left:30px;
 background:url(arrowon.gif) 5px 5px no-repeat #69c;
 color:#fff;
}
.normal{
 padding-left:30px;
 background:url(arrow.gif) 5px 5px no-repeat #fff;
 color:#000;
}
.hidden{
 display:none;
}

Then we change the functions accordingly:

function init()
{
[...]
// hide next element and add onclick event to show and hide it
  tohide.className='hidden';
  h2s[i].className='normal';
[...]
}
// hover function, adds the hover colour 
// unless the headline is an active trigger
function hover(o,ho,state)
{
 if(ho.className=='hidden')
 {
  o.className=state==1?'hover':'normal';
 }
}
// collapse function, shows and hides the element and sets the highlight 
// colour of the headline
function collapse(o,ho)
{
 ho.className=ho.className=='hidden'?'':'hidden';
 o.className='highlight';
}

Works a treat, but still has one problem:

If I already have a class on the headline, the script will remove that one, which means once again Javascript meddling with presentation

Becoming even classier

One thing that is amazingly enough still not too commonly known:

Elements can have more than one class. Something like <h2 class="normal enhanced"> is perfectly valid HTML and is supported by modern browsers.

Bearing this in mind, we can add our classes to the existing ones or remove them. For this, we can use two small functions.

function juggleClass(o,c,s)
{
 o.className=s==1?o.className+' '+c:o.className.replace(' '+c,'');	
}
function checkClass(o,c)
{
 var isClassInObj=o.className.indexOf(c)!=-1?true:false;
 return isClassInObj;
}

juggleClass adds the class c to the object o when s is 1, otherwise it removes the class c from the object o.

checkClass checks if the class c is one of the classes of the object o.

If we add that feature, our final function looks like this:

function init()
{
 var h2s,i,tohide,tohideobj,isexpanded;
// grab all second level headlines and loop over them 
 h2s=document.getElementsByTagName('h2');
 for (i=0;i<h2s.length;i++)
 {
// get next sibling (the element to hide, check that it is an element
  tohide=h2s[i].nextSibling;
  while(tohide.nodeType!=1)
  {
   tohide=tohide.nextSibling;
  }
  h2s[i].tohideobj=tohide;
// add the hover function onmouseover and onmouseout 
  h2s[i].onmouseover=function(){hover(this,this.tohideobj,1);}
  h2s[i].onmouseout=function(){hover(this,this.tohideobj,0);}
// hide next element and add onclick event to the header to show and hide it
  juggleClass(tohide,'hidden',1);
  juggleClass(h2s[i],'normal',1);
  h2s[i].onclick=function(){collapse(this,this.tohideobj);return false}
 }
}
// hover function, adds the hover colour 
// unless the headline is an active trigger
function hover(o,ho,state)
{
 if(checkClass(ho,'hidden'))
 {
  if(state==1)
  {
   juggleClass(o,'normal',0);
   juggleClass(o,'hover',1);
  } else {
   juggleClass(o,'normal',1);
   juggleClass(o,'hover',0);
  }
 }
}
// collapse function, shows and hides the element and sets the highlight 
// colour of the headline
function collapse(o,ho)
{
 if(checkClass(ho,'hidden'))
 {
  juggleClass(ho,'hidden',0);
  juggleClass(o,'normal',0);
  juggleClass(o,'highlight',1);
 }else{
  juggleClass(ho,'hidden',1);
  juggleClass(o,'highlight',0);
  juggleClass(o,'normal',1);
 }
}
function juggleClass(o,c,s)
{
 o.className=s==1?o.className+' '+c:o.className.replace(' '+c,''); 
}
function checkClass(o,c)
{
 var isClassInObj=o.className.indexOf(c)!=-1?true:false;
 return isClassInObj;
}
window.onload=init;

Works the same, but now features a full separation of behaviour and presentation. Storing the class names in global variables would also enable us to change them easily.

If we want to be independent of other Javascripts, we cannot use window.onload of course but should use a more clever function instead that adds our function to the overall window.onload.