SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    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(SRC) !== -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(SRC) !== -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>

  2. #2
    Non-Member
    Join Date
    Apr 2004
    Location
    Miami, FL, USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <li onMouseover="fadeIn('foo')" onmouseout="fadeOut('foo')">

    Will make it work for a single class. If you want to make it work for multiple classes, you'll have to split() SRC and loop through each class to compare.

    What exactly are you trying to accomplish with the code?

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry if i wasnt very clear.

    basically, i have 3 classes:

    brand, experience, digital

    then a list. some of the list items will have 1 class, or 2, or all 3.

    i need 3 divs, that when hovered over, make the relevant list items have an opacity of 1.

    E.G -
    you hover over a div called "brand" and all of the list items who's class CONTAINS "brand" should light up. onMouseOut they should return to 0.5 (they could be <li class="brand digital"> and because it contains "brand" the script picks this up and applies an opacity of 1 to that item. (and all the other items containing that class name)

    does that make sense?

    thanks so much for your prompt response!

  4. #4
    Non-Member
    Join Date
    Apr 2004
    Location
    Miami, FL, USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, you should make a function called hasClass(el, class). indexOf is a bad way of matching classnames, because it would return true for a partial match (e.g. the class "foo-bar" would match a test for class "foo").

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

  5. #5
    Non-Member
    Join Date
    Apr 2004
    Location
    Miami, FL, USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then your fadeIn / out functions should be altered to use that function. You can reduce fade() to one function for simplicity:
    Code:
    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';
    		}
    	}
    }
    And finally, update your html to reference your new function:

    Code:
    <li onMouseover="fade('foo', true)" onmouseout="fade('foo', false)">

  6. #6
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you!

    but how do i put that all together?
    at the moment it looks like 2 functions? :S

    sorry im really rubbish with JS

  7. #7
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    never mind!
    it works PERFECTLY as is. thank you so much!

    one last thing though...how do i change it slightly, so that all the <li>'s are set to opacity 1.
    then on:hover the ones that DONT have the classname fade to 0.5 and the ones that do stay at 1? (then they all go back to 1 onMouseOut)

  8. #8
    Non-Member
    Join Date
    Apr 2004
    Location
    Miami, FL, USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    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';
    	}
    }

  9. #9
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    me again!
    this doesnt seem to work in IE?
    it says "fade is undefined"?

    any ideas how to make this x browser compatible?

  10. #10
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    (also that last piece of code you gave makes everything on the page fade to 0.5 and nothing to 1?)

  11. #11
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here's the full error:
    SCRIPT1010: Expected identifier
    line 108 character 23: function hasClass(el, class) {
    LOG: [cycle] terminating; zero elements found by selector

  12. #12
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here's my full code now:

    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>
    and this doesnt work in IE. fine in FF though.

  13. #13
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  14. #14
    Non-Member
    Join Date
    Apr 2004
    Location
    Miami, FL, USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it says "fade is undefined" in IE you may have another piece of javascript that's causing the JS engine to shut down. That's the only thing that I can think of... I don't see how the code above could cause an error in IE.

    Try stripping out your other JS and putting it back bit by bit to debug (IE doesn't have a great way to debug JS unfortunately).

    Get that working and then we'll figure out the other issue.

  15. #15
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is the only other JS on my page:

    Code:
    $(document).ready(function() {
    $('.slideshow').cycle({
    fx: 'scrollLeft' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
    });

  16. #16
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i just removed all of the JS on my site, and it still doesnt work in IE


    SCRIPT1010: Expected identifier
    ?flush=1, line 108 character 23
    SCRIPT5009: 'fade' is undefined
    ?flush=1, line 131 character 22

  17. #17
    Non-Member
    Join Date
    Apr 2004
    Location
    Miami, FL, USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    including external scripts?

  18. #18
    Non-Member
    Join Date
    Apr 2004
    Location
    Miami, FL, USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i think i see the problem...

    change <script language="javascript"> to <script type="text/javascript">

    that may fix it.

  19. #19
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    npoe that wasnt it

    does it HAVE to be in the head or anything?

    Code:
    			  <script type="text/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>

  20. #20
    Non-Member
    Join Date
    Apr 2004
    Location
    Miami, FL, USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    did some testing and figured it out... "class" is a reserved word try this:

    Code javascript:
    var hasClass = function (el, cl) {
    	cl = cl.toLowerCase()
    	var classNames = el.className.toLowerCase();
    	classNames = classNames.split(" ");
    	for (var i = 0; i < classNames.length; i++) {
    		if (cl == classNames[i]) return true;
    	}
    	return false;
    }
     
    function fade(cl, fadeIn) {
    	var els = document.getElementsByTagName("li");
    	for (var i = 0; i < els.length; i++) {
    		els[i].style.opacity = (hasClass(els[i], cl) || !fadeIn) ? '1.0' : '0.5';
    	}
    }

  21. #21
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that just makes the whole page fade
    (although it DOES work in IE! haha)

  22. #22
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    right THIS works in FF, but not IE, and this is closer to what i need to happen. that on hover, all elements with a class defined on the <li> we are hovering over become fully visible:

    <script language="Javascript">
    function hasClass(el, cl) {
    class = cl.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(cl, fadeIn) {
    var els = document.getElementsByTagName("*");
    for (var i = 0; i < els.length; i++) {
    if (hasClass(els[i], cl)) {
    els[i].style.opacity = fadeIn ? '1.0' : '0.5';
    }
    }
    }
    </script>

    ideally what i actually need now, is:

    by default: opacity = 0.5
    on hover: opacity = 1
    on hover of ANOTHER div class, previous element becomes 0.5, new element becomes 1.
    on click: opacity =1 and stays 1, until you hover over the next div.

    does that make sense?


Bookmarks

Posting Permissions

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