Results 1 to 10 of 10

Thread: All Levels Navigation Menu-More than one menu option selected on mouseover at a time

  1. #1
    Join Date
    Apr 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default All Levels Navigation Menu-More than one menu option selected on mouseover at a time

    1) Script Title: All Levels Navigational Menu (v2.1)


    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu/index.htm

    3) Describe problem: When i mouseover the options in the menu bar quickly and repeatedly, sometimes two or more options have the dropdowns visible when there should be only one dropdown visible at a time depending on where the mouse pointer is. This does not happen all the time. But it has happened several times on both IE and Firefox.


    I don't have a link to my website to show you, but I am pasting what the source of a typical page looks like.



    These were the changes i made to the script:
    ----------------------------------------------------------------
    var ddlevelsmenu={
    contextpath:"/", /* I added this property*/
    enableshim: false,

    arrowpointers:{
    downarrow: ["/images/menu/menu-arrow-down.gif", 11,7], //[path_to_down_arrow, arrowwidth, arrowheight]
    rightarrow: ["/images/menu/menu-arrow-right.gif", 12,12], //[path_to_right_arrow, arrowwidth, arrowheight]
    showarrow: {toplevel: true, sublevel: true} //Show arrow images on top level items and sub level items, respectively?
    },
    hideinterval: 1, //delay in milliseconds before entire menu disappears onmouseout.
    effects: {enableswipe: true, enablefade: false, duration: 500},
    //httpsiframesrc: "/view/shared/blank.htm",
    --------------------------------------------------------------------------


    I also modified the setup ,init and addpointer functions to set the contextpath
    --------------------------------------------------------------------------
    setup:function(mainmenuid, dir,ctxpath){
    this.addEvent(window, function(){ddlevelsmenu.init(mainmenuid, dir,ctxpath)}, "load")
    }

    init:function(mainmenuid, dir,ctxpath){
    this.contextpath=ctxpath;
    //......the rest of the code is unchanged.
    }

    addpointer:function(target, imgclass, imginfo, BeforeorAfter){
    var pointer=document.createElement("img")
    pointer.src=this.contextpath+imginfo[0]
    //......the rest of the code is unchanged.

    }
    --------------------------------------------------------------------------
    I also modified the stylesheet to change the background color.


    --------------------------------------------------------------------------
    <html>
    <head>
    <title>Test page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">





    <link rel="stylesheet" type="text/css" href="/style/menu-base.css" />
    <link rel="stylesheet" type="text/css" href="/style/menu-topbar.css" />
    <link rel="stylesheet" type="text/css" href="/style/menu-sidebar.css" />


    <script type="text/javascript" src="/js/menu.js"></script>



    </head>
    <body>
    <div id="layoutContent">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
    <td>
    <table width="760" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
    <td valign="bottom" width="18%">
    Logo goes here
    </td>
    <td valign="bottom" align=left width="32%">

    <span class="Greeting">Hello, User!</span>
    </td>
    <td align="right" valign="bottom" width="50%">

    <table cellpadding="0" align="right">
    <tr>
    <td>
    <a href="#" class="Utility-Links">Logout</a>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td class="Menu-Bar">
    <table cellspacing="0" cellpadding="0" align="center" width="810">
    <tr>
    <td>

    <div id="ddtopmenubar" class="mattblackmenu"><ul><li><a href="#" rel="1">Option 1</a></li><li><a href="#" rel="2">Option 2</a></li><li><a href="#" rel="3">Option 3</a></li></ul></div><script type="text/javascript">ddlevelsmenu.setup("ddtopmenubar", "topbar", "")</script>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td>
    &nbsp;
    </td>
    </tr>
    <tr>
    <td>
    <table width="760" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
    <td>




    Large Content goes here






    </td>
    </tr>
    </table>

    </td>
    </tr>
    <tr>
    <td>

    Footer goes here

    </td>
    </tr>
    </table>
    </div>
    <div id="wait" style="display: none;">
    Please wait. Processing in progress.
    </div>

    <ul id="1" class="ddsubmenustyle">
    <li>
    <a
    href="#">Sub option 1</a>
    </li>
    <li>
    <a href="#">Sub option 2</a>
    <ul>
    <li>
    <a href="#">item 1</a>
    </li>
    <li>
    <a href="#">itme 2</a>
    </li>
    </ul>
    </li>

    </ul>
    <ul id="2" class="ddsubmenustyle">
    <li>
    <a
    href="#">Sub option 1</a>
    </li>
    <li>
    <a href="#">Sub option 2</a>
    <ul>
    <li>
    <a href="#">item 1</a>
    </li>
    <li>
    <a href="#">itme 2</a>
    </li>
    </ul>
    </li>
    </ul>
    <ul id="3" class="ddsubmenustyle">
    <li>
    <a
    href="#">Sub option 1</a>
    </li>
    <li>
    <a href="#">Sub option 2</a>
    <ul>
    <li>
    <a href="#">item 1</a>
    </li>
    <li>
    <a href="#">itme 2</a>
    </li>
    </ul>
    </li>
    </ul>


    </body>

    </html>
    --------------------------------------------------------------------------

    Appreciate any help.

    Thanks

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Does this happen with the DD demo page as well? I know it's hard to reproduce, but if you can somehow list the steps to reproducing the issue using the DD demo page, that would be helpful.

    ps: Please try and format any code in your post using the CODE tags. It just makes it easier to read.
    DD Admin

  3. #3
    Join Date
    Apr 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Unfortunately I have not been able to pin-point when exactly the dropdown fails to collapse. It happens when i move from one main menu option, scan the dropdowns and move to the next a littel quickly. It just happens suddenly and I notice that one of the dropdown stay open.

    Just an FYI,
    -I am generating the menu section dynamically using JSP custom tags.
    - I used to work with v1.5. I don't know if this problem was there then. But started to notice it after i got v2.1.


    I apologize for not properly formatting the code. I am pasting the code again:

    These were the changes i made to the script:
    Code:
    ----------------------------------------------------------------
    var ddlevelsmenu={
    contextpath:"/", /* I added this property*/
    enableshim: false, 
    
    arrowpointers:{
    downarrow: ["/images/menu/menu-arrow-down.gif", 11,7], //[path_to_down_arrow, arrowwidth, arrowheight]
    rightarrow: ["/images/menu/menu-arrow-right.gif", 12,12], //[path_to_right_arrow, arrowwidth, arrowheight]
    showarrow: {toplevel: true, sublevel: true} //Show arrow images on top level items and sub level items, respectively?
    },
    hideinterval: 1, //delay in milliseconds before entire menu disappears onmouseout.
    effects: {enableswipe: true, enablefade: false, duration: 500},
    //httpsiframesrc: "/view/shared/blank.htm", 
    --------------------------------------------------------------------------
    I also modified the setup ,init and addpointer functions to set the contextpath
    Code:
    setup:function(mainmenuid, dir,ctxpath){
    this.addEvent(window, function(){ddlevelsmenu.init(mainmenuid, dir,ctxpath)}, "load")
    }
    
    init:function(mainmenuid, dir,ctxpath){
    this.contextpath=ctxpath;
    //......the rest of the code is unchanged.
    }
    
    addpointer:function(target, imgclass, imginfo, BeforeorAfter){
    var pointer=document.createElement("img")
    pointer.src=this.contextpath+imginfo[0]
    //......the rest of the code is unchanged.
    
    }
    Code:
    <html>
    <head>
    <title>Test page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    
    
    
    
    <link rel="stylesheet" type="text/css" href="/style/menu-base.css" />
    <link rel="stylesheet" type="text/css" href="/style/menu-topbar.css" />
    <link rel="stylesheet" type="text/css" href="/style/menu-sidebar.css" />
    
    
    <script type="text/javascript" src="/js/menu.js"></script>
    
    
    
    </head>
    <body>
    <div id="layoutContent">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
    <td>
    <table width="760" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
    <td valign="bottom" width="18%">
    Logo goes here
    </td>
    <td valign="bottom" align=left width="32%">
    
    <span class="Greeting">Hello, User!</span>
    </td>
    <td align="right" valign="bottom" width="50%">
    
    <table cellpadding="0" align="right"> 
    <tr> 
    <td>
    <a href="#" class="Utility-Links">Logout</a> 
    </td>
    </tr> 
    </table> 
    </td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td class="Menu-Bar"> 
    <table cellspacing="0" cellpadding="0" align="center" width="810">
    <tr> 
    <td> 
    
    <div id="ddtopmenubar" class="mattblackmenu"><ul><li><a href="#" rel="1">Option 1</a></li><li><a href="#" rel="2">Option 2</a></li><li><a href="#" rel="3">Option 3</a></li></ul></div><script type="text/javascript">ddlevelsmenu.setup("ddtopmenubar", "topbar", "")</script> 
    </td>
    </tr>
    </table> 
    </td>
    </tr>
    <tr>
    <td>
    &nbsp;
    </td>
    </tr>
    <tr>
    <td>
    <table width="760" border="0" cellspacing="0" cellpadding="0" align="center"> 
    <tr>
    <td>
    
    
    
    
    Large Content goes here
    
    
    
    
    
    
    </td>
    </tr>
    </table>
    
    </td>
    </tr>
    <tr>
    <td>
    
    Footer goes here
    
    </td>
    </tr>
    </table>
    </div>
    <div id="wait" style="display: none;">
    Please wait. Processing in progress.
    </div>
    
    <ul id="1" class="ddsubmenustyle">
    <li>
    <a
    href="#">Sub option 1</a>
    </li> 
    <li>
    <a href="#">Sub option 2</a>
    <ul>
    <li>
    <a href="#">item 1</a>
    </li>
    <li>
    <a href="#">itme 2</a>
    </li>
    </ul>
    </li>
    
    </ul>
    <ul id="2" class="ddsubmenustyle">
    <li>
    <a
    href="#">Sub option 1</a>
    </li> 
    <li>
    <a href="#">Sub option 2</a>
    <ul>
    <li>
    <a href="#">item 1</a>
    </li>
    <li>
    <a href="#">itme 2</a>
    </li>
    </ul>
    </li>
    </ul>
    <ul id="3" class="ddsubmenustyle">
    <li>
    <a
    href="#">Sub option 1</a>
    </li> 
    <li>
    <a href="#">Sub option 2</a>
    <ul>
    <li>
    <a href="#">item 1</a>
    </li>
    <li>
    <a href="#">itme 2</a>
    </li>
    </ul>
    </li>
    </ul>
    
    
    </body>
    
    </html>

  4. #4
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Do you get the same issue with the demo on the DD demo page as well, or just on your own?
    DD Admin

  5. #5
    Join Date
    Apr 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Just on my page. I notice that on the demo page there is a slight delay before a dropdown is visible on mouseover. Whereas on my page the dropdown appears almost immediately. I think it has to do with these two properties that i modified inside the script

    Code:
    /* i reduced the hideinterval*/
    hideinterval: 1, //delay in milliseconds before entire menu disappears onmouseout.
    
    /*i set enablefade to false*/
    effects: {enableswipe: true, enablefade: false, duration: 500},
    I restored the properties to their original values, as in the website, and i tried to reproduce the problem and was unable to so far. May be those changes I made was the cause. I hope that resolves the problem...though not sure.

  6. #6
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    The low "hideinterval" setting could be the culprit...
    DD Admin

  7. #7
    Join Date
    Apr 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Unfortunately the original settings did not help either because i am having the same problem again. Every option is my menu bar has a submenu unlike the demo. I am at a loss right now. It is not too serious a problem since it is not public web app... at the same time, it is difficult to explain to testers who nitpick.

    If anyone can help, any suggestions, it would be great.

  8. #8
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Can you post a link to the problem page? That way I don't have to replicate the same menu structure to test out the issue.
    DD Admin

  9. #9
    Join Date
    Apr 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I am behind a firewall and cannot give a link for you to test. What are the alternatives ... how do people usually provide a link to their pages...do they have their own website? Pardon my ignorance here...

  10. #10
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Yep, generally they do. You could always upload the page onto a free web host and post the link to it here.
    DD Admin

Bookmarks

Posting Permissions

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