www.webdeveloper.com
Results 1 to 8 of 8

Thread: Dropdown box time out needed

  1. #1
    Join Date
    Apr 2003
    Posts
    46

    Dropdown box time out needed

    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?

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    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.

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

  3. #3
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    I've done a little more playing around with the setTimeout function.

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

  4. #4
    Join Date
    Apr 2003
    Posts
    46
    Is this code put on the cascademenu.css page or another page? Where do I insert it after the 'Body'?

  5. #5
    Join Date
    Apr 2003
    Posts
    46
    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
    }
    }

  6. #6
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    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.
    Attached Files Attached Files

  7. #7
    Join Date
    Apr 2003
    Posts
    46
    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?

  8. #8
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,755
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles