Newbie requests help with drop-down menu using Netscape 7.1

P

Prem Kumar

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

kaeli

premkumar9 said:
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?
Click to expand...

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.
Click to expand...

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
Click to expand...

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.

--
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Not sure why drop-down is not working. 2
Help with my responsive home page 2
Help with code 0
Help with Visual Lightbox: Scripts 2
Dropdown menu in a fixed navbar 2
Need help , Having problem with Drag n Drop ? 9
Working on mobile css menu with plenty of frustration! 2
Need help , Having problem with Drag n Drop... 1

Members online

Total: 43 (members: 1, guests: 42)
Robots: 672

Forum statistics

Threads
473,769
Messages
2,569,578
Members
45,052
Latest member
LucyCarper

Latest Threads

Top