Dropdown box time out needed

[TJJ]

How can I get the dropdown menus to disappear after the cursor is removed?

http://www.optioncaddie.com/Home.htm

I assume there is some sort of 'timer' code I could put in?

[toicontien]

Without seeing any code, I'm just going kind of blind. I take it you're looking for something like this:
http://pages.tm.net/gburghardt/home/

You'll have to visit that page with a 5.0 version browser or newer, but I accomplished the affect by altering the visibility property of DIVs with JavaScript.

function showMenu(subMenu, menuItem) {
	if (document.getElementById) {
		document.getElementById(menuItem).style.backgroundColor = "#333399";
		document.getElementById(subMenu).style.visibility = "visible";
	}
	
	else if (document.all) {
		document.all(menuItem).style.backgroundColor = "#333399";
		document.all(subMenu).style.visibility = "visible";
	}
	
	else {}
}

function hideMenu(subMenu, menuItem) {
	if (document.getElementById) {
		document.getElementById(menuItem).style.backgroundColor = "#6666CC";
		document.getElementById(subMenu).style.visibility = "hidden";
	}
	
	else if (document.all) {
		document.all(menuItem).style.backgroundColor = "#6666CC";
		document.all(subMenu).style.visibility = "hidden";
	}
	
	else {}
}

function keepLayer(menu, subMenu, menuItem, address) {
	if (document.getElementById) {
		document.getElementById(subMenu).style.visibility = "visible";
		document.getElementById(menuItem).style.backgroundColor = "#990000";
		document.getElementById(menu).style.backgroundColor = "#333399";
	}
	
	else if (document.all) {
		document.all(subMenu).style.visibility = "visible";
		document.all(menuItem).style.backgroundColor = "#990000";
		document.all(menu).style.backgroundColor = "#333399";
	}
	
	else {}
}

function hideLayer(menu, subMenu, menuItem) {
	if (document.getElementById) {
		document.getElementById(subMenu).style.visibility = "hidden";
		document.getElementById(menuItem).style.backgroundColor = "#660000";
		document.getElementById(menu).style.backgroundColor = "#6666CC"
	}
	
	else if (document.all) {
		document.all(subMenu).style.visibility = "hidden";
		document.all(menuItem).style.backgroundColor = "#660000";
		document.all(menu).style.backgroundColor = "#6666CC"
	}
	
	else {}
}

function goUrl(address, item) {
	if (document.getElementById) {
		document.getElementById(item).style.backgroundColor = "#CC0000";
	}
	
	else if (document.all) {
		document.all(item).style.backgroundColor = "#CC0000";
	}
	else {}
	
	window.location = address;
}

That's the script that I use. I didn't put in a time out, but on www.w3schools.com in their javascript tutorials, they have a reference to a setTimeout() function. I can't find it right off hand, but check it out. I played around with the function but couldn't get it to work if I had to reference more than 1 ID in the script.

[toicontien]

I've done a little more playing around with the setTimeout function.

IN JAVASCRIPT

var callFunction = "hideMenuHelper()";

function hideMenu() {
  setTimeout(callFunction, 500);
}

function hideMenuHelper {
  document.getElementById("elementID").style.visibility = "hidden";
}

The setTimeout() function only executes script if it's saved as text inside quotes or stored in a variable. The number is for how many miliseconds will elapse before it executes the text script in the callFunciton variable.

You also might find more help by posting this same thing in the JavaScript forum. This is right up their alley.

[TJJ]

Is this code put on the cascademenu.css page or another page? Where do I insert it after the 'Body'?

[TJJ]

OK, Here is the code. Where do I place the CallFunction code?



function InitMenu()
{
var bar = menuBar.children

for(var i=0;i < bar.length;i++)
{
var menu=eval(bar[i].menu)
menu.style.visibility = "hidden"
bar[i].onmouseover = new Function("ShowMenu("+bar[i].id+")")
var Items = menu.children
for(var j=0; j<Items.length; j++)
{
var menuItem = eval(Items[j].id)

if(menuItem.menu != null)
{
menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
//var tmp = eval(menuItem.id+"_Arrow")
// tmp.style.pixelLeft = menu.getBoundingClientRect().Right //- tmp.offsetWidth - 15
FindSubMenu(menuItem.menu)}

if(menuItem.cmd != null)
{
menuItem.onclick = new Function("Do("+menuItem.id+")") }

menuItem.onmouseover = new Function("highlight("+Items[j].id+")")

}

}
}
function FindSubMenu(subMenu)
{
var menu=eval(subMenu)
var Items = menu.children
for(var j=0; j<Items.length; j++)
{
menu.style.visibility = "hidden"
var menuItem = eval(Items[j].id)


if(menuItem.menu!= null)
{
menuItem.innerHTML += "<Span Id="+menuItem.id+"_Arrow class='Arrow'>4</Span>"
// var tmp = eval(menuItem.id+"_Arrow")
//tmp.style.pixelLeft = 35 //menuItem.getBoundingClientRect().right - tmp.offsetWidth - 15
FindSubMenu(menuItem.menu)
}

if(menuItem.cmd != null)
{
menuItem.onclick = new Function("Do("+menuItem.id+")") }

menuItem.onmouseover = new Function("highlight("+Items[j].id+")")

}
}
function ShowMenu(obj)
{
HideMenu(menuBar)
var menu = eval(obj.menu)
var bar = eval(obj.id)
bar.className="barOver"
menu.style.visibility = "visible"
menu.style.pixelTop = obj.getBoundingClientRect().top + obj.offsetHeight + Bdy.scrollTop
menu.style.pixelLeft = obj.getBoundingClientRect().left + Bdy.scrollLeft
}

function highlight(obj)
{
var PElement = eval(obj.parentElement.id)
if(PElement.hasChildNodes() == true)
{ var Elements = PElement.children
for(var i=0;i<Elements.length;i++)
{
TE = eval(Elements[i].id)
TE.className = "menuItem"
}
}
obj.className="ItemMouseOver"
window.defaultStatus = obj.title
ShowSubMenu(obj)
}

function Do(obj)
{
var cmd = eval(obj).cmd
window.navigate(cmd)

}

function HideMenu(obj)
{
if(obj.hasChildNodes()==true)
{
var child = obj.children

for(var j =0;j<child.length;j++)
{
if (child[j].className=="barOver")
{var bar = eval(child[j].id)
bar.className="Bar"}

if(child[j].menu != null)
{
var childMenu = eval(child[j].menu)
if(childMenu.hasChildNodes()==true)
HideMenu(childMenu)

childMenu.style.visibility = "hidden"
}
}

}
}
function ShowSubMenu(obj)
{
PMenu = eval(obj.parentElement.id)
HideMenu(PMenu)
if(obj.menu != null)
{
var menu = eval(obj.menu)
menu.style.visibility = "visible"
menu.style.pixelTop = obj.getBoundingClientRect().top + Bdy.scrollTop
menu.style.pixelLeft = obj.getBoundingClientRect().right + Bdy.scrollLeft
if(menu.getBoundingClientRect().right > window.screen.availWidth )
menu.style.pixelLeft = obj.getBoundingClientRect().left - menu.offsetWidth
}
}

[toicontien]

The callFunction variable should be declared globally in your script.

When the onmouseout() event is captured, either by way of a DIV or <A> tag, you would call hideMenu(), which would then call hideMenuHelper() after 500 miliseconds. You can add arguments to the hide menu functions if you like so you can pass the ID of an object. I've done yet MORE playing around and came up with the code below. It's not fully functional yet, I can't seem to keep the menu visible after I mouse over the part that pops up.

See the attached txt file for the html and css I'm using.

[TJJ]

I appreciate you looking at it but I am a novice programmer and what you said is greek to me, that is why I posted the code. What new code specifically, do I put where specifically?

[toicontien]

I'm not 100% sure where to put the new code. With the setTimeout() function, there's another consideration - you may move the mouse off one menu and on to one of its submenus. The script will wait 500 milliseconds before making the menu disappear. What I've found is that the whole menu will disappear, or part of it, after you roll your mouse deeper into the menu.

That's kind of why I put a link to my code 'cause I'm no JavaScript wizard either

I'm still working on the menu and won't have much of an answer for you until I figure a few things out first.

Honestly your best bet is to post this in the DHTML forum. I'm still in the playing-around stage with Dynamic HTML, which is what we are dealing with.

I take it you got that script from DynamicDrive.com?

In any event, the script that I'll try to get working won't look much like the one you've got right now.