test/comments? show/hiding HTML elements by className

[Sam]

I wrote a script to show or hide items in an HTML list (<ul
id="stuff">) depending on whether a list-item's CLASS
attribute matches an input string (catString), which is
chosen from a SELECT menu.

Can anyone suggest any improvements to this (below)? I'm
a JS beginner.

It seems to work Camino/Firefox and Mac Explorer-5, but not
in Safari. I haven't been able to test it in
Explorer/Windows. You can test it here if you like:

http://darolanger.com/store_test.html

http://darolanger.com/script/showcat.js

Any advice is welcome. Thanks.


function showCat(catStri ng){
// show all elements w/ class attribute matching catString
var stuff =
document.getEle mentById("stuff ").getElementsB yTagName("li");
// get all LIst elements in ul#stuff
for (var i in stuff){
if (stuff[i].className){
// if catString matches OR if show "everything " then
if (stuff[i].className.inde xOf(catString) >= 0 ||
catString == "everything "){
// show this block
stuff[i].style.display = "block";
}
else {
// hide this block
stuff[i].style.display = "none";
}// (className exists?)
}// (className matches?)
}// (for i in stuff)
}// end showCat

function showCatFromSele cted(){
// call showCat using the selected OPTION's value
showCat(this.op tions[this.selectedIn dex].value);
}

function handleSelect(){
// handle the onchange event
document.getEle mentById("show-me").onchange =
showCatFromSele cted;
}

window.onload = handleSelect;

[RobG]

Re: test/comments? show/hiding HTML elements by className

Sam wrote:[color=blue]
> I wrote a script to show or hide items in an HTML list (<ul
> id="stuff">) depending on whether a list-item's CLASS
> attribute matches an input string (catString), which is
> chosen from a SELECT menu.
>
> Can anyone suggest any improvements to this (below)? I'm
> a JS beginner.
>
> It seems to work Camino/Firefox and Mac Explorer-5, but not
> in Safari. I haven't been able to test it in
> Explorer/Windows. You can test it here if you like:
>
> http://darolanger.com/store_test.html
> http://darolanger.com/script/showcat.js
>
> Any advice is welcome. Thanks.
>
>
> function showCat(catStri ng){
> // show all elements w/ class attribute matching catString
> var stuff =
> document.getEle mentById("stuff ").getElementsB yTagName("li");
> // get all LIst elements in ul#stuff
> for (var i in stuff){
> if (stuff[i].className){
> // if catString matches OR if show "everything " then
> if (stuff[i].className.inde xOf(catString) >= 0 ||
> catString == "everything "){[/color]

Some comments below, take 'em or leave 'em.

Using getElementById without any alternative is unfriendly to
users of older IE. Look for dynWrite in the group FAQ:

<URL:http://www.jibbering.c om/faq/faq_notes/alt_dynwrite.ht ml>

At least you might consider including:

if((!document.g etElementById) && document.all){
document.getEle mentById = function(id){
return document.all[id];
};
}

outside any function in your script.

It is better to assign stuff[i] to a variable so you don't
have to look it up multiple times, and whilst I haven't tested
it specifically, a while loop is likely faster than a for/in
loop.

A RegExp test is the fastest test when matching strings.

When re-displaying the li, use '', which returns the display
attribute of the element to whatever it is set to in the page.

The default for an li is "display: list-item", you have over
ridden this with your style sheet. By specifically setting
display to block you tie your style sheet. Using display = ''
keeps it generic and independent of the style actually set on
the element.

Using the var keyword multiple times seems out of favour, but I
don't know avoiding its use has any benefits. e.g.

var theUL = document.getEle mentById('stuff ');
var stuff = theUL.getElemen tsByTagName('LI ');
var cTest = new RegExp('\\b' + catString + '\\b');
var i = stuff.length;
var cNode;

Could be written:

var theUL = document.getEle mentById('stuff '),
stuff = theUL.getElemen tsByTagName('LI '),
cTest = new RegExp('\\b' + catString + '\\b'),
i = stuff.length,
cNode;

Here is a new showCat function incorporating the above, tested
in IE and Firefox with your page (but without the style sheets
or images):

function showCat(catStri ng){

// theUL is used just to shorten the line
var theUL = document.getEle mentById('stuff ');
var stuff = theUL.getElemen tsByTagName('LI ');
var cTest = new RegExp('\\b' + catString + '\\b');
var i = stuff.length;
var cNode;

while (i--) {
cNode = stuff[i];
if (cNode.classNam e && cTest.test(cNod e.className)){
cNode.style.dis play = '';
} else {
cNode.style.dis play = 'none';
}
}
}

--
Rob

[Sam]

Re: test/comments? show/hiding HTML elements by className

In article <ekcXd.179$Zn.1 6111@news.optus .net.au>,
RobG <rgqld@iinet.ne t.auau> wrote:
[color=blue]
> [...]
> Some comments below, take 'em or leave 'em.
> [...][/color]

Thanks Rob, those are exactly the kind of pointers I was looking for. S

[RobG]

Re: test/comments? show/hiding HTML elements by className

Sam wrote:[color=blue]
> In article <ekcXd.179$Zn.1 6111@news.optus .net.au>,
> RobG <rgqld@iinet.ne t.auau> wrote:
>
>[color=green]
>> [...]
>> Some comments below, take 'em or leave 'em.
>> [...][/color]
>
>
> Thanks Rob, those are exactly the kind of pointers I was looking for. S[/color]

No problem. Forgot to mention, to get all the items to display,
pass my modified showCat() an empty string.

--
Rob