www.webdeveloper.com
Page 1 of 3 123 LastLast
Results 1 to 15 of 39

Thread: Get element by class?

Hybrid View

  1. #1
    Join Date
    Jul 2006
    Posts
    373

    Get element by class?

    Hi,

    im using this code right now

    Code:
    <script type="text/javascript">
        function retract() {
      		document.getElementById("ret-banner").id = 'exp-banner';
      	}
      	function expand() {
      		document.getElementById("exp-banner").id = 'ret-banner';
      		setTimeout('retract()', 3000)
      	}
     </script>
    but i need it to get the element by class instead. I tried just by changing it to document.getElementByClassName but it didnt work. Why? Could you please give me some ideas?

    Thank you.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,255
    Why not show the rest of the HTML display? I don't like to develop and test code from scratch if you have the start of something already.

    Also, how are your classes currently defined in the <style> tag?

    If you want help, it seems you should also want to help us help you!

  3. #3
    Join Date
    Jul 2006
    Posts
    373
    Well, the html is quite simple:

    Code:
    <div id="exp-banner">
    <img src="transparent.png"  onmouseover="expand()">
    </div>

    Code:
    #exp-banner {
        clip: rect(0px, 150px, 220px, 0px);
        position: absolute;
    }
    
    #ret-banner {
        clip: rect(0);
    }
    and thats about it.

    Thank you.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,255

    Lightbulb

    Your 'clip' seems to give a lot of warnings in FF. You might want to investigate that further.

    However, you need not use .className if you show choose.
    I saw no need for two different image elements.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <style type="text/css">
    #exp-banner { clip: rect(0px, 150px, 220px, 0px); position: absolute; }
    #ret-banner { clip: rect(0); }
    </style>
    
    </head>
    <body>
    
    <div>
     <img id="exp-banner" src="" onmouseover="expand()"> <!-- transparent.png ??? -->
    </div>
    
    <script type="text/javascript">
    var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
    var imgList = ['11.jpg','12.jpg'];
    
    function retract() {
      document.getElementById("exp-banner").src = baseURL+imgList[0];
    }
    function expand() {
      document.getElementById("exp-banner").src = baseURL+imgList[1];
      setTimeout('retract()', 3000)
    }
    window.onload = function() {
      retract();
    }
    </script>
    
    </body>
    </html>

  5. #5
    Join Date
    Oct 2012
    Posts
    14
    document.getElementsByClassName

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,255
    Quote Originally Posted by postonoh View Post
    document.getElementsByClassName
    OK in newer browsers.

    You will need to create your own (google search or look on this forum) if older browsers.

  7. #7
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    Quote Originally Posted by supercain View Post
    I tried just by changing it to document.getElementByClassName but it didnt work. Why? Could you please give me some ideas?
    As already stated *document.getElementByClassName* is wrong and needs to be plural as it will return a nodeList which is a collection of elements.

    BUT first your original work with the errors removed

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>error free orginal</title>
    <style>
    #exp-banner {
        clip: rect(0px, 150px, 150px, 0px);
        position: absolute;
    }
    #ret-banner {
        clip: rect(0, 0, 0, 0);
    }
    </style>
    </head>
    <body>
    <div id="exp-banner">
    <img src="http://lorempixel.com/400/400/animals/"  onmouseover="expand()">
    </div>
    <script>
    
    function retract() {
        document.getElementById("ret-banner").id = 'exp-banner';
    }
    function expand() {
        document.getElementById("exp-banner").id = 'ret-banner';
        setTimeout(retract, 3000);
    }
    </script>
    </body>
    </html>

    to be continued...

  8. #8
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    this is an alternative way to do it BUT with a click event as mouse over is worrisome..

    This uses the new classList that is supported in all new browsers now.
    if you require backward compatibility then add the work around. (homework for you).

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>class add remove</title>
    <style>
    .exp-banner {
        clip: rect(0px, 150px, 150px, 0px);
        position: absolute;
    }
    </style>
    </head>
    <body>
    <p>Click image to enlarge....</p>
    <div id="someID" class="exp-banner">
    <img src="http://lorempixel.com/400/400/animals/"  id="omo">
    </div>
    <script>
    
    function retract() {
        document.getElementById("someID").classList.add('exp-banner');
    	document.getElementById('omo').addEventListener('click', expand, false);
    }
    function expand() {
        document.getElementById("someID").classList.remove('exp-banner');
    	document.getElementById('omo').removeEventListener('click', expand, false);
        setTimeout(retract, 3000);
    }
    document.getElementById('omo').addEventListener('click', expand, false);
    </script>
    </body>
    </html>
    to be continued.

  9. #9
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    Now for the *document.getElementsByClassName* just to round it off..

    Not perfect BUT you can do the homework...

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Node List</title>
    <style>
    .exp-banner {
        clip: rect(0px, 150px, 150px, 0px);
        position: absolute;
    }
    .ret-banner {
        clip: rect(0, 0, 0, 0);
    }
    </style>
    </head>
    <body>
    <p>Click image to enlarge...</p>
    <div class="exp-banner" id="omo">
    <img src="http://lorempixel.com/400/400/animals/"  id="omo">
    </div>
    <script>
    
    function retract() {
        var elementFromList = document.getElementsByClassName("ret-banner")[0];
    	document.getElementById('omo').addEventListener('click', expand, false);
    	elementFromList.classList.remove('ret-banner');
    	elementFromList.classList.add('exp-banner');
    }
    function expand() {
        var elementFromList = document.getElementsByClassName('exp-banner')[0];
    	document.getElementById('omo').removeEventListener('click', expand, false);
    	elementFromList.classList.remove('exp-banner');
    	elementFromList.classList.add('ret-banner');
        setTimeout(retract, 3000);
    }
    document.getElementById('omo').addEventListener('click', expand, false);
    </script>
    </body>
    </html>
    done.

  10. #10
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    sorry but an update

    you can still use the *mouseover* event instead of the *click* event if you add/remove the event as I have done with the click event in the alternative versions..
    just replace the string *click* with *mouseover* in each ***addEventListener*** and of course the ***removeEventListener***

    I am getting to old for this...
    Last edited by grumpyOleMan; 02-14-2013 at 07:33 PM.

  11. #11
    Join Date
    Jul 2006
    Posts
    373
    Hi,

    thank you for your responses. Im afraid i didnt understand very well. Is it mandatory to use IDs for the elements with those codes? because the reason i want to convert my code from "get element by id" into "get element by object" is right because i cant use IDs. Please dont ask me why, because the explanation would get very long. The thing is that all this is PHP generated, so the code i posted is just an excerpt, since it will take forever to post it all. I just need to know if its possible to replace the IDs by the classes.

    Thank you.

  12. #12
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    Quote Originally Posted by supercain View Post

    Is it mandatory to use IDs for the elements with those codes

    ...............

    I just need to know if its possible to replace the IDs by the classes.
    With the info that has been provided it it obvious that using classes to replace ID's cannot be done as you do not have any classes to start with...

    So the answer would be NO...


    if by any chance I am wrong again and you want to replace all the ID.s in the code to classes then yes you can BUT you need to clearer with you explanation because your last request is a bit hazy still...
    Last edited by grumpyOleMan; 02-21-2013 at 07:04 AM.

  13. #13
    Join Date
    Jul 2006
    Posts
    373
    Hello?? any help please?

  14. #14
    Join Date
    Jul 2006
    Posts
    373
    But i DO have classes:

    <div class="exp-banner">
    <img src="transparent.png" onmouseover="expand()">
    </div>
    and the class exp-banner should change into ret-banner on mouse over. I just want to modify the original work from having id="exp-banner" to class="exp-banner" so i can work with classes instead of IDs.

    Thank you.

  15. #15
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    as I said *with the info given*

    and you had ID's in your original request....

    the examples I gave had classes instead of IDs.

    if you replace ID's with classes you need be aware that changing them in in the HTML part will require changes to the CSS as well..
    Last edited by grumpyOleMan; 02-21-2013 at 07:19 AM.

Thread Information

Users Browsing this Thread

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

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