In my Application The menu bar is automatically drop down when i move the mouse point to menu title, but i want only when i click the menu title then only its drop down.Is there any option in using Java script let me know...
ganesh641 0 Newbie Poster
var menu=function(){
var t=15,z=50,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){
a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){
var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover = new Function(this.n + '.st(' + i + ',true)');
h.onmouseout = new Function(this.n + '.st(' + i + ')');
}
}
dd.prototype.st=function(x,f){
var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){
p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible'}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
}
function sl(c,f){
var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return
}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height=h+(d*f)+'px'
}
return{dd:dd}
}();The attachment preview is chopped off after the first 10 KB. Please download the entire file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>User Page</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Events - Enriched Academy</title>
<meta name="description" content="">
<meta name="author" content="604Media">
<meta name="viewport" content="width=960,initial-scale=1">
<link rel="stylesheet" href="css/admin-style.css">
<script src="js/libs/modernizr-2.0.6.min.js"></script>
<script type="text/javascript" src="tab/tabber.js"></script>
<link rel="stylesheet" href="tab/example.css" TYPE="text/css" MEDIA="screen">
<link rel="stylesheet" href="example-print.css" TYPE="text/css" MEDIA="print">
<script type="text/javascript">
/* Optional: Temporarily hide the "tabber" class so it does not "flash"
on the page as plain HTML. After tabber runs, the class is changed
to "tabberlive" and it will appear. */
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
</script>
<script language="javascript">
function openpopup(id){
//Calculate Page width and height
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
if (document.compatMode == "CSS1Compat"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
//Make the background div tag visible...
var divbg = document.getElementById('bg');
divbg.style.visibility = "visible";
var divobj = document.getElementById(id);
divobj.style.visibility = "visible";
if (navigator.appName=="Microsoft Internet Explorer")
computedStyle = divobj.currentStyle;
else computedStyle = document.defaultView.getComputedStyle(divobj, null);
//Get Div width and height from StyleSheet
var divWidth = computedStyle.width.replace('px', '');
var divHeight = computedStyle.height.replace('px', '');
var divLeft = (pageWidth - divWidth) / 2;
var divTop = (pageHeight - divHeight) / 2;
//Set Left and top coordinates for the div tag
divobj.style.left = divLeft + "px";
divobj.style.top = divTop + "px";
//Put a Close button for closing the popped up Div tag
if(divobj.innerHTML.indexOf("closepopup('" + id +"')") < 0 )
divobj.innerHTML = "<a href=\"#\" onclick=\"closepopup('" + id +"')\"><span class=\"close_button\"></span></a>" + divobj.innerHTML;
}
function closepopup(id){
var divbg = document.getElementById('bg');
divbg.style.visibility = "hidden";
var divobj = document.getElementById(id);
divobj.style.visibility = "hidden";
}
</script>
</head>
<body class="userpage">
<div class="userpage-wrap">
<div class="content">
<div class="userpage-header">
<div class="logo"><a href="#"><img src="images/logo.png" alt="logo" /></a></div>
<h1 class="slogan">SUPPLIER RATING SYSTEM</h1>
<div class="user-top-setting">
<div class="user-lft"></div>
<div class="user-mid">
<ul>
<li>Welcome <span>Guest!</span></li>
<li class="last-child"><a href="#">settings</a></li>
</ul>
</div>
<div class="user-rgt"></div><div class="clear"></div>
<p class="time">10:45 am 23 Fri, Dec 2011</p>
</div>
</div>
<div class="userpage-main-content">
<div class="nav-menu">
<div class="nav-lft"></div>
<div class="nav-mid">
<ul class="menu" id="menu">
<li class="active" id="supp-mangt"><a href="#">Supplier Management</a><span> <img src="images/menu-line.png"></span>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li><a href="#">Question Management</a><span> <img src="images/menu-line.png"></span></li>
<li><a href="#">Rating Management</a><span> <img src="images/menu-line.png"></span></li>
<li><a href="#">Action Items</a><span> <img src="images/menu-line.png"></span></li>
<li><a href="#">Reports</a><span> <img src="images/menu-line.png"></span></li>
<li><a href="#">Admin</a></li>
</ul>
</div>
<div class="nav-rgt"></div>
</div>
<div class="section">
<h1>List User</h1>
<span class="new-question"><a href="#">Add New Users</a></span>
<div class="user-filter">
<h4>Filter</h4>
<ul>
<li>
<label>User Group:</label>
<select id="select1" onchange="selopt1();">
<option selected="" value="">Stakeholder</option>
<option value="Jan">Stakeholder</option>
<option value="Feb">SBMT</option>
<option value="March">SBMT</option>
</select>
</li>
<li> <label>Name:</label>
<input type="text" name="name">
</li>
<li> <label>Manager Name:</label>
<input type="text" name="name">
</li>
<li> <label>Location:</label>
<select id="select1" onchange="selopt1();">
<option selected="" value="">Netherland</option>
<option value="Jan">chennai</option>
<option value="Feb">singapore</option>
<option value="March">Netherland</option>
</select>
</li>
<li>
<label>Department:</label>
<select id="select1" onchange="selopt1();">
<option selected="" value="">Stakeholder</option>
<option value="Jan">Stakeholder</option>
<option value="Feb">SBMT</option>
<option value="March">SBMT</option>
</select>
</li>
<li> <label>Status:</label>
<select id="select1" onchange="selopt1();">
<option selected="" value="">Active</option>
<option value="Jan">In Active</option>
<option value="Feb">Active</option>
<option value="March">In Active</option>
</select>
</li>
<li style="float:left; width:500px; padding:6px 12px; background:url(images/returned-user-bg.png) no-repeat 0 0; margin:10px 0 0 10px; color:#099f02;">134 User(s) Returned</li>
<li style="float:right; width:140px; "><input type="button" value="Submit" name="submit" class="search"> </li>
</ul>
</div>
<div style="float:left; width:100%; margin-top:10px;">
<table cellpadding="5" cellspacing="0" border="0" width="100%">
<thead>
<tr>
<th align="left">Edit</th>
<th align="center">User Name</th>
<th align="center">Name</th>
<th align="center">Location</th>
<th align="center">Department</th>
<th align="center">Manager</th>
<th align="center">User Group</th>
<th align="center">Status</th>
</tr>
</thead>
<tr class="odd">
<td class="title" align="left"><a href="#" onclick="openpopup('popup1')"><img src="images/user-edit.png" /></a>
<div id="popup1" class="popup" style=" width:435px; height:470px; ">
<div class="dashboard-submitarea">
<h4>Edit User</h4>
<ul>
<li> <label>E-mail ID:</label>
<input type="text" name="name">
</li>
<li> <label>Name:</label>
<input type="text" name="name">
</li>
<li> <label>Location:</label>
<select id="select1" onchange="selopt1();">
<option selected="" value="">Netherland</option>
<option value="Jan">chennai</option>
<option value="Feb">singapore</option>
<option value="March">Netherland</option>
</select>
stultuske 1,129 Posting Maven Featured Poster
it would mean changing your script.
if you go through your file, you can see that these events (hiding and showing) are triggered by onmouseover and onmouseout, that's causing the menu to show/hide when you move your mouse over it.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.