dcsimg
www.webdeveloper.com
Page 3 of 3 FirstFirst 123
Results 31 to 39 of 39

Thread: Get element by class?

  1. #31
    Join Date
    Feb 2013
    Posts
    46
    No, JS should always be executed in the body tag after all of the mark-up..
    Like so:
    HTML Code:
    <!doctype html>
    <html>
    <head>
      <!-- title, meta, css, and *DOM-independent* JavaScript -->
    </head>
    <body>
      <!-- all mark-up for browser display -->
      <script>
        //My *DOM-dependent* JavaScript.
      <script>
    </body>
    </html>
    *DOM-independent*: JavaScript that never references 'document' or conditionally checks if the document or parts of the document are loaded, and does not error if parts of the document are never loaded.
    *DOM-dependent*: JavaScript that references the browser's 'document' variable or anything relating to the Document Object Model'


    Since my example uses document.getElementsByClassName('class'), I am assuming there is an element with the class of 'class'. If used in the <head> section or anywhere before '<div class="class">' is seen (the browser reads from top to bottom), then it will be an empty list- as it wont see the elements if it is used before the elements are there.

  2. #32
    Join Date
    Jul 2006
    Posts
    373
    I put your code right above the </body> tag but still wont work. Am i missing something?

    Thank you.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    <title></title>
    <style>
    .exp-banner {
    clip: rect(0px, 150px, 220px, 0px);
    position: absolute;
    }

    .exp-banner div, .ret-banner div {
    left: -420px;
    position: absolute;
    top: -440px;
    }
    .ret-banner {
    position: absolute;
    z-index: 100;
    }
    </style>
    </head>
    <body style="background-color:saddlebrown;">
    <table>
    <tbody>
    <tr>
    <td style="height:300px" colspan="3"></td>
    </tr>
    <tr>
    <td style="width:300px"></td>
    <td>
    <div>
    <div class="exp-banner">
    <div>
    <embed width="1920" height="1080" wmode="transparent" onmouseover="expand()" src="flash.swf">
    </div>
    </div>
    </div>
    </td>
    <td></td>
    </tr>
    </tbody>
    </table>
    <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>
    </body>
    </html>

  3. #33
    Join Date
    Feb 2013
    Posts
    46
    Sorry, I had some mistakes since I didn't test. Fiddling around in jsfiddle I figured it out:
    http://jsfiddle.net/2jtFD/1/

    The DOM doesn't call a list of elements a prototype of Array like I'd assumed... So I had to do a little trick to make it work: http://jsfiddle.net/2jtFD/1/

    JSFiddle correctly places the js in the right spot, so it works.

  4. #34
    Join Date
    Jul 2006
    Posts
    373
    Sorry but i dont see it working. I press the button but nothing happens. What is supposed to occur?

  5. #35
    Join Date
    Feb 2013
    Posts
    46

  6. #36
    Join Date
    Jul 2006
    Posts
    373
    Hi,

    this time the code seems to almost work except for one thing. Its kinda delayed when i have more than one element. Lets say that i have 2 objects instead of one:

    <table>
    <tbody>
    <tr>
    <td style="height:300px" colspan="3"></td>
    </tr>
    <tr>
    <td style="width:300px"></td>
    <td>
    <div>
    <div class="exp-banner">
    <div>
    <embed width="1920" height="1080" wmode="transparent" onmouseover="expand()" src="flash.swf"> <!--first element-->
    </div>
    </div>
    </div>
    </td>
    <td></td>
    </tr>
    </tbody>
    </table>
    <table>
    <tbody>
    <tr>
    <td style="height:300px" colspan="3"></td>
    </tr>
    <tr>
    <td style="width:300px"></td>
    <td>
    <div>
    <div class="exp-banner">
    <div>
    <embed width="1920" height="1080" wmode="transparent" onmouseover="expand()" src="flash.swf"><!--2nd element-->
    </div>
    </div>
    </div>
    </td>
    <td></td>
    </tr>
    </tbody>
    </table>
    if you mouseover the first element, the div will expand immediately achieving the effect perfectly. However, when hovering the 2nd one, there is a delay and the div doesnt expand right away, preventing the effect from showing properly. The same thing happens with the 3rd, 4th and so on if present. Is there anyway to fix that delay?

    Thank you.

  7. #37
    Join Date
    Feb 2013
    Posts
    46
    Put it on jsfiddle so I can see the problem

  8. #38
    Join Date
    Jul 2006
    Posts
    373
    Okay, nevermind. After testing a lot, i just found out its faster to do it with IDs after all. The reason i didnt want to use IDs is because i had to write a new code to automatically generate a unique ID for every element. But after all this trouble I finally decided to try it and go for it. It works, i just feel it could be better:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    <title></title>
    <script>
    function uniqueid(){
    var idstr=Math.floor(Math.random()*1001);
    return (idstr);
    }
    </script>
    <style>

    .exp-banner {
    clip: rect(0px, 150px, 220px, 0px);
    position: absolute;
    }

    .exp-banner div, .ret-banner div {
    left: -420px;
    position: absolute;
    top: -440px;
    }
    .ret-banner {
    position: absolute;
    z-index: 100;
    }
    </style>
    </head>
    <body style="background-color:saddlebrown;">
    <table>
    <tbody>
    <tr>
    <td style="height:300px" colspan="3"></td>
    </tr>
    <tr>
    <td style="width:300px"></td>
    <td>
    <div>
    <script>
    document.write("<div class='exp-banner' id='"+uniqueid()+"' onmouseover='expand(this.id)'>");
    </script>
    <div>
    <embed width="1920" height="1080" wmode="transparent" src="flash.swf">
    </div>
    </div>
    </div>
    </td>
    <td></td>
    </tr>
    </tbody>
    </table>
    <table>
    <tbody>
    <tr>
    <td style="height:300px" colspan="3"></td>
    </tr>
    <tr>
    <td style="width:300px"></td>
    <td>
    <div>
    <script>
    document.write("<div class='exp-banner' id='"+uniqueid()+"' onmouseover='expand(this.id)'>");
    </script>
    <div>
    <embed width="1920" height="1080" wmode="transparent" src="flash.swf">
    </div>
    </div>
    </div>
    </td>
    <td></td>
    </tr>
    </tbody>
    </table>
    <script type="text/javascript">
    function expand(iden) {
    document.getElementById(iden).className="ret-banner";
    setTimeout(function(){document.getElementById(iden).className="exp-banner";}, 3000)
    }
    </script>
    </body>
    </html>
    that document.write part is bothering me, but i dont know another way to insert the javascript variable in the html id declaration. The code alone works fine but I integrated it in a php board (IPB) and whenever a user submits a post, the post doesnt appear right away on the topic (its supposed to be added dynamically with ajax like on this forum). Instead the user sees a blank screen. So i assume something in the code is conflicting with ajax. Do you have a better way?

    Thank you.

  9. #39
    Join Date
    Jul 2006
    Posts
    373
    I think i got it!

    <div class="exp-banner" id="" onmouseover="this.id=uniqueid();expand(this.id)">
    This replaces the document.write part and now everything seems to work perfect. Unless you have an even better solution? Please tell me what you think.

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