SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Broken onmouseout

    This function does not work. I wanted to set a 500 millisecond timer on it.

    Code JavaScript:
    comp_list.onmouseout = window.setTimeout(function (){
    		 if (hasClass(comp_list, 'block'))
    		 {
    			 removeClass(comp_list, 'block');
    			 removeClass(comp_drop, 'active');
    		 }
    	 }, 500);

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are assuming that the function knows about comp_list and comp_drop. This would be the case if they were global variables. Are they?

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PhilipToop View Post
    You are assuming that the function knows about comp_list and comp_drop. This would be the case if they were global variables. Are they?
    Yes, they are global.

    I fixed the function but now it just doesn't do what I want. I want it to have a delay when I mouse out. setTimer is just says for it to stay visable for 3.5 seconds. How do I get the delay effect?

    Code JavaScript:
    comp_list.onmouseout=function(){
    	 setTimeout(function (){
    	 		 if (hasClass(comp_list, 'block'))
    	 		 {
    	 			 removeClass(comp_list, 'block');
    	 			 removeClass(comp_drop, 'active');
    	 		 }
    	 	 }, 3500);
    	 }

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You seem to be assuming the function is not being fired after 3.5 seconds rather than the function is not doing what you expect it to do.

    A simple debug step would be to put a couple alerts in the function. One so you are alerted when the function is executed and two what the conditional is true.

    Code JavaScript:
    comp_list.onmouseout=function(){
         setTimeout(function (){
               alert("function entered") 
               if (hasClass(comp_list, 'block'))
                {
                   alert("hasClass satisified") 
                   removeClass(comp_list, 'block');
                   removeClass(comp_drop, 'active');
                }
             }, 3500);
         }

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PhilipToop View Post
    You seem to be assuming the function is not being fired after 3.5 seconds rather than the function is not doing what you expect it to do.

    A simple debug step would be to put a couple alerts in the function. One so you are alerted when the function is executed and two what the conditional is true.

    Code JavaScript:
    comp_list.onmouseout=function(){
         setTimeout(function (){
               alert("function entered") 
               if (hasClass(comp_list, 'block'))
                {
                   alert("hasClass satisified") 
                   removeClass(comp_list, 'block');
                   removeClass(comp_drop, 'active');
                }
             }, 3500);
         }
    I am being alerted while i'm still hovered over com_list. I want this to only set the timer / delay after I leave the drop down menu.

  6. #6
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In sounds like you have the onmouseout event tied to a <SELECT>.

    Now there are two components to this the select box itself and the dropdown list. As soon as you move onto the list your mouseout event is fired. That is the dropdown list is not an extension of the control.

    He's a little test html

    Code HTML4Strict:
    <html>
    <head>
     
    <script type="text/javascript">
    <!--
    var theselect;
    window.onload = function () {
       theselect = document.getElementById("idcomp");
       theselect.onmouseout = function () {
            setTimeout(function() {
                alert("hello");
                 }, 1000);
       };
    };
    // -->
    </script>
    </head>
    <body>
    <select id="idcomp" name="comp">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    </select>
    </body>
    </html>

    Whilst your in the confines of the select itself you will not get the control (unless you are experiencing the time delay). If you make the dropdown list appear and move very slightly into it the alert will be given.

    Might this be the cause of your problem?

  7. #7
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You can avoid all of these problems by using an onchange handler instead of an onmouseout. This will only fire after you have made your choice. Here is the script.

    var theSelect;
    window.onload = function ()
    { theSelect = document.getElementById("idcomp");
    theSelect.onchange = function () {
    setTimeout("alert('hello')", 1000);
    }
    }

    Please note that I have changed the way you wrote the timeout. The first component only needs to be a javascript statement, so you can get rid of the function call and use the script directly as I have done.


Bookmarks

Posting Permissions

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