Account Options

  1. Sign in
The old Google Groups will be going away soon, but your browser is incompatible with the new version.
Google Groups Home
« Groups Home
comp.lang.javascript
+ new post
About this group
Subscribe to this group
This is a Usenet group - learn more
Trouble with settimeout()
Options
There are currently too many topics in this group that display first. To make this topic appear first, remove this option from another topic.
There was an error processing your request. Please try again.
flag
   3 messages - Collapse all  -  Translate all to Translated (View all originals)
The group you are posting to is a Usenet group. Messages posted to this group will make your email address visible to anyone on the Internet.
Your reply message has not been sent.
Your post was successful
 
From:
To:
Cc:
Followup To:
Add Cc | Add Followup-to | Edit Subject
Subject:
Validation:
For verification purposes please type the characters you see in the picture below or the numbers you hear by clicking the accessibility icon. Listen and type the numbers you hear
 
joe  
View profile  
 More options Oct 9 2012, 1:35 pm
Newsgroups: comp.lang.javascript
From: joe <m...@invalid.com>
Date: Tue, 09 Oct 2012 20:35:19 +0300
Local: Tues, Oct 9 2012 1:35 pm
Subject: Trouble with settimeout()
Print | Individual message | Show original | Report this message | Find messages by this author
Here's full working example of a vertical menu with sublevels. Whar I am trying
to achive is a time.out from the menu. ie when mouse-cursor leaves the menu item
it should not immediately disappear - it shout stay a 1000 msecs before
disappearing. My efforts with setTimeout are unsuccessfull.

In the code there is

ul_level[i].parentNode.onmouseout=function()
{this.getElementsByTagName("ul")[0].style.display="none";}

which I trying to delay a little. Unfortunately

ul_level[i].parentNode.onmouseout=function() {  
     timou=setTimeout(function() {
this.getElementsByTagName("ul")[0].style.display="none";},1000);   }

does not work. The menu just stays and does not go away after 100 msecs.

///----------- Full working example:

<html><head>
<style type="text/css">
a {text-decoration:underline;}
.mymenu ul {
margin: 0; padding: 0;
list-style-type: none;
width: 100px;  
border-bottom: 1px solid #ccc;

}

.mymenu ul li {
position: relative;
}

.mymenu ul li a{
display: block;
overflow: auto;
padding: 7px;
color: white;
text-decoration: none;
border-bottom: 1px solid #778; border-right: 1px solid #778;
}

.mymenu ul li a:link, .mymenu ul li a:visited, .mymenu ul li a:active {
background-color: red;
}

.mymenu ul li a:hover {
background-color: black;
}

.mymenu ul li ul {
position: absolute;
width : 150px;
top: 0;
visibility: hidden;
}

* html .mymenu ul li { float: left; height: 1%; }
* html .mymenu ul li a { height: 1%; }
</style>

<script type="text/javascript">
function menustart() {
var ul_level=document.getElementById("mymenu1").getElementsByTagName("ul");
for (var i=0; i<ul_level.length; i++) {
    if (ul_level[i].parentNode.parentNode.id=="mymenu1")
ul_level[i].style.left=ul_level[i].parentNode.offsetWidth+"px" ;
    else
ul_level[i].style.left=ul_level[i-1].getElementsByTagName("a")[0].offsetWid th+"px"
;
   ul_level[i].parentNode.onmouseover=function()
{this.getElementsByTagName("ul")[0].style.display="block";}
   ul_level[i].parentNode.onmouseout=function()
{this.getElementsByTagName("ul")[0].style.display="none";}
   //ul_level[i].parentNode.onmouseout=function() {   // does not work
   //     timou=setTimeout(function()
{this.getElementsByTagName("ul")[0].style.display="none";},1000);
   //     }
   }
for (var i=ul_level.length-1; i>-1; i--)    {
   ul_level[i].style.visibility="visible";
   ul_level[i].style.display="none";   }

}

if (window.addEventListener)
   window.addEventListener("load", menustart, false);
else if (window.attachEvent)
   window.attachEvent("onload", menustart);
</script>

</head> <body>
<div class="mymenu" style="position: absolute;left: 10pt; top: 20px;border: solid
1px;">
<ul id="mymenu1">
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a>
  <ul>
  <li><a href="#">Sub sub item 1</a></li>
  <li><a href="#">Sub sub item 2</a></li>
  </ul>
</li>  
<li><a href="#">Menu item 3</a>
  <ul>
  <li><a href="#">Sub item 1</a>
     <ul>
     <li><a href="#">Sub sub item 1</a></li>
     </ul>
  </li>  
  <li><a href="#" id="runko">Sub item 2</a></li>
  </ul>
</li>
</ul>
</div>
</body></html>


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
Stefan Weiss  
View profile  
 More options Oct 9 2012, 2:42 pm
Newsgroups: comp.lang.javascript
From: Stefan Weiss <krewech...@gmail.com>
Date: Tue, 09 Oct 2012 20:42:49 +0200
Local: Tues, Oct 9 2012 2:42 pm
Subject: Re: Trouble with settimeout()
Print | Individual message | Show original | Report this message | Find messages by this author
On 2012-10-09 19:35, joe wrote:

> Here's full working example of a vertical menu with sublevels. Whar I am trying
> to achive is a time.out from the menu. ie when mouse-cursor leaves the menu item
> it should not immediately disappear - it shout stay a 1000 msecs before
> disappearing. My efforts with setTimeout are unsuccessfull.

> In the code there is

> ul_level[i].parentNode.onmouseout=function()
> {this.getElementsByTagName("ul")[0].style.display="none";}

When you post code on Usenet, please keep your lines short enough to
prevent unintentional wrapping.

> which I trying to delay a little. Unfortunately

> ul_level[i].parentNode.onmouseout=function() {  
>      timou=setTimeout(function() {
> this.getElementsByTagName("ul")[0].style.display="none";},1000);   }

> does not work. The menu just stays and does not go away after 100 msecs.

You might have mentioned that you also get an error message at this
point: "TypeError: Object [object Window] has no method
'getElementsByTagName'".

If you didn't get an error message, search the web for how to enable JS
debugging in your browser. There should also be something in the FAQ
about debuggers.

When the timeout fires and your inner function is executed, "this"
refers to the global object. You wanted it to refer to one of your menu
elements, but that reference is gone now. You have to store the "this"
value somewhere, so that the element reference is still available when
the function is called:

ul_level[i].parentNode.onmouseout = function() {
    var that = this;
    setTimeout(function() {
        that.getElementsByTagName("ul")[0].style ...
    }, 1000);

}

From what I've seen, you also need to add some code to clear the
timeouts when the user moves between menu items.

- stefan


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
joe  
View profile  
 More options Oct 10 2012, 3:42 am
Newsgroups: comp.lang.javascript
From: joe <m...@invalid.com>
Date: Wed, 10 Oct 2012 10:42:28 +0300
Local: Wed, Oct 10 2012 3:42 am
Subject: Re: Trouble with settimeout()
Print | Individual message | Show original | Report this message | Find messages by this author
Can you elaborate further. No matter what I try teh best result I get is all sub
menus disappearing after the timeout is executed.


 
You must Sign in before you can post messages.
To post a message you must first join this group.
Please update your nickname on the subscription settings page before posting.
You do not have the permission required to post.
End of messages
« Back to Discussions « Newer topic     Older topic »

Create a group - Google Groups - Google Home - Terms of Service - Privacy Policy
©2013 Google