SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Apr 2001
    Location
    UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi - I found this code at computerarts.co.uk - which is fantastic as it "almost" works in both Netscape and IE. It works up to a point but if you move your mouse too quickly between the options it freezes up. If you adjust the ms time to work in Netscape it freezes up in IE and vice versa. Can anyone throw any light on this???!!!

    Thanks in anticipation!!

    Here's the code:

    <script language="JavaScript"><!--

    //names of dropdowns stored here
    f7_droplayer=new Array()
    f7_droplayer[0]="drop1"
    f7_droplayer[1]="drop2"
    f7_droplayer[2]="drop3"
    f7_droplayer[3]="drop4"
    f7_droplayer[4]="drop5"
    f7_droplayer[5]="drop6"
    f7_droplayer[6]="drop7"


    //simple browser check
    f7_v4=(parseInt(navigator.appVersion)>=4 && parseInt(navigator.appVersion)<=5)?1:0
    f7_ie=(document.all && f7_v4)?1:0
    f7_ns=(document.layers && f7_v4)?1:0


    //code for drops

    function f7_showdrop(thelayer){
    f7_keep=thelayer; f7_hideall(); f7_showitnow=1
    f7_showit(thelayer)
    }

    function f7_showit(thelayer){
    if(f7_ie){ eval(f7_droplayer[thelayer]+'.style.visibility="visible"') }
    if(f7_ns){ eval('document.'+f7_droplayer[thelayer]+'.visibility="show"');}
    }


    function f7_hidedrop(){
    f7_keep=-1; setTimeout('f7_hideall()',500)
    }

    f7_keep=-1

    function f7_hideall(){
    for(i=0;i<f7_droplayer.length;i++){
    f7_hideit=0; f7_checkmousepos(i)
    if(f7_ie && f7_keep!=i){
    if(f7_hideit){ eval(f7_droplayer[i]+'.style.visibility="hidden"') }
    }
    if(f7_ns && f7_keep!=i){
    if(f7_hideit){ eval('document.'+f7_droplayer[i]+'.visibility="hide"') }
    }
    }
    }

    //deal with cursor over layer
    document.onmousemove = f7_getmousepos
    if (f7_ns) document.captureEvents(Event.MOUSEMOVE)

    function f7_getmousepos(e){
    if(f7_ns){f7_mousex=e.pageX; f7_mousey=e.pageY}
    if(f7_ie){f7_mousex=event.clientX; f7_mousey=event.clientY;}
    }

    function f7_checkmousepos(i){
    if(f7_ns){
    f7_x_min=eval('document.'+f7_droplayer[i]+'.left')
    f7_x_max=f7_x_min+eval('document.'+f7_droplayer[i]+'.clip.width')
    f7_y_min=eval('document.'+f7_droplayer[i]+'.top')
    f7_y_max=f7_y_min+eval('document.'+f7_droplayer[i]+'.clip.height')
    }
    if(f7_ie){
    f7_x_min=eval(f7_droplayer[i]+'.style.pixelLeft')
    f7_x_max=f7_x_min+eval(f7_droplayer[i]+'.scrollWidth')
    f7_y_min=eval(f7_droplayer[i]+'.style.pixelTop')
    f7_y_max=f7_y_min+eval(f7_droplayer[i]+'.scrollHeight')
    }
    if (f7_mousex>=f7_x_min && f7_mousex<=f7_x_max && f7_mousey>=f7_y_min && f7_mousey<=f7_y_max){
    f7_hideit=0; setTimeout('f7_hideall()',1000)
    }
    else { f7_hideit=1 }
    return f7_hideit
    }

    //--></script>
    <script language="JavaScript"><!--

    //browser stylesheets

    if(f7_ie){
    document.write('<style type="text/css"><!--')

    document.write('.dropdown {height:1px; width:1px; padding-left:10px; padding-top:10px; padding-right:10px; padding-bottom:10px;}')
    document.write('p { margin-top:0px; margin-bottom:6px }')
    document.write('a { text-decoration: none }')
    document.write('a:hover { color: white; text-decoration: underline }')
    document.write('--></style>')
    }

    //--></script>

    <style type="text/css">
    <!--

    p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height:17px}
    td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;}

    .header { font: bold 24px Arial, Verdana, Helvetica, sans-serif }
    .subhead { font-weight: bold; font-size: 12px }
    .list { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; text-decoration: none }
    .forms { font-size: 12px; font-family: Arial, Verdana, Helvetica, sans-serif }

    .dropdown1 { position: absolute; color:black; width:140px; border: #000000; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; background-color: #EFEFEF; layer-background-color: #EFEFEF; top:0px; z-index:1; visibility: hidden ;}
    .dropdown2 { position: absolute; color:black; width:140px; border: #000000; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; background-color: #EFEFEF; layer-background-color: #EFEFEF; top:20px; z-index:1; visibility: hidden ;}
    .dropdown3 { position: absolute; color:black; width:140px; border: #000000; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; background-color: #EFEFEF; layer-background-color: #EFEFEF; top:40px; z-index:1; visibility: hidden ;}
    .dropdown4 { position: absolute; color:black; width:140px; border: #000000; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; background-color: #EFEFEF; layer-background-color: #EFEFEF; top:60px; z-index:1; visibility: hidden ;}
    .dropdown5 { position: absolute; color:black; width:140px; border: #000000; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; background-color: #EFEFEF; layer-background-color: #EFEFEF; top:80px; z-index:1; visibility: hidden ;}
    .dropdown6 { position: absolute; color:black; width:140px; border: #000000; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; background-color: #EFEFEF; layer-background-color: #EFEFEF; top:100px; z-index:1; visibility: hidden ;}
    .dropdown7 { position: absolute; color:black; width:140px; border: #000000; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; background-color: #EFEFEF; layer-background-color: #EFEFEF; top:120px; z-index:1; visibility: hidden ;}
    .drophead { color:#333333; font: bold 12px Verdana, Arial, Helvetica, sans-serif; text-decoration:none }
    .dropitem { text-decoration:none; color:black; font: 12px Arial, Verdana, Helvetica, sans-serif;}
    .drophead:hover { color:black; text-decoration:none }
    .dropitem:hover { color:black; font: bold }
    .dropitem:visited { color:red; font: bold }

    -->
    </style>
    </head>

    <body text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" leftmargin="0"
    topmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF">
    <div id="drop1" class="dropdown1" style="left:61px;" onmouseover="f7_showdrop(0)"
    onmouseout="f7_hidedrop()">

    <p>• <a href="http://www.yahoo.co.uk" class="dropitem">Yahoo</a><br>
    • <a href="#" class="dropitem">Link 1</a><br>
    • <a href="#" class="dropitem">Link 1</a><br>
    • <a href="#" class="dropitem">Link 1</a></p>
    </div><div id="drop2" class="dropdown2" style="left:61px;" onmouseover="f7_showdrop(1)"
    onmouseout="f7_hidedrop()">

    <p>• <a href="#" class="dropitem">Link 2</a><br>
    • <a href="#" class="dropitem">Link 2</a><br>
    • <a href="#" class="dropitem">Link 2</a><br>
    • <a href="#" class="dropitem">Link 2</a></p>
    </div><div id="drop3" class="dropdown3" style="left:61px;" onmouseover="f7_showdrop(2)"
    onmouseout="f7_hidedrop()">

    <p>• <a href="#" class="dropitem">Link 3</a><br>
    • <a href="#" class="dropitem">Link 3</a><br>
    • <a href="#" class="dropitem">Link 3</a><br>
    • <a href="#" class="dropitem">Link 3</a></p>
    </div><div id="drop4" class="dropdown4" style="left:61px;" onmouseover="f7_showdrop(3)"
    onmouseout="f7_hidedrop()">

    <p>• <a href="#" class="dropitem">Link 4</a><br>
    • <a href="#" class="dropitem">Link 4</a><br>
    • <a href="#" class="dropitem">Link 4</a><br>
    • <a href="#" class="dropitem">Link 4</a></p>
    </div><div id="drop5" class="dropdown5" style="left:61px;" onmouseover="f7_showdrop(4)"
    onmouseout="f7_hidedrop()">

    <p>• <a href="#" class="dropitem">Link 5</a><br>
    • <a href="#" class="dropitem">Link 5</a><br>
    • <a href="#" class="dropitem">Link 5</a><br>
    • <a href="#" class="dropitem">Link 5</a></p>
    </div><div id="drop6" class="dropdown6" style="left:61px;" onmouseover="f7_showdrop(5)"
    onmouseout="f7_hidedrop()">

    <p>• <a href="#" class="dropitem">Link 6</a><br>
    • <a href="#" class="dropitem">Link 6</a><br>
    • <a href="#" class="dropitem">Link 6</a><br>
    • <a href="#" class="dropitem">Link 6</a></p>
    </div><div id="drop7" class="dropdown7" style="left:61px;" onmouseover="f7_showdrop(6)"
    onmouseout="f7_hidedrop()">

    <p>• <a href="#" class="dropitem">Link 7</a><br>
    • <a href="#" class="dropitem">Link 7</a><br>
    • <a href="#" class="dropitem">Link 7</a><br>
    • <a href="#" class="dropitem">Link 7</a></p>
    </div>

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><table width="100" border="0" cellspacing="0" cellpadding="0" height="30">
    <tr align="center">
    <td width="62" bgcolor="#FFFFFF"><p align="left"><a href="#" class="drophead"
    onmouseover="f7_showdrop(0)" onmouseout="f7_hidedrop()"><b><u>News</u></b></a> </td>
    </tr>
    <tr align="center">
    <td width="62" bgcolor="#FFFFFF"><p align="left"><a href="#" class="drophead"
    onmouseover="f7_showdrop(1)" onmouseout="f7_hidedrop()"><b><u>Tutorials</u></b></a> </td>
    </tr>
    <tr align="center">
    <td bgcolor="#FFFFFF" width="62"><p align="left"><a href="#" class="drophead"
    onmouseover="f7_showdrop(2)" onmouseout="f7_hidedrop()"><b><u>Reviews</u></b></a> </td>
    </tr>
    <tr align="center">
    <td bgcolor="#FFFFFF" width="62"><p align="left"><a href="#" class="drophead"
    onmouseover="f7_showdrop(3)" onmouseout="f7_hidedrop()"><b><u>Resources</u></b></a> </td>
    </tr>
    <tr align="center">
    <td bgcolor="#FFFFFF" width="62"><p align="left"><a href="#" class="drophead"
    onmouseover="f7_showdrop(4)" onmouseout="f7_hidedrop()"><b><u>Videos</u></b></a> </td>
    </tr>
    <tr align="center">
    <td bgcolor="#FFFFFF" width="62"><p align="left"><a href="#" class="drophead"
    onMouseOver="f7_showdrop(5)" onMouseOut="f7_hidedrop()"><b><u>Forum</u></b></a> </td>
    </tr>
    <tr align="center">
    <td bgcolor="#FFFFFF" width="62"><p align="left"><a href="#" class="drophead"
    onMouseOver="f7_showdrop(6)" onMouseOut="f7_hidedrop()"><b><u>Magazine</u></b></a> </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </body>

  2. #2
    Procrastinator Extraordinaire lucas's Avatar
    Join Date
    Oct 2000
    Location
    Springfield, Missouri, U.S.A.
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i suggest the hiermenus at dhtml.com, they have the most indepth testing and trouble free option of any dhtml menu i have ever seen. i use them on my site.

  3. #3
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by lucas
    i suggest the hiermenus at dhtml.com, they have the most indepth testing and trouble free option of any dhtml menu i have ever seen. i use them on my site.
    grab dhtml menu builder from http://software.xfx.net
    none is better. supports all the browsers.

    IE/NS4/NS6/Opera4/Opera5
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein

  4. #4
    SitePoint Enthusiast kdog316's Avatar
    Join Date
    May 2001
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the dhtml one is free the softwarefx isnt and i have tried it its kind of hard. so if you are looking foro one where you cant custimize that much then just use fireworks
    will haveone soon


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
  •