codetoad.com
  ASP Shopping CartForum & BBS
  - all for $20 from CodeToad Plus!
  
  Home || ASP | ASP.Net | C++/C# | DHTML | HTML | Java | Javascript | Perl | VB | XML || CodeToad Plus! || Forums || RAM 
Search Site:
Search Forums:
  Drop-Down Menu problems !  mezza247 at 19:03 on Tuesday, May 15, 2007
 

Having trouble with a drop-down menu. Everything is fine when the mouse is hovering over the menu - the drop-down menu appears but when the cursor moves away from the drop-down menu the menu stays and the user would need to click somewhere else on the page for the menu to disappear when I am trying on mouse out for the drop-down menu to disappear automatically. Here is the code I am using :





<script language="JavaScript" type="text/javascript">
var objNavMenu = null;
var prevObjNavMenu = null;
var prevObjDropMenu = null;
var numDropMenu = 6;
////// link styles
var bgLinkColor = '#cccccc';
var bgLinkHover = '#ffffff'
var bgLinkActive = '#000000'
var linkColor = '#000000'
var linkHover = '#000000'
var linkActive = '#ffffff'

var isIE = null;
if (navigator.appName.indexOf('Microsoft Internet Explorer') != -1) isIE=1;

function initDropMenu () {
document.onclick = hideDropMenu;
for (i=1; i<=numDropMenu; i++) {
menuName = 'dropMenu' + i;
navName = 'navMenu' + i;
objDropMenu = document.getElementById(menuName);
objNavMenu = document.getElementById(navName);
objDropMenu.style.visibility = 'hidden';
objNavMenu.onmouseover = menuHover;
objNavMenu.onmouseout = menuOut;
objNavMenu.onmouseover = showDropMenu;
}
objNavMenu = null;
return;
}

function menuHover(e) {
document.onclick = null;
hoverObjNavMenu = document.getElementById(this.id);
if (hoverObjNavMenu != objNavMenu) {
hoverObjNavMenu.style.color = linkHover;
hoverObjNavMenu.style.backgroundColor = bgLinkHover;
}
}

function menuOut (e) {
document.onclick = hideDropMenu;
outObjNavMenu = document.getElementById(this.id);
if (outObjNavMenu != objNavMenu) {
outObjNavMenu.style.color = linkColor;
outObjNavMenu.style.backgroundColor = bgLinkColor;
}
}

function showDropMenu(e) {
menuName = 'drop' + this.id.substring(3,this.id.length);
objDropMenu = document.getElementById(menuName);
if (prevObjDropMenu == objDropMenu) {
hideDropMenu();
return;
}
if (prevObjDropMenu != null) hideDropMenu();
objNavMenu = document.getElementById(this.id);
if ((prevObjNavMenu != objNavMenu ) || (prevObjDropMenu == null)) {
objNavMenu.style.color = linkActive;
objNavMenu.style.backgroundColor = bgLinkActive;
}

if (objDropMenu) {
xPos = objNavMenu.offsetParent.offsetLeft + objNavMenu.offsetLeft;
yPos = objNavMenu.offsetParent.offsetTop + objNavMenu.offsetParent.offsetHeight;
if (isIE) {
yPos -= 1;
xPos -= 6;
}
objDropMenu.style.left = xPos + 'px';
objDropMenu.style.top = yPos + 'px';
objDropMenu.style.visibility = 'visible';
prevObjDropMenu = objDropMenu;
prevObjNavMenu = objNavMenu;
}

}

function hideDropMenu() {
document.onclick = null;
if (prevObjDropMenu) {
prevObjDropMenu.style.visibility = 'hidden';
prevObjDropMenu = null;
prevObjNavMenu.style.color = linkColor;
prevObjNavMenu.style.backgroundColor = bgLinkColor;
}
objNavMenu = null;
}

</script>

Thanks in advance for any ideas for the drop-down menu to disappear on mouse out !!








CodeToad Experts

Can't find the answer?
Our Site experts are answering questions for free in the CodeToad forums
//








Recent Forum Threads
•  Re: open excel file in html page
•  Re: interview problem
•  Re: help with jsp..urgent
•  how to create and install a toolbar to a browser using java
•  store string from text file to vector
•  Re: substitute of goto in java???
•  Re: internationalization for password validation
•  calculating total black pixels in an image
•  Re: SOAP Webservices by PERL


Recent Articles
ASP GetTempName
Decode and Encode UTF-8
ASP GetFile
ASP FolderExists
ASP FileExists
ASP OpenTextFile
ASP FilesystemObject
ASP CreateFolder
ASP CreateTextFile
Javascript Get Selected Text


© Copyright codetoad.com 2001-2007