...

View Full Version : help to include a delay



low tech
07-29-2010, 02:29 AM
Hi all.

The below script is from suckerfish.

Can anyone help me include a 'one sec delay' to keep the menu open onmouseout.

First menu often closes too fast before I get a chance to move onto submenu.

I've tried everything with setTimeout BUT I just can't get it right. Nothing I do works.

Can somebody PLEASE show me so I can kick myself.

LT


<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function(){
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

Philip M
07-29-2010, 07:44 AM
sfEls[i].onmouseout=setTimeout("myDelayFunction", 1000");

function myDelayFunction() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}


All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

low tech
07-29-2010, 07:53 AM
Thanks Philip M

Damm, I was so close BUT a million miles away.

Make a function,,, eerrrggghhhh

never gonna get this stuff hahahahhaa

Thanks again

LT

low tech
07-29-2010, 08:15 AM
Backtrack, I think I copy pasted wrongly

Philip M
07-29-2010, 08:19 AM
You have placed the function myDelayFunction() within the anonymous function. Move it to somewhere outside it.
Say before sfHover = function() {

You may need to make it

function myDelayFunction() {
return this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}

low tech
07-29-2010, 08:47 AM
Hi

It's not having it hhahahaa

I've moved the function everywhere -- with and wittout return ---- hahahaha

the culprit now is 'not implemented' (the setTimeout line)

If too much trouble to get this --- i'll leave it I guess.
Thanks for the feedback.


<script type="text/javascript"><!--//--><![CDATA[//><!--

function myDelayFunction() {
return this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=setTimeout("myDelayFunction", 1000);
}

}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

Old Pedant
07-30-2010, 01:35 AM
Philip made a minor goof.

*EITHER* add parentheses:


sfEls[i].onmouseout=setTimeout("myDelayFunction( )", 1000);

*OR* get rid of the quote marks:


sfEls[i].onmouseout=setTimeout(myDelayFunction, 1000);

But *not* with-quotes-without-parentheses.

low tech
07-30-2010, 02:07 AM
Thanks Old Pedant

I'm stil playing with this -- 3rd day hahahaha

anyway I tried both ways (here is one)



<script type="text/javascript"><!--//--><![CDATA[//><!--

function myDelayFunction() {
return this.className.replace(new RegExp(" sfhover\\b"), "");
}

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=setTimeout("myDelayFunction()", 1000);
}

}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>


BUT Webpage error details

Not implemented (onmouseout line)

Message: 'this.className' is null or not an object (myDelay function line)

Puzzled
LT

The FULL TEST page is below in case you would like to see.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
<title>Three Level Menu Drop</title>

<style type="text/css">
<!-- http://htmldog.com/articles/suckerfish/dropdowns/example/bones3.html // -->

body {
font-family: arial, helvetica, serif;
font-size: large;
}
a:link{ color: black;}
a:visited {color: purple;}
a:hover {
color:#FFFFFF;
background-color:#FF0000;
}
a:active {color: green;}

.menuHeading {
text-decoration: none;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
background-color: #999999;
}
#nav, #nav ul { /* all lists */
list-style: none;
line-height: 1em;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}

#nav a {
display: block;
width: 9em;
}

#nav li { /* needed for all list items */
float: left;
width: 10em;
margin: 0px;
padding: 0px;
}

#nav li ul { /* second-level lists */
position: absolute;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
border: thin solid #666666;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 20px;
}

#nav li ul ul { /* third-and-above-level lists */
margin-top: -22px;
margin-right: 0;
margin-bottom: 0;
margin-left: 162px;
}
#nav .moveLeft {
margin-left: -5em; /*Menu title spacing*/
margin-top: 0px;
padding-top: 0px;
}
#nav .moveLeft_2 {
margin-left: -4em; /*Menu title spacing*/
padding: 0px;
margin-top: 0px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested

under hovered list items */
left: auto;
}
.seperate {
color: #FF0000;
}
</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

function myDelayFunction() {
return this.className.replace(new RegExp(" sfhover\\b"), "");
}

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=setTimeout("myDelayFunction()", 3000);
}

}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>



</head>

<body>

<h1>Three Level Menu</h1>
<table width="100%" border="1" cellspacing="0" cellpadding="3" style="background-color:#999999">
<tr>
<td><ul id="nav">
<!-- =============================== MENU ONE============================================ // -->
<li><span class="menuHeading">BLOG&nbsp;&nbsp;</span><span class="seperate">|</span>
<ul>
<li><a href="#" title="Go to restaurant">Look 3 --></a>
<ul>
<li><a href="#" title="Go to Mama Cooking">Restaurant 1.1</a>
<ul>
<li><a href="#" title="Home Made Cooking">Mama

House</a></li>
<li><a href="#">All Fast Food</a></li>
</ul>
</li>
<li><a href="#">Heading 1.2</a>
<ul>
<li><a href="#">write text</a></li>
</ul>
</li>
<li><a href"#" >Heading 1.3</a>
<ul>
<li><a href="#">write text</a></li>
<li><a href="#">write text</a></li>
<li><a href="#">write text</a></li>
<li><a href="#">write text</a></li>
<li><a href="#">write text </a></li>
</ul>
</li>
<li><a href="#">Heading 1.4</a>
<ul>
<li><a href="#">write text</a></li>
</ul>
</li>
<li><a href"#">Heading 1.5</a>
<ul>
<li><a href="#">write text</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Second Road</a>
<ul>
<li><a href="#">Write Description</a></li>
<li><a href="#">Write Description</a></li>
<li><a href="#">Write Description</a></li>
</ul>
</li>
<li><a href="#">Third Road</a>
<ul>
<li><a href="#">Write Description</a></li>
<li><a href="#">Write Description</a></li>
<li><a href="#">Write Description</a></li>
</ul>
</li>
<li><a href="#">Fourth Road</a>
<ul>
<li><a href="#">Write Description</a></li>
<li><a href="#">Write Description</a></li>
<li><a href="#">Write Description</a></li>
<li><a href="#">Write Description</a></li>
<li><a href="#">Write Description</a></li>
<li><a href="#">Write Description</a></li>
</ul>
</li>
</ul>
</li>
<!-- ================================ MENU TWO========================================= // -->
<li class="moveLeft"><span class="menuHeading">CLASSES</span>
<ul>
<li><a href="#">M 2 T 1</a>
<ul>
<li><a href="#">M2.1</a></li>
<li><a href="#">M2.2</a></li>
</ul>
</li>
<li><a href="#">M 2 T 2</a>
<ul>
<li><a href="#">M2.2.1</a></li>
<li><a href="#">M2.2.2</a></li>
<li><a href="#">M2.2.3</a></li>
<li><a href="#">M2.2.4</a></li>
<li><a href="#">M2.2.5</a></li>
</ul>
</li>
<li><a href="#">M 2 T 3</a></li>
<li><a href="#">M 2 T 4</a></li>
<li><a href="#">M 2 T 5</a></li>
</ul>
</li>
<!-- ================================ MENU THREE========================================= // -->
<li class="moveLeft_2"><span class="menuHeading">VIDEOS</span>
<ul>
<li><a href="#">M 3 T 1</a>
<ul>
<li><a href="#">Write Description</a></li>
<li><a href="#">Write Description</a></li>
<li><a href="#">Write Description</a></li>
</ul>
</li>
<li><a href="#">M 3 T 2</a></li>
<li><a href="#">M 3 T 3</a></li>
<li><a href="#">M 3 T 4</a></li>
<li><a href="#">M 3 T 5</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>


</body>

</html>

Old Pedant
07-30-2010, 02:15 AM
Oh, yeah! Sorry!

Should be:


sfEls[i].onmouseout = function() { setTimeout(myDelayFunction, 1000); };

Just like the onmouseover: create a *function* to be assigned to the event!


*************

BUT WAIT!!!

You will *NOT* have access to this in the myDelayFunction code!!!

Old Pedant
07-30-2010, 02:18 AM
Which is what you said. If I'd just read it.

Yeah, this is a thorny problem.

low tech
07-30-2010, 02:52 AM
Hi
Yep tricky

Really not as simple as I had first hoped.

Still playing tho:-)

LT

low tech
07-30-2010, 08:55 AM
Ok

I give up!!


You will *NOT* have access to this in the myDelayFunction code!!!

I found that out ---- but there must be a way to get 'this' although I can't work it out:-(

LT



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum