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

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

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:

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>