Links

Lists

Latest Updates

Ruby On Rails List
Python list
Advanced Java
The JavaScript List
Apache Users
Full Disclosure
Linux Security

Search the archives!
Having a development problem? Ask eDevelopment.org forums!

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[Javascript] How to have the popup menu stay on?

  • From: rdong at advance.net (Roland Dong)
  • Subject: [Javascript] How to have the popup menu stay on?
  • Date: Tue Jun 28 13:55:21 2005
This is my first javascript project.... I am working the dhtml top down
menu.  I have this problem: I can not have the popup menu listing stay on
when it pops up. I set the timer so that mouse has enough time to move from
menu title to the menu listing area, but it can only stay on for the time
span I set it up.  What I want is when user mouseovers on a menu
title("tutorial", for example) the menu listing pops up and stays on when
user moves mouse over on it until the user moves mouse away from it. 

Please throw some light on it.
 

The following is the code:

=========================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html>

<head>
<title>Dropdowns</title>

<style type="text/css">


table.navBar
{
border-top: 1px; 
solid #FFF;
font-size:100%;
position:absolute;
visibility:hidden;
}

#navigation { position: static; top: 0; left: 0; width:763px}

//#dataPos { position: relative; top: 100px; left: 100px;}
//#dataPos {position: relative; float: left; }
#dataPosRight {position: relative; left: 360px; }
#dataPosLeft  {position: relative; left: 0px; }

	.navbar td      { border-right: 1px solid #FFF; padding: 4px 9px;
background-color: #001B6A; color: #FFF; font-family: Arial,sans-serif;
font-size: 11px; font-weight: bold; text-align: center }
	#nbclass        { border: 1px solid #000; padding: 2px 0px;
background-color: #5A84FF; font-size: 14px }
	#nbrule { border-top: 1px solid #FFF; padding: 0px;
background-color: #000 }
	#nbsel  { background-color: #5F87FF }

	div.child		{ width: 403px; border-width: 0px 1px 1px
0px; border-style: solid; border-color: #ADADAD }
	.child table	{ border: 1px solid #000; border-top: 0px;
background-color: #FFF }
	.child td	{ padding: 0px 1px 1px 0px; background-color:
#ADB5AD; font-size: 11px; font-family: Arial,sans-serif }
	.child td div		{ margin: 0px }
	td .col		{ border: 1px solid #00186B }
	.cat, .itm	{ border-bottom: 1px solid #ADADAD; padding: 2px
3px; background-color: #FFF }
	.cat		{ font-weight: bold }
	.cat img	{ margin-right: 5px }
	.cat .new	{ color: #FF0000 }
	.itm a, .cat a	{ text-decoration: none }
	.itm a, .itm a:hover, .itm a:visited, .itm a:active	{ color:
#42425D }
	.cat a, .cat a:hover, .cat a:visited, .cat a:active	{ color:
#383843 }
	.csel		{ background-color: #D3D4ED }
</style>

<script type="text/javascript">
startList = function() {

var catNames = Array('tutorials', 'scripting', 'validation');
navBar = document.getElementById("nav").rows[0].cells;

document.Timer=0;

navBar[0].onmouseover=function() {
	   clearTimeout(document.menuTimer);
	   document.getElementById("tutorials").style.visibility="visible";
		   
}

navBar[0].onmouseout=function() {
	
setTimeout('document.getElementById("tutorials").style.visibility="hidden"',
500);	   
}


navBar[1].onmouseover=function() {
		   clearTimeout(document.menuTimer);
	
document.getElementById("scripting").style.visibility="visible";
		   
}

navBar[1].onmouseout=function() {
	
setTimeout('document.getElementById("scripting").style.visibility="hidden"',
500);
	   
}

}
window.onload=startList;
</script>

</head>

<body>


<div id="navigation">
<table id="nav" width="763" cellpadding="0" cellspacing="0" border="0"
class="navbar">
	<tr>
		<td nowrap id="nbsel">Tutorial</td>
		<td nowrap>Scripting</td>
		<td nowrap>C</td>
		<td nowrap>D</td>
		<td nowrap>D</td>
		<td nowrap>H</td>
		<td nowrap>I</td>
		<td nowrap>J</td>
		<td width="194" rowspan="2"
id="nbclass"><div>Anyting</div></td>
	</tr>
	<tr>
		<td colspan="8" id="nbrule"><img src="images/spacer.gif"
height="1" width="1"></td>
	</tr>
</table>

<div id="dataPosLeft">
<table class="navBar" width="763" cellpadding="0" cellspacing="0"
border="1">
<tr>
<td>
<table id="tutorials" width="403" cellpadding="0" cellspacing="4" border="">
   <tr><td class="menu"><a href="/html/default.asp">T_HTML</a></td><td>row
1, cell 2</td><td>row 1, cell 2</td></tr>
   <tr><td class="menu"><a href="/xhtml/default.asp">T_XHTML</a></td><td>row
1, cell 2</td><td>row 1, cell 2</td></tr>
   <tr><td class="menu"><a href="/css/default.asp">T_CSS</a></td><td>row 1,
cell 2</td><td>row 1, cell 2</td></tr>
   <tr><td class="menu"><a href="/xml/default.asp">T_XML</a></td><td>row 1,
cell 2</td><td>row 1, cell 2</td></tr>
   <tr><td class="menu"><a href="/xsl/default.asp">T_XSL</a></td><td>row 1,
cell 2</td><td>row 1, cell 2</td></tr>
 </table>
 </td>
 </tr>
 </table>
</div>

<div id="dataPosRight">
<table class="navBar" width="763" cellpadding="0" cellspacing="0"
border="1">
<tr>
<td>
<table id="scripting" width="403" cellpadding="0" cellspacing="4"
border="1">
   <tr><td class="menu"><a href="/html/default.asp">HTML</a></td><td>row 1,
cell 2</td><td>row 1, cell 2</td></tr>
   <tr><td class="menu"><a href="/xhtml/default.asp">XHTML</a></td><td>row
1, cell 2</td><td>row 1, cell 2</td></tr>
   <tr><td class="menu"><a href="/css/default.asp">CSS</a></td><td>row 1,
cell 2</td><td>row 1, cell 2</td></tr>
   <tr><td class="menu"><a href="/xml/default.asp">XML</a></td><td>row 1,
cell 2</td><td>row 1, cell 2</td></tr>
   <tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td><td>row 1,
cell 2</td><td>row 1, cell 2</td></tr>
 </table>
 </td>
 </tr>
 </table>
</div>


</div>

<br />
<br />
<div id="content">
	<p>text text text text text text text text  text text  text text
text text  text text  </p>
</div>
</body>

</html>

==========================================