Advanced Search

Results 1 to 2 of 2

Thread: Javascript code to create a delay on Mousover

  1. #1
    Join Date
    Nov 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Javascript code to create a delay on Mousover

    1) Script Title: DD Tab Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

    3) Describe problem:

    I was just wondering if there is a way to add a delay before the tab changes.

    I have managed to find a post in the archive that comes pretty close, it adds the delay but both tabs are highlighted for the delay period and then it jumps to the new tab if you stay on it for the whole delay period.

    What I would like it to do is...

    On mouse over do nothing, 500ms later if the user stays on the new tab select it.

    Here is the code I am using so far...

    [CODE]
    menuitems[x].onmouseover=function(){
    clearTimeout(ddtabmenu.timer);
    var t=this;
    t.onmouseout=function(){clearTimeout(ddtabmenu.timer);}
    ddtabmenu.timer=setTimeout(function(){ddtabmenu.showsubmenu(tabid, t);},1000);
    };
    [CODE]

    Thanks in advance
    Last edited by barryevans; 11-16-2010 at 03:00 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    9,862
    Thanks
    3
    Thanked 959 Times in 948 Posts
    Blog Entries
    15

    Default

    The highlighting of the menu bar items onMouseover is actually due to the CSS of the menu, and not the script. So to stop the menu items from being highlighted when the mouse rolls over them, remove the "a:hover" CSS rule from the .css files. Lets take solidblockmenu.css as an example. The necessary changes would be to remove the code in red below:

    Code:
    .solidblockmenu ul{
    margin: 0;
    padding: 0;
    float: left;
    font: bold 13px Arial;
    width: 100%;
    border: 1px solid #625e00;
    border-width: 1px 0;
    background: black url(media/blockdefault.gif) center center repeat-x;
    }
    
    .solidblockmenu li{
    display: inline;
    }
    
    .solidblockmenu li a{
    float: left;
    color: white;
    padding: 9px 11px;
    text-decoration: none;
    border-right: 1px solid white;
    }
    
    .solidblockmenu li a:visited{
    color: white;
    }
    
    .solidblockmenu li a:hover, .solidblockmenu li a.current{
    color: white;
    background: transparent url(media/blockactive.gif) center center repeat-x;
    }
    
    .tabcontainer{
    clear: left;
    width:95%; /*width of 2nd level sub menus*/
    height:1.5em; /*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/
    }
    
    *:first-child+html .ieclass{ /*IE7 hack to remove gap between menu and sub contents*/
    margin-top: -1em;
    }
    
    * html .ieclass{ /*IE6 and below hack to remove gap between menu and sub contents*/
    margin-top: -1em;
    }
    
    .tabcontent{
    display:none;
    }
    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
  •