getElementsByClassName - for multiple classes (e.g class="foo bar")

[rsbadger15]

hi all,

im on a really tight deadline with this and have been strugglign all day.
(i know nothing about JS!)

here's my code:

<script language="Javascript">
var allHTMLTags = new Array();
function fadeIn(SRC) {
var allHTMLTags=document.getElementsByTagName("*");
for (i=0; i<allHTMLTags.length; i++) {
if (allHTMLTags[i].className.indexOf(",") !== -1)
{
allHTMLTags[i].style.opacity='1';
}
}
}

function fadeOut(SRC) {
var allHTMLTags=document.getElementsByTagName("*");
for (i=0; i<allHTMLTags.length; i++) {
if (allHTMLTags[i].className.indexOf(",") !== -1)
{
allHTMLTags[i].style.opacity='0.5';
}
}
}
</script>


<li onMouseover="fadeIn(foo)" onmouseout="fadeOut(foo)">

<div class="foo" style="opacity: 0.5;">
test 1
</div>

<div class="foo bar" style="opacity: 0.5;">
test 2
</div>

The idea of the above, is that when you hover over the <li> all of the divs with a class CONTAINING "foo" are given an opacity of 1.
the problem is, the above script only seems to work with numbers?!
E.G - class="1 2" works fine.
problem is i need to use words not numbers for the classes.

clearly my code is rubbish, i've bodged it together from bits and pieces of different forums.

PLEASE can somebody help?
the end result needs to go through and find all divs with a class CONTAINING the term specified in the <li>
then give them an opacity of 1, then on mouseOut return the opacity to 0.5

im sure this is newb stuff, but thanks in advance for any help you can give!

[rnd me]

function Q(css, root) {
    var t = "querySelectorAll";
    root = root || document.documentElement;
    if (!root[t]) {
        return;
    }
    if (root.split) {
        root = Q(root)[0];
    }
    return [].slice.call(root[t](css)) || [];
}

returns an array of elements by css selector, which lets us do multiple classes easily enough:

Q(".foo , .bar")

but, alas, it doesn't work in old browsers (if you care).

[rsbadger15]

im using this code now which works fine in FF, but not IE!

<script language="Javascript">
function hasClass(el, class) {
	class = class.toLowerCase()
	var classNames = el.className.toLowerCase();
	classNames = classNames.split(" ");
	for (var i = 0; i < classNames.length; i++) {
		if (class == classNames[i]) return true;
	}
	return false;
}

function fade(class, fadeIn) {
	var els = document.getElementsByTagName("li");
	for (var i = 0; i < els.length; i++) {
		els[i].style.opacity = (hasClass(els[i], class) || !fadeIn) ? '1.0' : '0.5';
	}
}
</script>

<li onMouseover="fade('CategoryBrand', true)" onmouseout="fade('CategoryBrand', false)"> test </li>

<li>
<img class="CategoryBrand CategoryExperiential CategoryDigital " width="100" height="100" alt="" src="test.png">
</li>

can anybody help me get it to work in IE?

here's the error message:
SCRIPT1010: Expected identifier
line 108 character 23: function hasClass(el, class) {
LOG: [cycle] terminating; zero elements found by selector

[rsbadger15]

sorry THIS is the code that works in FF & Chrome but not Safari or IE:

<script language="Javascript">
function hasClass(el, class) {
	class = class.toLowerCase()
	var classNames = el.className.toLowerCase();
	classNames = classNames.split(" ");
	for (var i = 0; i < classNames.length; i++) {
		if (class == classNames[i]) return true;
	}
	return false;
}
function fade(class, fadeIn) {
	var els = document.getElementsByTagName("*");
	for (var i = 0; i < els.length; i++) {
		if (hasClass(els[i], class))  {
			els[i].style.opacity = fadeIn ? '1.0' : '0.5';
		}
	}
}
</script>