www.webdeveloper.com
Results 1 to 4 of 4

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

Hybrid View

  1. #1
    Join Date
    Jun 2011
    Posts
    3

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

    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!

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Code:
    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:

    Code:
    Q(".foo , .bar")

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

  3. #3
    Join Date
    Jun 2011
    Posts
    3
    im using this code now which works fine in FF, but not IE!


    Code:
    <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

  4. #4
    Join Date
    Jun 2011
    Posts
    3
    sorry THIS is the code that works in FF & Chrome but not Safari or IE:

    Code:
    <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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles