www.webdeveloper.com
Results 1 to 5 of 5

Thread: Javascript dropdown menu not disappearing

  1. #1
    Join Date
    Oct 2008
    Location
    moreno valley, California ,usa
    Posts
    161

    Javascript dropdown menu not disappearing

    [/B]Hi everyone,
    I'm still trying to figure our why my drop down menu won't respond to the event handlers I have set up; I want the drop down menu to appear as if being pulled down; this works great. But once viewer mouses off the drop menu I want it to disappear and right now it won't. Here is the link to the page: http://www.captsigerson.com/SWD2/drop_menu3.html

    Try either menu, it scrolls out fine; but you have to reload the page to get it to disappear. What baffles me is why my function mclose is not working.
    Any suggestions would be appreciated:

    Here is the code:
    <script type="text/javascript" >
    var active_menu=null;
    var targetmenuid=null;
    var clipht = 10;
    var timerID;

    function testchange(menuid)
    {
    if(active_menu == null)
    {
    change_menu(menuid);
    }

    }

    function change_menu(menuid)
    {
    active_menu=document.getElementById(menuid);
    active_menu.onmouseout = mclose;
    switch(menuid)
    {
    case "menulist_1":
    active_menu.style.position="absolute";
    active_menu.style.top= "120px";
    active_menu.style.left= "10px";
    active_menu.style.clip="rect(0px 300px 10px 0px)";
    active_menu.style.display ="block";
    active_menu.onmouseout = mclose;
    break;
    case "menulist_2":
    active_menu.style.position="absolute";
    active_menu.style.top= "120px";
    active_menu.style.left= "310px";
    active_menu.style.clip="rect(0px 300px 10px 0px)";
    active_menu.style.display ="block";

    break;
    }
    timerID=setInterval("rolldown()", 1);
    //window.alert("next statement after setInterval");
    }

    function mclose(menuid)
    {
    //window.alert("the element id is: "+ menuid);
    var element=document.getElementById(menuid);
    element.onmouseout=function ()
    {
    element.style.display = "none";
    }

    }

    //loop thru to show menu being pulled down
    function rolldown()
    {
    clipht=clipht + 3;
    if(clipht <200)
    {

    // window.alert("inside clipht addition");
    active_menu.style.clip="rect(0px, 300px," + clipht + "px, 0px)";

    }
    else {
    clearInterval(timerID);
    clipht = 0;
    //window.alert("you have reached 300");
    }
    }//end rolldown

    </script>

    <style type="text/css" >
    .menu {
    float:left;
    }
    .menu .menulist {
    display:none;
    }
    .menulist
    {
    background-color:#cebf91;
    width: 290px;
    height: 190px;
    border: thin solid #000;

    }
    .menulist li {
    list-style-type:none;
    }
    .menulist li a
    {
    background-color:#efe2b7;
    width:220px;
    height:40px;
    border: thin solid #F93;
    list-style:none;
    padding-top:15px;
    padding-left:10px;
    display:block;
    }
    .menulist li a:hover
    {
    color: #000;
    background-color:#cebf91;

    }



    </style>
    </head>

    <body>
    <h2 align="center">Javascript test of drop down menus</h2>
    <div id="main">
    <div class="menu" id="menu1" onmouseover="testchange('menulist_1')" ><a href="#" ><img src="buttons/upcat_1.png" name="Image1" width="300" height="50" border="0" id="Image1" /></a>

    <div class="menulist" id="menulist_1" >
    <ul class="nav" >
    <li><a href="#1">Topic Number One</a></li>
    <li><a href="#2">Topic Number Two</a></li>
    <li><a href="#3">Topic Number Three</a></li>
    </ul>
    </div>
    </div>
    <div class="menu" id="menu2" onmouseover="testchange('menulist_2')" ><a href="#" ><img src="buttons/upcat_2.png" name="Image2" width="300" height="50" border="0" id="Image2" /></a>

    <div class="menulist" id="menulist_2" >
    <ul class="nav">
    <li><a href="#1">Topic Number Four</a></li>
    <li><a href="#2">Topic Number Five</a></li>
    <li><a href="#3 ">Topic Number Six</a></li>
    </ul>
    </div>
    </div>


    </div>
    </body>
    </html>

    Thanks,
    captsig

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350
    You have some errors in the link.

    In particular: active_menu2 is null
    You should use the error console in FF to help you debug the problems.

  3. #3
    Join Date
    Oct 2008
    Location
    moreno valley, California ,usa
    Posts
    161
    Hey, thanks for the reply; I've got it working at 95&#37; of what I hoped to accomplish....still a little short of ideal.
    I know many members will suggest Firebug as an aide for debugging but I have always found it intimidating to deal with. I know I should devote more time to understanding it.

    captsig

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350
    So what's the new code look like and what is the 5&#37; incomplete part?

  5. #5
    Join Date
    Oct 2008
    Location
    moreno valley, California ,usa
    Posts
    161
    Hi JMRKER,
    well, here is the link that demos the 95%:
    http://www.captsigerson.com/SWD2/drop_menu.html

    I would have preferred not to have to require the viewer to 'click' in order for the drop menus to disappear; but I've been foolin' around with this thing for the last three mornings and I guess I just want to move on.

    Any thing you can suggest would be very appreciated!!

    captsig

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