Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

please help with netscape javascript problem...

Status
Not open for further replies.
iridescence

iridescence

Programmer
Jul 17, 2001
5
GB
can u please look at this page
it works in ie 4 and 5 fine, but in ns4 the menu items are expanded all the time and in ns6 expanded menu's dont collapse...

any help to fix this would be very much appricated!!!

:)
 
Sort by date Sort by votes
iridescence,

I had the same problem so I used another menu. This works in both IE and NN.

Cheers,
Fengshui1998


<HTML>
<HEAD>
<style type=&quot;text/css&quot;>
a
{text-decoration: none;}

.title
{position: absolute;
width: 100px;
height: 20px;
left: 10px;
z-index: 10;
font-family: verdana, helvetica, sans-serif;
font-weight: bold;
font-size: 12px;}

.submenu
{position: absolute;
left: 25px;
width: 120px;
border: 1px solid black;
background-color: yellow;
layer-background-color: yellow;
font-family: verdana, helvetica, sans-serif;
font-size: 10px;
visibility: hidden;}
</style>

<SCRIPT LANGUAGE=&quot;JavaScript&quot;>

<!-- Original: Fredrik Fridsten (fredrik.fridsten@home.se) -->
<!-- Web Site: -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! -->

<!-- Begin

// ADDITIONAL NOTES
// The input variables to the toggle function are the number of the submenu to open/close,
// starting with 0, and the number of pixels to move the objects below.
// For example toggle(1,60) opens/closes the second submenu and moves the objects below 60 pixels.

var nom = 4; // Number of menus
var usePictures = 1; // use pictures? 1 = yes, 0 = no

var ttls = new Array(); // An array for the title objects
var subs = new Array(); // An array for the submenu objects
var lastn;
var lastmove;

if (document.layers) {
visible = 'show';
hidden = 'hide';
}
else
if (document.all) {
visible = 'visible';
hidden = 'hidden';
}
for (var i = 1; i <= nom; i++) {
ttls = ('title' + i);
subs = ('submenu' +i);
}
function picopen(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = &quot;}
else if (document.all) {
document.all(pic).src = &quot; }
}
function picclose(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = &quot;}
else if (document.all) {
document.all(pic).src = &quot; }
}
lastn = (nom + 1);
lastmove = 0;
function lasttoggle(n,move) {
if (n <= nom) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
picclose(n); // Remove this if you don't use pictures
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls].top -= move;
document.layers[subs].top -= move;
}
else if (document.all) {
document.all(ttls).style.pixelTop -= move;
document.all(subs).style.pixelTop -= move;
}
}
}
}
}
function toggle(n,move) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
if (usePictures) picclose(n);
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls].top -= move;
document.layers[subs].top -= move;
}
else if (document.all) {
document.all(ttls).style.pixelTop -= move;
document.all(subs).style.pixelTop -= move;
}
}
}
else {
submenu.visibility = visible;
if (usePictures) picopen(n);
if (lastn != n) {
lasttoggle(lastn,lastmove);
}
for (var i = (n+1); i <= nom; i++) {
if (document.layers) {
document.layers[ttls].top += move;
document.layers[subs].top += move;
}
if (document.all) {
document.all(ttls).style.pixelTop += move;
document.all(subs).style.pixelTop += move;
}
}
}
lastn = n;
lastmove = move;
}
function tellDemo() {
alert('This link would open in the right frame, but this is just a demo!');
return false;
}
// End -->

</script>
</HEAD>

<BODY BGCOLOR=#ffffff vlink=#0000ff>

<div class=&quot;title&quot; id=&quot;title1&quot; style=&quot;top: 0px&quot;>&nbsp;
<a href=&quot;#&quot; onclick=&quot;javascript: toggle(1,30); return false&quot;><img name=&quot;pic1&quot; src=&quot; border=&quot;0&quot;>Category 1</a>
</div>

<div class=&quot;submenu&quot; id=&quot;submenu1&quot; style=&quot;top: 20px&quot;>
&nbsp;<a href=&quot;javascript:tellDemo();&quot;>Item # 1</a><br>
&nbsp;<a href=&quot;javascript:tellDemo();&quot;>Item # 2</a>
</div>

<div class=&quot;title&quot; id=&quot;title2&quot; style=&quot;top: 20px&quot;>&nbsp;
<a href=&quot;#&quot; onclick=&quot;javascript: toggle(2,60); return false&quot;><img name=&quot;pic2&quot; src=&quot; border=&quot;0&quot;>Category 2</a>
</div>

<div class=&quot;submenu&quot; id=&quot;submenu2&quot; style=&quot;top: 40px&quot;>
&nbsp;<a href=&quot;javascript:tellDemo();&quot;>Item # 3</a><br>
&nbsp;<a href=&quot;javascript:tellDemo();&quot;>Item # 4</a><br>
&nbsp;<a href=&quot;javascript:tellDemo();&quot;>Item # 5</a><br>
&nbsp;<a href=&quot;javascript:tellDemo();&quot;>Item # 6</a>
</div>

<div class=&quot;title&quot; id=&quot;title3&quot; style=&quot;top: 40px&quot;>&nbsp;
<a href=&quot;#&quot; onclick=&quot;javascript: toggle(3,45); return false&quot;><img name=&quot;pic3&quot; src=&quot; border=&quot;0&quot;>Category 3</a>
</div>

<div class=&quot;submenu&quot; id=&quot;submenu3&quot; style=&quot;top: 60px&quot;>
&nbsp;<a href=&quot;javascript:tellDemo();&quot;>Item # 7</a><br>
&nbsp;<a href=&quot;javascript:tellDemo();&quot;>Item # 8</a><br>
&nbsp;<a href=&quot;javascript:tellDemo();&quot;>Item # 9</a>
</div>

<div class=&quot;title&quot; id=&quot;title4&quot; style=&quot;top: 60px&quot;>&nbsp;
<a href=&quot;#&quot; onclick=&quot;javascript: toggle(4,60); return false&quot;><img name=&quot;pic4&quot; src=&quot; border=&quot;0&quot;>Category 4</a>
</div>

<div class=&quot;submenu&quot; id=&quot;submenu4&quot; style=&quot;top: 80px&quot;>
&nbsp;<a href=&quot;javascript:tellDemo();&quot;>Item # 10</a><br>
&nbsp;<a href=&quot;javascript:tellDemo();&quot;>Item # 11</a><br>
&nbsp;<a href=&quot;javascript:tellDemo();&quot;>Item # 12</a><br>
&nbsp;<a href=&quot;javascript:tellDemo();&quot;>Item # 13</a>
</div>


<br><br><br><br><br><br><br><br><br>
<center>
<font face=&quot;arial, helvetica&quot; size=&quot;-1&quot;><a href=&quot;category-menus-faq.html&quot; target=&quot;_new&quot;>Need help?<br>Read the FAQs</a></font>
</center>
</body>
</html>
 
Upvote 0 Downvote
thx 4 the help, but that menu dosnt seem to quite work properly on my ie5.5 on win2k...

the top 2 menu items, dont cover the the menu items below the yellow boxes and the option 4 shoots off down the page whn u click option 1 and 2, hmmm...

y can't life be simple??

:eek:)

i know the menu i have already can work in all borwsers, as i had it goin b4, its just when i added the invisible arrows that become visable on click...

i'll keep trying, thx again!!!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
607
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
1K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
250
Daniel K
Daniel K
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
597
JScannell
JScannell
JScannell
  • Locked
  • Question
Google Chrome doesn't load my javascript files
Replies
1
Views
429
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top