DHTML select list trouble, continued

January 23, 2006 / Filed under: Browsers, CSS, JavaScript, Tutorials

A short while back, I mentioned an issue where a DHTML layer was being obstructed by underlying select lists.

In the comments, Josh mentioned the CSS property z-index, and I mentioned using CSS to simply "hide" the troublesome select lists, while the DHTML layer was visible - and then once the DHTML layer went away, I’d "show" the select lists again. This is also a CSS approach.

It turns out the best approach is a combination of both techniques.

And, truthfully, using z-index alone would solve all of our problems, but IE 6 doesn’t deal with it well.

So... for browsers that treat z-index the way it should be treated, the CSS rule is as simple as:

#dhtmlLayer
{
    z-index: 10;
}

So, for our example, that DHTML layer (with an ID of dhtmlLayer) is surely going to be displayed on top of everything else, including select lists.

Problem solved for 90% of browsers on the market. But again, whereas many browsers utilize z-index properly, IE 6 does not.

So... for IE 6, we still have to use the old approach of "hiding" troublesome select lists, while the DHTML layer is showing.

Also, since the z-index property won’t hurt anything in IE 6, we can safely leave it in there. IE 6 will simply ignore it (or most of it).

Thankfully, the JavaScript part is rather simple. Within your JavaScript script, make variables into all the select lists you want to hide:

var selectList1 = document.getElementById("selectList1");
var selectList2 = document.getElementById("selectList2");
var selectList3 = document.getElementById("selectList3");
var selectList4 = document.getElementById("selectList4");
...

Then, when you want to hide those specific select lists, you just specify that:

selectList1.style.visibility = 'hidden';
selectList2.style.visibility = 'hidden';
selectList3.style.visibility = 'hidden';
selectList4.style.visibility = 'hidden';
...

Then, when you want to re-show those specific lists, you just specify that:

selectList1.style.visibility = 'visible';
selectList2.style.visibility = 'visible';
selectList3.style.visibility = 'visible';
selectList4.style.visibility = 'visible';
...

The problem is... the larger your form grows, the more possible select lists there might be to hide. Also, if you move form elements around, there’s a chance that another select list might be "in the way" of the DHTML layer.

And then, for every select list, you have to enter a new line of JavaScript code, which targets it.

This is becoming a mess.

A better approach is to use an array, and simply hide all select lists, on the form. This way, it doesn’t matter where the select lists are, in the form, or how many of them there are.

They’ll just all disappear (temporarily), and we’ll be set.

First, we initialize the array, which will hold all of the select lists in the form:

selectLists = document.getElementsByTagName('select');

Then... we loop through the array, and hide all of those select lists:

// HIDE UNDERLYING SELECT LISTS
for (var counter=0; counter<selectLists.length; counter++)
{
    selectLists[counter].style.visibility = 'hidden'    
}

Then, when we want to re-show the select lists, we loop through the array again, but this time we set the visibility to visible:

// REVEAL UNDERLYING SELECT LISTS
for (var counter=0; counter<selectLists.length; counter++)
{
    selectLists[counter].style.visibility = 'visible'   
}

That’s it. No initializing every select list variable. No having to specify visible and hidden for every variable.

Comments/Mentions