Newbie requests help with drop-down menu using Netscape 7.1

Discussion in 'Javascript' started by Prem Kumar, Feb 23, 2004.

  1. Prem Kumar

    Prem Kumar Guest

    I am a newbie trying to implement a drop-down navigation bar. I
    inherited the attached code from a colleague. The code works fine with
    Internet Explorer 6.0 and the drop-down menu is visible. However, I
    cannot see the drop-down menu when this code is viewed using Netscape
    7.1. What do I need to change to get this code to work with Netscape
    7.1? Alternatively, is there better code available to implement the
    drop-down navigation functionality?

    Thanks much!

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1">
    <script language="JavaScript"><!--

    /*
    The ultimate DHTML drop-down code
    Nick Nettleton
    www.computerarts.co.uk || www.fluid7.co.uk
    --
    This must be the single most requested bit of code in the history of
    Computer Arts, so we've decided to make it user-friendly and adaptable
    for everyone. Stacks more goodies to come too - head to one of the
    above sites for regular infoa nd updates.
    Works with v4 and v5 browsers - both IE and NS. Update for NS6 coming.
    Also, be aware there's no way to automatically centre layers in the
    window - a JS for this coming soon. In the meantime, stick with
    left-aligned.
    Keep an eye out for update for NS6.
    --
    You can adapt, use and distribute this code under GNU public licence,
    as long as:
    (1) You leave all the comment and credit lines in, including these
    ones
    (2) You don't sell it for profit
    --
    If you want to tweak the code yourself, use the f7_droplayer to set
    the names of the dropdowns, and just call f7_showdrop(n) and
    f7_hdidedrop from onmouseover, onmouseout and other events. Swap n for
    the number of the layer as in the array.
    --
    Enjoy!!!
    */

    //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+'.style.visibility="hidden"') }
    }
    if(f7_ns && f7_keep!=i){
    if(f7_hideit){ eval('document.'+f7_droplayer+'.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+'.left')
    f7_x_max=f7_x_min+eval('document.'+f7_droplayer+'.clip.width')
    f7_y_min=eval('document.'+f7_droplayer+'.top')
    f7_y_max=f7_y_min+eval('document.'+f7_droplayer+'.clip.height')
    }
    if(f7_ie){
    f7_x_min=eval(f7_droplayer+'.style.pixelLeft')
    f7_x_max=f7_x_min+eval(f7_droplayer+'.style.pixelWidth')
    f7_y_min=eval(f7_droplayer+'.style.pixelTop')
    f7_y_max=f7_y_min+eval(f7_droplayer+'.style.pixelHeight')
    }
    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()',500)
    }
    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 {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 }

    ..dropdown { position: absolute; color:black; width:140px; border:
    #000000; border-style: solid; border-top-width: 1px;
    border-right-width: 1px; border-bottom-width: 1px; border-left-width:
    1px; background-color: #EFEFEF; layer-background-color: #EFEFEF;
    top:110px; 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 }

    -->
    </style>
    </head>

    <body bgcolor="#000000" text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF"
    alink="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0"
    marginheight="0">
    <div id="drop1" class="dropdown" style="left:-1px;"
    onmouseover="f7_showdrop(0)" onmouseout="f7_hidedrop()">
    <p>• <a href="#" class="dropitem">Link 1 xxxxxxx</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="dropdown" style="left:61px;"
    onmouseover="f7_showdrop(1)" onmouseout="f7_hidedrop()">
    <p>• <a href="#" class="dropitem">Link 1</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="drop3" class="dropdown" style="left:154px;"
    onmouseover="f7_showdrop(2)" onmouseout="f7_hidedrop()">
    <p>• <a href="#" class="dropitem">Link 1</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="drop4" class="dropdown" style="left:244px;"
    onmouseover="f7_showdrop(3)" onmouseout="f7_hidedrop()">
    <p>• <a href="#" class="dropitem">Link 1</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="drop5" class="dropdown" style="left:352px;"
    onmouseover="f7_showdrop(4)" onmouseout="f7_hidedrop()">
    <p>• <a href="#" class="dropitem">Link 1</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="drop6" class="dropdown" style="left:424px;"
    onmouseover="f7_showdrop(5)" onmouseout="f7_hidedrop()">
    <p>• <a href="#" class="dropitem">Link 1</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="drop7" class="dropdown" style="left:493px;"
    onmouseover="f7_showdrop(6)" onmouseout="f7_hidedrop()">
    <p>• <a href="#" class="dropitem">Link 1</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>

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td colspan="3" height="80">
    <p>&nbsp;</p>
    </td>
    </tr>
    <tr>
    <td bgcolor="#EFEFEF" colspan="3">
    <table width="601" border="0" cellspacing="0" cellpadding="0"
    height="30">
    <tr align="center">
    <td width="61"> <a href="#" class="drophead"
    onmouseover="f7_showdrop(0)"
    onmouseout="f7_hidedrop()"><b>News</b></a>
    </td>
    <td bgcolor="#000000" width="1"><img src="shimpuppy.gif"
    width="1" height="1"></td>
    <td width="92"> <a href="#" class="drophead"
    onmouseover="f7_showdrop(1)"
    onmouseout="f7_hidedrop()"><b>Tutorials</b></a>
    </td>
    <td bgcolor="#000000" width="1"><img src="shim.gif"
    width="1" height="1"></td>
    <td width="89"> <a href="#" class="drophead"
    onmouseover="f7_showdrop(2)"
    onmouseout="f7_hidedrop()"><b>Reviews</b></a>
    </td>
    <td bgcolor="#000000" width="1"><img src="shim.gif"
    width="1" height="1"></td>
    <td width="107"> <a href="#" class="drophead"
    onmouseover="f7_showdrop(3)"
    onmouseout="f7_hidedrop()"><b>Resources</b></a>
    </td>
    <td bgcolor="#000000" width="1"><img src="shim.gif"
    width="1" height="1"></td>
    <td width="71"> <a href="#" class="drophead"
    onmouseover="f7_showdrop(4)"
    onmouseout="f7_hidedrop()"><b>Videos</b></a>
    </td>
    <td bgcolor="#000000" width="1"><img src="shim.gif"
    width="1" height="1"></td>
    <td width="68"><a href="#" class="drophead"
    onMouseOver="f7_showdrop(5)"
    onMouseOut="f7_hidedrop()"><b>Forum</b></a>
    </td>
    <td bgcolor="#000000" width="1"><img src="shim.gif"
    width="1" height="1"></td>
    <td width="106"><a href="#" class="drophead"
    onMouseOver="f7_showdrop(6)"
    onMouseOut="f7_hidedrop()"><b>Magazine</b></a>
    </td>
    <td width="1" bgcolor="#000000"><img src="shim.gif"
    width="1" height="1"></td>
    </tr>
    </table>

    </td>
    </tr>
    <tr>
    <td colspan="3"><img src="shim.gif" width="1" height="1"></td>
    </tr>
    </table>



    </body>
    </html>
    Prem Kumar, Feb 23, 2004
    #1
    1. Advertising

  2. Prem Kumar

    kaeli Guest

    In article <>, premkumar9
    @yahoo.com enlightened us with...
    > I am a newbie trying to implement a drop-down navigation bar. I
    > inherited the attached code from a colleague. The code works fine with
    > Internet Explorer 6.0 and the drop-down menu is visible. However, I
    > cannot see the drop-down menu when this code is viewed using Netscape
    > 7.1. What do I need to change to get this code to work with Netscape
    > 7.1?


    Quite a bit. It relies on old stuff and doesn't implement the new
    document.getElementById.
    Use a newer menu.

    > window - a JS for this coming soon. In the meantime, stick with
    > left-aligned.
    > Keep an eye out for update for NS6.


    Obviously, the script was never intended for NN7. Use a newer script.

    >
    > //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
    >


    And here's the problem.
    This code wouldn't work in Opera or Mozilla, either.


    I use HVMenu from dynamicdrive.com. So far, I like it very much. Try
    that. It works in NN4+, Mozilla 1+, IE4+, and Opera. I haven't tested it
    in other browsers.

    --
    --
    ~kaeli~
    Local Area Network in Australia:... the LAN down under.
    http://www.ipwebdesign.net/wildAtHeart
    http://www.ipwebdesign.net/kaelisSpace
    kaeli, Feb 23, 2004
    #2
    1. Advertising

  3. Prem Kumar

    Prem Kumar Guest

    Thanks much for the suggestion. I will give this a try.
    PK


    kaeli <> wrote in message news:<>...
    > In article <>, premkumar9
    > @yahoo.com enlightened us with...
    > > I am a newbie trying to implement a drop-down navigation bar. I
    > > inherited the attached code from a colleague. The code works fine with
    > > Internet Explorer 6.0 and the drop-down menu is visible. However, I
    > > cannot see the drop-down menu when this code is viewed using Netscape
    > > 7.1. What do I need to change to get this code to work with Netscape
    > > 7.1?

    >
    > Quite a bit. It relies on old stuff and doesn't implement the new
    > document.getElementById.
    > Use a newer menu.
    >
    > > window - a JS for this coming soon. In the meantime, stick with
    > > left-aligned.
    > > Keep an eye out for update for NS6.

    >
    > Obviously, the script was never intended for NN7. Use a newer script.
    >
    > >
    > > //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
    > >

    >
    > And here's the problem.
    > This code wouldn't work in Opera or Mozilla, either.
    >
    >
    > I use HVMenu from dynamicdrive.com. So far, I like it very much. Try
    > that. It works in NN4+, Mozilla 1+, IE4+, and Opera. I haven't tested it
    > in other browsers.
    >
    > --
    Prem Kumar, Feb 24, 2004
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. SirPoonga
    Replies:
    2
    Views:
    757
    Ben Strackany
    Jan 7, 2005
  2. weiwei
    Replies:
    0
    Views:
    1,013
    weiwei
    Jan 5, 2007
  3. Steve Richter

    using asp:menu to create drop down menu

    Steve Richter, Jun 5, 2007, in forum: ASP .Net
    Replies:
    2
    Views:
    3,278
    Steve Richter
    Jun 5, 2007
  4. msimmons
    Replies:
    0
    Views:
    472
    msimmons
    Jul 16, 2009
  5. Replies:
    5
    Views:
    267
Loading...

Share This Page