www.webdeveloper.com
Page 2 of 3 FirstFirst 123 LastLast
Results 16 to 30 of 39

Thread: Get element by class?

  1. #16
    Join Date
    Jul 2006
    Posts
    373
    Yes, what changes for example?

  2. #17
    Join Date
    Jul 2006
    Posts
    373
    Whoops, duplicate post.

  3. #18
    Join Date
    Jul 2006
    Posts
    373
    Hello?? nobody knows??

  4. #19
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,257
    Quote Originally Posted by supercain View Post
    Hello?? nobody knows??
    So what was wrong with answers in posts #7, #8 or #9?

    If they did not answer your question, please restate the problem.

  5. #20
    Join Date
    Jul 2006
    Posts
    373
    That they not resolve my problem because I need the code to work without need of establishing IDs, but only classes. Thats the purpose of this topic.

    Thank you.

  6. #21
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    Talk about pulling teeth...

    After rereading your input it seems you want to do away with IDs all together and only use classes to style and manipulate your web page.
    Manipulating html by classes alone sounds odd but maybe doable as nothing is impossible.

    Web development generally has
    1: html to show your information
    2: classes to improve the style (CSS)
    3: IDs to manipulate the behaviour (JavaScript)

    Things are a changing sure, but in general terms they still stand...

    If you are trying to do thing differently then you need to do some homework of your own and post a request that stipulates the problem clearly with an example that demonstrates it.

  7. #22
    Join Date
    Jul 2006
    Posts
    373
    Man, thank you for trying to help but really, i dont understand what you mean. I only need this code below:

    <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 with classes instead of IDs. Is it or not possible?
    Last edited by supercain; 02-25-2013 at 11:29 AM.

  8. #23
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    go and have a very close look at post #8 and #9....................................

  9. #24
    Join Date
    Jul 2006
    Posts
    373
    I did man, and you are using IDs in both examples...
    Last edited by supercain; 02-25-2013 at 11:26 AM.

  10. #25
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    Yes I do because I follow general convention of using IDs to manipulate html and reserve classes to style the html.

    post #21 laid that out clearly....

    So my observation that NO IDs are allowed is correct...

  11. #26
    Join Date
    Jul 2006
    Posts
    373
    Yes, i cant use IDs here. Im limited to classes only. Could you please tell me why doesnt this work:

    <script type="text/javascript">
    function retract() {
    document.getElementByClassName("ret-banner").className = 'exp-banner';
    }
    function expand() {
    document.getElementByClassName("exp-banner").className = 'ret-banner';
    setTimeout('retract()', 3000)
    }
    </script>
    Thank you.

  12. #27
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    go back to post #7 and read what I wrote about #getElementsByClassName#

    What does it return....

  13. #28
    Join Date
    Dec 2012
    Location
    NSW Australia
    Posts
    73
    and guess what Post #9 has all the parts to make it work as you require...

    Being old/grumpy/busy distracted my thoughts somewhat and I pray you work out the solution yourself as that is the best way to learn...

  14. #29
    Join Date
    Feb 2013
    Posts
    46
    Code:
    // cycle through list of elements:
    function cycle (elements, func) {
      var element;
      if (!(elements instanceOf Array)) {
        return func.call(elements, elements);
      }
      for (element in elements) {
        return cycle(element, func);
      }
    };
    
    // Get all elements found with a class 'className'
    var classes = document.getElementsByClassName('exp-banner');
    
    function retract () {
      function run (element) {
        element.className = 'exp-banner';
      }
      cycle(classes, run);
    }
    
    function expand () {
      function run (element) {
        element.className = 'ret-banner';
      }
      cycle(classes, run);
      setTimeout(retract, 3000);
    };
    Since getElementsByClassName() returns a list, we can cycle through that list and execute a function for each element within that list. Very useful. If you want to use classes with JavaScript, you are not restricted to creating a unique ID on every element- and can use the same class on many elements, as well as use more than one class on any given element. Since it is not useful nor reliable to get only one class of an element- there is no function 'getElementByClassName'. To get all elements with a given className, use (note the 's' in 'Elements'): 'getElementsByClassName()[0]' to get the first element found with a given className. Or, as my example does, you can cycle through a list of elements (returned by getElementsByTagName or getElementsByClassName or querySelectorAll, and more...).

    Hope that helps.

  15. #30
    Join Date
    Jul 2006
    Posts
    373
    Thanks for your answer s-p-n. Im trying your code but i cant get it to work. Is it okay to enclose it like this within the head tags?

    <script>
    // cycle through list of elements:
    function cycle (elements, func) {
    var element;
    if (!(elements instanceOf Array)) {
    return func.call(elements, elements);
    }
    for (element in elements) {
    return cycle(element, func);
    }
    };

    // Get all elements found with a class 'className'
    var classes = document.getElementsByClassName('exp-banner');

    function retract () {
    function run (element) {
    element.className = 'exp-banner';
    }
    cycle(classes, run);
    }

    function expand () {
    function run (element) {
    element.className = 'ret-banner';
    }
    cycle(classes, run);
    setTimeout(retract, 3000);
    };
    </script>

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