Highlighting List Items

I was working on something a little different the other day. We were trying to add a higher level of UI to a certain page, and one of the things we wanted to do was do a highlight over different lists items in order to compare list items in different lists. Why would we be wanting to compare such things? Wouldn’t a table be the best way to show that type of data? Well, It could have been a table, but the way the page and content was laid out it made more sense to have lists in different parts of the document, though when visible the lists would all be in the same area of the page.

So I set out to create a short little script for adding a highlight across all the lists as the mouse hovers over different list items. It’s pretty much a straight forward approach, the code below is what adds the needed attribute, classes and events - it gets called when the body loads. Let me do the rundown:

  1. First, gather all the list items you’ll need. In the code below I’m just grabbing all LI’s, but you could us document.getElementById("box").getElementsByTagName("LI")
  2. Next, get the siblings of the LI and number them all - this is important because when an the cursor mouses over an LI, it needs to highlight the same numbered LI’s from the other lists. Taking a look at the code now, I can see I’m doing a little bit extra work.
  3. Now we just set the events. When the cursor mouses over we need to go through all the UL’s looking for the correctly number LI to set the highlight class, or remove it when the mouse has moved out.
var nodes = document.getElementsByTagName( "LI" );

for( var i = 0; i < nodes.length; i++ ){                     
	var sibs = nodes[i].parentNode.getElementsByTagName( "LI" );

	for( var j = 0; j < sibs.length; j++ ){
		if( sibs[j] == nodes[i] )
	nodes[i].onmouseover = function(){
		setAttributeClass( this, "hlite", true ); 

		var uls = document.getElementsByTagName( "UL" );
		for( var k = 0; k < uls.length; k++ ){
			if( uls[k] != this.parentNode )

	nodes[i].onmouseout = function(){
		removeFromClassAttribute( this, "hlite" );

		var uls = document.getElementsByTagName( "UL" );
		for( var j = 0; j < uls.length; j++ ){
			if( uls[j] != this.parentNode )

The setAttributeClass and removeFromClassAttribute are some of my DOM functions I use for quickly adding or removing extra classes from elements.

September 20, 2006 12:34 AM HTML and CSS


Leave a comment of your own

If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.

Use of HTML for comments is not available.

In an effort to combat spam, you will be able to post your comment after you preview.

Powered by Movable Type 3.2 Creative Commons License: Some Rights Reserved © 2000-2005

Site feeds. Hofully valid XHTML and CSS. No kitties were harmed in the making of this website.