Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    May 2005
    Location
    Utah
    Posts
    64
    Thanks
    6
    Thanked 0 Times in 0 Posts

    SetTimeout won't work

    I have a lot of tables, and I don't need to show them all, so I have a script to show the tables when you hover over something above them. I want the table to appear for 5 seconds after you mouseout, but it's not working. If you're interested, the page is at http://www.localheromx.com/templates.php (Note - don't make fun of my code, I worked on this for a day and this finally worked! I just can't get the 5 second pause)
    Code:
    <table>
     <tr>
         <td onMouseOver="document.getElementById ('13-14CRF450').className = document.getElementById ('13-14CRF450').className == 'hide' ? '' : 'hide'" onMouseOut="setTimeout(document.getElementById ('13-14CRF450').className = document.getElementById ('13-14CRF450').className == 'hide' ? '' : 'hide',5000)">-
         </td> 
     </tr>
    </table>
            
    <table align="center" cellpadding="2" cellspacing="2" class="hide"  id="13-14CRF450" >
              <tr>
                  <td>Right Shroud</td>
                  <td >$19.44</td>
              </tr>
    </table>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,771
    Thanks
    23
    Thanked 550 Times in 549 Posts
    getElementById ('13-14CRF450')

    Ids can not start with number

    use

    id='B13-14CRF450'

    I think you'll find 5 sec a long time.

    Code:
    <body>
    
    <div onmouseover="myFunction()">Try it</div>
    
    
    <script>
    function myFunction()
    {
    setTimeout(function(){alert("Hello")},5000);
    }
    </script>
    
    </body>
    Last edited by sunfighter; 11-04-2013 at 04:49 PM. Reason: added set time out
    Evolution - The non-random survival of random variants.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,277
    Thanks
    28
    Thanked 272 Times in 266 Posts
    Quote Originally Posted by sunfighter View Post
    getElementById ('13-14CRF450')

    Ids can not start with number

    use

    id='B13-14CRF450'
    Whatever the problem is, that's not it. HTML5 doesn't have this restriction and JavaScript works fine with such IDs. CSS doesn't, but that can be solved with CSS escapes.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,277
    Thanks
    28
    Thanked 272 Times in 266 Posts
    Quote Originally Posted by Local Hero View Post
    I have a lot of tables, and I don't need to show them all, so I have a script to show the tables when you hover over something above them. I want the table to appear for 5 seconds after you mouseout, but it's not working. If you're interested, the page is at http://www.localheromx.com/templates.php (Note - don't make fun of my code, I worked on this for a day and this finally worked! I just can't get the 5 second pause)
    I assume this is what you're looking for:

    Code:
    onmouseover="document.getElementById('13-14CRF450').removeAttribute('class');" onmouseout="setTimeout(function () { document.getElementById ('13-14CRF450').setAttribute('class', 'hide'); }, 5000);"
    Your code—HTML and JavaScript—could use some work, but apparently you already know that; I'll refrain from LOLing as you requested.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,771
    Thanks
    23
    Thanked 550 Times in 549 Posts
    @Arbitrator, there were two parts to my answer. The second showed how to call a function on mouse over that used setTimeout(function () ... Just like yours. Hum.

    The first part is an opinion, html5 does allow it. Don't believe it was legal before that.
    Evolution - The non-random survival of random variants.

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,277
    Thanks
    28
    Thanked 272 Times in 266 Posts
    Quote Originally Posted by sunfighter View Post
    @Arbitrator, there were two parts to my answer. The second showed how to call a function on mouse over that used setTimeout(function () ... Just like yours. Hum.
    Yeah, I did it inline though (which, granted, I probably shouldn't have done because it's bad practice). And I was half asleep at that point.

    Quote Originally Posted by sunfighter View Post
    The first part is an opinion, html5 does allow it. Don't believe it was legal before that.
    HTML5 allows it because the restriction was completely arbitrary. HTML4/XHTML1/1.1 are dead. So it's basically allowed everywhere.

    There are still some legacy annoyances, though I don't think any apply to JavaScript. Like #13-14CRF450 needing to be escaped as #\13-14CRF450 in CSS. That makes no sense at all. I guess I should get around to writing an email to the CSS group at the W3C to complain; maybe they can be convinced to lift the restriction.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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