Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Hide submenus onmouseout

    I found on the javascriptkit.com tutorials their js code for submenus here: http://www.javascriptkit.com/script/...leveltab.shtml

    I've changed some things in the css but I'm afraid to change the js code. I would like my link to hide the submenu on the onmouseout. What is the code to do this and where would it go in my js page?

    Here is the js code that I've taken from the tutorial if that helps:
    Code:
    var mastertabvar=new Object()
    mastertabvar.baseopacity=0
    mastertabvar.browserdetect=""
    
    function showsubmenu(masterid, id){
    if (typeof highlighting!="undefined")
    clearInterval(highlighting)
    submenuobject=document.getElementById(id)
    mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
    hidesubmenus(mastertabvar[masterid])
    submenuobject.style.display="block"
    instantset(mastertabvar.baseopacity)
    highlighting=setInterval("gradualfade(submenuobject)",50)
    }
    
    function hidesubmenus(submenuarray){
    for (var i=0; i<submenuarray.length; i++)
    document.getElementById(submenuarray[i]).style.display="none"
    }
    
    function instantset(degree){
    if (mastertabvar.browserdetect=="mozilla")
    submenuobject.style.MozOpacity=degree/100
    else if (mastertabvar.browserdetect=="ie")
    submenuobject.filters.alpha.opacity=degree
    }
    
    
    function gradualfade(cur2){
    if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
    cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
    else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
    cur2.filters.alpha.opacity+=10
    else if (typeof highlighting!="undefined") //fading animation over
    clearInterval(highlighting)
    }
    
    function initalizetab(tabid){
    mastertabvar[tabid]=new Array()
    var menuitems=document.getElementById(tabid).getElementsByTagName("li")
    for (var i=0; i<menuitems.length; i++){
    if (menuitems[i].getAttribute("rel")){
    menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
    mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
    if (menuitems[i].className=="selected")
    showsubmenu(tabid, menuitems[i].getAttribute("rel"))
    menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){
    showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
    }
    }
    }
    }
    Thank you so much for your help.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Somewhat of a guess:
    Code:
    function initalizetab(tabid)
    {
        mastertabvar[tabid]=new Array();
        var menuitems=document.getElementById(tabid).getElementsByTagName("li");
        for (var i=0; i<menuitems.length; i++)
        {
            if (menuitems[i].getAttribute("rel"))
            {
                menuitems[i].setAttribute("rev", tabid);
                mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel");
                if (menuitems[i].className=="selected")
                {
                    showsubmenu(tabid, menuitems[i].getAttribute("rel"))
                }
                var link = menuitems[i].getElementsByTagName("a")[0];
                link.onmouseover =
                    function(){
                          showsubmenu(this.parentNode.getAttribute("rev"),
                                      this.parentNode.getAttribute("rel"));
                    }
                link.onmouseout = 
                    function(){
                          hidesubmenus(mastertabvar[this.parentNode.getAttribute("rev")]);
                    }
            }
        }
    }
    TOTALLY UNTESTED! Just trying to read that really ugly code and understand it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Edit: It works, but it goes by so fast when you mouseout that you can't move onto the links.

    Thank you! Sorry to be such a pain.
    Last edited by mnsalz91; 11-19-2010 at 12:31 AM. Reason: Correcting post

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Ahhhh...that must be why they didn't do it like this in the first place!!

    Well, we can try. Not sure.

    First, add in the lines in RED that I show in red here:
    Code:
    var mastertabvar=new Object()
    mastertabvar.baseopacity=0
    mastertabvar.browserdetect=""
    
    var submenuwait = null;
    
    function showsubmenu(masterid, id)
    {
        if (typeof highlighting!="undefined") clearInterval(highlighting);
        submenuobject=document.getElementById(id);
        submenuobject.onmouseover = 
            function() { 
                   if ( submenuwait != null ) clearTimeout(submenuwait); 
                   submenuwait = null;
               };
        mastertabvar.browserdetect = 
            submenuobject.filters
            ? "ie" 
            : typeof submenuobject.style.MozOpacity=="string" ? "mozilla" : "";
        hidesubmenus(mastertabvar[masterid]);
        submenuobject.style.display="block";
        instantset(mastertabvar.baseopacity);
        highlighting=setInterval("gradualfade(submenuobject)",50)
    }
    ...
    function initalizetab(tabid)
    {
        mastertabvar[tabid]=new Array();
        var menuitems=document.getElementById(tabid).getElementsByTagName("li");
        for (var i=0; i<menuitems.length; i++)
        {
            if (menuitems[i].getAttribute("rel"))
            {
                menuitems[i].setAttribute("rev", tabid);
                mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel");
                if (menuitems[i].className=="selected")
                {
                    showsubmenu(tabid, menuitems[i].getAttribute("rel"))
                }
                var link = menuitems[i].getElementsByTagName("a")[0];
                link.onmouseover =
                    function(){
                          showsubmenu(this.parentNode.getAttribute("rev"),
                                      this.parentNode.getAttribute("rel"));
                    }
                link.onmouseout = 
                    function(){
                          var temp = mastertabvar[this.parentNode.getAttribute("rev")];
                          submenuwait = setTimeout('hidesubmenus("' + temp + '")', 500 );
                    }
            }
        }
    }
    But now you are really groping in the dark along with me.

    You can change the 500 there (half a second) to suit yourself.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    mnsalz91 (11-20-2010)

  • #5
    New to the CF scene
    Join Date
    Jun 2011
    Location
    orlando,fl
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Do you have a code that works for the hidden sub

    Ive tried this code and the last part in the Red does not work for me.

  • #6
    New to the CF scene
    Join Date
    Jun 2011
    Location
    orlando,fl
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    to this one right here

  • #7
    New to the CF scene
    Join Date
    Jun 2011
    Location
    orlando,fl
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    To this one right here

    Quote Originally Posted by Old Pedant View Post
    Ahhhh...that must be why they didn't do it like this in the first place!!

    Well, we can try. Not sure.

    First, add in the lines in RED that I show in red here:
    Code:
    var mastertabvar=new Object()
    mastertabvar.baseopacity=0
    mastertabvar.browserdetect=""
    
    var submenuwait = null;
    
    function showsubmenu(masterid, id)
    {
        if (typeof highlighting!="undefined") clearInterval(highlighting);
        submenuobject=document.getElementById(id);
        submenuobject.onmouseover = 
            function() { 
                   if ( submenuwait != null ) clearTimeout(submenuwait); 
                   submenuwait = null;
               };
        mastertabvar.browserdetect = 
            submenuobject.filters
            ? "ie" 
            : typeof submenuobject.style.MozOpacity=="string" ? "mozilla" : "";
        hidesubmenus(mastertabvar[masterid]);
        submenuobject.style.display="block";
        instantset(mastertabvar.baseopacity);
        highlighting=setInterval("gradualfade(submenuobject)",50)
    }
    ...
    function initalizetab(tabid)
    {
        mastertabvar[tabid]=new Array();
        var menuitems=document.getElementById(tabid).getElementsByTagName("li");
        for (var i=0; i<menuitems.length; i++)
        {
            if (menuitems[i].getAttribute("rel"))
            {
                menuitems[i].setAttribute("rev", tabid);
                mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel");
                if (menuitems[i].className=="selected")
                {
                    showsubmenu(tabid, menuitems[i].getAttribute("rel"))
                }
                var link = menuitems[i].getElementsByTagName("a")[0];
                link.onmouseover =
                    function(){
                          showsubmenu(this.parentNode.getAttribute("rev"),
                                      this.parentNode.getAttribute("rel"));
                    }
                link.onmouseout = 
                    function(){
                          var temp = mastertabvar[this.parentNode.getAttribute("rev")];
                          submenuwait = setTimeout('hidesubmenus("' + temp + '")', 500 );
                    }
            }
        }
    }
    But now you are really groping in the dark along with me.

    You can change the 500 there (half a second) to suit yourself.
    this one right here

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    No idea what you mean by "hidden sub".

    Show code.


  •  

    Posting Permissions

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