Help with setTimeout

  • Scott K
  • Born
  • Born
  • Scott K
  • Posts: 1

Post 3+ Months Ago

I am working on my own system for star ratings. Heres how it works: An html table is generated in codebehind (this allows me to determine the current rating, if a user can vote, etc.) The table itself is assigned an onmouseover function of showDiv() which displays a hidden div next to the star table that displays a message. The table is also assigned the onmouseout function resetRating(). That function is used to reset the table's background image to the original star rating if the user moves the mouse off the table without voting. Note that the resetRating() function is also used to call the hideDiv() function that hides the message div.

Each table cell is assigned an onmouseover fuction of hoverStar() which changes the tables background image to the appropriate star rating image as well as changes the text in the message div.

While this all seems to work ok, there is one problem that I can't seem to get around. I decided that i didn't want the message div to disappear the instant that a user moved their mouse pointer off the table (this would be the hideDiv() function that was called by the resetRating() fuction which was triggered by the table's onmouseout event. So, in order to give the message div a second before it disappears, I decided to call hideDiv like so: setTimeout("hideDiv", 2000); Now, the problem is that once i added this, the message div disappears after a few seconds EVEN when the mouse pointer is still on the table! If the resetRating() and hideDiv() fiunctions are only supposed to be fired on the tables onmouseout event, why am I getting this behaviour? Below is the html and javascript.


JAVASCRIPT Code: [ Select ]
        function showDiv() {
            showRateText('MainContent_RateWrap', 'RateMsg', 200, 215);
        }
 
        function showRateText(parentEle, dropDownEle, dropDownWidth, offSetRight) {
 
            parentElement = document.getElementById(parentEle);
            dropDownElement = document.getElementById(dropDownEle)
 
            //position
            dropDownElement.style.left = (getOffsetLeft(parentElement) - offSetRight) + 'px';
            dropDownElement.style.top = (getOffsetTop(parentElement) + parentElement.offsetHeight + 3) + 'px';
 
            //width
            dropDownElement.style.width = dropDownWidth + 'px';
 
            dropDownElement.style.visibility = 'visible';
        }
 
        function hoverStar(cls, STAR) {
            document.getElementById('MainContent_Rating').style.backgroundImage = "URL(../images/" + cls + ")";
 
            var targetElement = $get('starTxt')
            targetElement.className = 'starTxtExp';
            targetElement.innerHTML = STAR + ' out of 5 stars';
        }
 
        function resetRating(rst) {
            document.getElementById('MainContent_Rating').style.backgroundImage = "URL(../images/" + rst + ")";
            var targetElement = $get('starTxt');
            targetElement.className = 'starTxt';
 
            setTimeout("hideDiv()", 2000);
        }
 
        function hideDiv() {
            document.getElementById('RateMsg').style.visibility = 'hidden';
        }
  1.         function showDiv() {
  2.             showRateText('MainContent_RateWrap', 'RateMsg', 200, 215);
  3.         }
  4.  
  5.         function showRateText(parentEle, dropDownEle, dropDownWidth, offSetRight) {
  6.  
  7.             parentElement = document.getElementById(parentEle);
  8.             dropDownElement = document.getElementById(dropDownEle)
  9.  
  10.             //position
  11.             dropDownElement.style.left = (getOffsetLeft(parentElement) - offSetRight) + 'px';
  12.             dropDownElement.style.top = (getOffsetTop(parentElement) + parentElement.offsetHeight + 3) + 'px';
  13.  
  14.             //width
  15.             dropDownElement.style.width = dropDownWidth + 'px';
  16.  
  17.             dropDownElement.style.visibility = 'visible';
  18.         }
  19.  
  20.         function hoverStar(cls, STAR) {
  21.             document.getElementById('MainContent_Rating').style.backgroundImage = "URL(../images/" + cls + ")";
  22.  
  23.             var targetElement = $get('starTxt')
  24.             targetElement.className = 'starTxtExp';
  25.             targetElement.innerHTML = STAR + ' out of 5 stars';
  26.         }
  27.  
  28.         function resetRating(rst) {
  29.             document.getElementById('MainContent_Rating').style.backgroundImage = "URL(../images/" + rst + ")";
  30.             var targetElement = $get('starTxt');
  31.             targetElement.className = 'starTxt';
  32.  
  33.             setTimeout("hideDiv()", 2000);
  34.         }
  35.  
  36.         function hideDiv() {
  37.             document.getElementById('RateMsg').style.visibility = 'hidden';
  38.         }


HTML Code: [ Select ]
        <table id="MainContent_Rating" class="Rating_2" onmouseover="showDiv()" onmouseout="resetRating('Rating_2.png');" align="right">
            <tr>
                <td id="MainContent_rtgTD1" onmouseover="hoverStar('Rating_1.png', 'Poor - 1');">
                </td>
                <td id="MainContent_rtgTD2" onmouseover="hoverStar('Rating_2.png', 'Fair - 2');">
                </td>
                <td id="MainContent_rtgTD3" onmouseover="hoverStar('Rating_3.png', 'Average - 3');">
                </td>
                <td id="MainContent_rtgTD4" onmouseover="hoverStar('Rating_4.png', 'Good - 4');">
                </td>
                <td id="MainContent_rtgTD5" onmouseover="hoverStar('Rating_5.png', 'Excellent - 5');">
                </td>
            </tr>
        </table>
 
  1.         <table id="MainContent_Rating" class="Rating_2" onmouseover="showDiv()" onmouseout="resetRating('Rating_2.png');" align="right">
  2.             <tr>
  3.                 <td id="MainContent_rtgTD1" onmouseover="hoverStar('Rating_1.png', 'Poor - 1');">
  4.                 </td>
  5.                 <td id="MainContent_rtgTD2" onmouseover="hoverStar('Rating_2.png', 'Fair - 2');">
  6.                 </td>
  7.                 <td id="MainContent_rtgTD3" onmouseover="hoverStar('Rating_3.png', 'Average - 3');">
  8.                 </td>
  9.                 <td id="MainContent_rtgTD4" onmouseover="hoverStar('Rating_4.png', 'Good - 4');">
  10.                 </td>
  11.                 <td id="MainContent_rtgTD5" onmouseover="hoverStar('Rating_5.png', 'Excellent - 5');">
  12.                 </td>
  13.             </tr>
  14.         </table>
  15.  
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9089
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Do you happen to have this online somewhere? It is hard to duplicate your setup with the code you have provided as it appears many elements are missing still, including images, stylesheets, etc. I think if I see exactly what you are referring to I may be able to give you some insight.
  • WritingBadCode
  • Graduate
  • Graduate
  • User avatar
  • Posts: 214
  • Loc: Sweden

Post 3+ Months Ago

In tables the onmouseout event is a little tricky and can lunch a little as it feels like.

For instance:
Code: [ Select ]
<html>
<head>
</head>
<body bgcolor="red">
    <table border="1" cellspacing="20" onmouseout="alert('hello');">
      <tr>
        <td>Rate 1
        </td>
        <td>Rate 2
        </td>
        <td>Rate 3
        </td>
        <td>Rate 4
        </td>
        <td>Rate 5
        </td>
      </tr>
    </table>
</body>
</html>
  1. <html>
  2. <head>
  3. </head>
  4. <body bgcolor="red">
  5.     <table border="1" cellspacing="20" onmouseout="alert('hello');">
  6.       <tr>
  7.         <td>Rate 1
  8.         </td>
  9.         <td>Rate 2
  10.         </td>
  11.         <td>Rate 3
  12.         </td>
  13.         <td>Rate 4
  14.         </td>
  15.         <td>Rate 5
  16.         </td>
  17.       </tr>
  18.     </table>
  19. </body>
  20. </html>


If you try the following code you will note that the onmouseout is triggered every time you move the mouse between a <td> and an oter <td> (but still remain within the table).

I suspect this is what lunches/triggers the event while you "hold" the mouse within the table.

However as bigweb said: It is hard to duplicate your setup with the code provided so a link/more code wouldn't hurt.

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 163 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.