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 12 of 12
  1. #1
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    852
    Thanks
    173
    Thanked 94 Times in 94 Posts

    help to include a delay

    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

    Code:
    <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>
    Last edited by low tech; 07-29-2010 at 03:02 AM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,010
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Code:
    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.

  • Users who have thanked Philip M for this post:

    low tech (07-29-2010)

  • #3
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    852
    Thanks
    173
    Thanked 94 Times in 94 Posts
    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
    Last edited by low tech; 07-29-2010 at 08:21 AM.

  • #4
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    852
    Thanks
    173
    Thanked 94 Times in 94 Posts
    Backtrack, I think I copy pasted wrongly
    Last edited by low tech; 07-29-2010 at 08:49 AM.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,010
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    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"), "");
    }
    Last edited by Philip M; 07-29-2010 at 08:24 AM.

  • #6
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    852
    Thanks
    173
    Thanked 94 Times in 94 Posts
    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.

    Code:
    <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>

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,506
    Thanks
    77
    Thanked 4,378 Times in 4,343 Posts
    Philip made a minor goof.

    *EITHER* add parentheses:
    Code:
    		sfEls[i].onmouseout=setTimeout("myDelayFunction( )", 1000);
    *OR* get rid of the quote marks:
    Code:
    		sfEls[i].onmouseout=setTimeout(myDelayFunction, 1000);
    But *not* with-quotes-without-parentheses.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    852
    Thanks
    173
    Thanked 94 Times in 94 Posts
    Thanks Old Pedant

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

    anyway I tried both ways (here is one)


    Code:
    <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.


    Code:
    <!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>
    Last edited by low tech; 07-30-2010 at 02:13 AM.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,506
    Thanks
    77
    Thanked 4,378 Times in 4,343 Posts
    Oh, yeah! Sorry!

    Should be:
    Code:
    	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!!!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,506
    Thanks
    77
    Thanked 4,378 Times in 4,343 Posts
    Which is what you said. If I'd just read it.

    Yeah, this is a thorny problem.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    low tech (07-30-2010)

  • #11
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    852
    Thanks
    173
    Thanked 94 Times in 94 Posts
    Hi
    Yep tricky

    Really not as simple as I had first hoped.

    Still playing tho:-)

    LT

  • #12
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    852
    Thanks
    173
    Thanked 94 Times in 94 Posts
    Ok

    I give up!!

    Code:
    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


  •  

    Posting Permissions

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