Cross-Browser Menu Now Working, BUT Now Have FireFox Refresh Loop [Archive]

paulr

10-12-2005, 08:19 PM

Ok, after mucking around some more, I finally have my menu tree working across the appropriate browsers, having figured out how to migrate from IE specific code to more generic code.

Unfortunately, I have an issue where everything appears to work, but in FireFox, the hourglass over the menu tree stays "busy" after a Refresh indicating to me that the script is continuing to run without end. The initial load of the file does not stay "busy", it only happens after a Refresh of the FireFox browser and the menu continues to work properly.

Can anyone see where I am leading myself into this loop even while appearing to work?

Here is the script:

var head="display:''";

function change(t){
t = (t) ? t : window.event ? window.event : null;
if (!t) return;
if(!document.all) {
document.all = document.getElementsByTagName('*');
var ti, i = 0;
while (ti = document.all.item(i))
ti.sourceIndex = i++;
}
var tel, tid;
tel = (t.target) ? t.target : t.srcElement;
tid = tel.id;
if (tid=="foldheader") {
var srcIndex = tel.sourceIndex;
var nested = document.all[srcIndex+1];
if (nested.style.display=="none") {
nested.style.display='';
}
else {
nested.style.display="none";
}
}
}

document.onclick=change;

----------------------------------------------------------------

This is the HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Menu</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="menu.css" />

</head>

<body>

<script type="text/javascript" src="menu.js"></script>

<div class=navmenu id="box1" style="z-index:2">
<ul>
<li id="foldheader">News</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.abcnews.com">ABC News</a></li>
<li><a href="http://www.vancouversun.com">Vancouver Sun</a></li>
</ul>

<li id="foldheader">Games</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.gamespot.com">GameSpot</a></li>
<li><a href="http://www.happypuppy.com">Happy Puppy</a></li>
<li><a href="http://www.gamecenter.com">Game Center</a></li>
</ul>

<li id="foldheader">Software</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.download.com">outer 1</a></li>
<li><a href="http://www.hotfiles.com">outer 2</a></li>
<li id="foldheader">Nested</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.windows95.com">nested 1</a></li>
<li><a href="http://www.shareware.com">nested 2</a></li>
</ul>
<li><a href="http://www.windows95.com">outer 3</a></li>
<li><a href="http://www.shareware.com">outer 4</a></li>
</ul>
</ul>
</div>

</body>

</html>

----------------------------------------------------------------

Here is the CSS:

.navmenu
{
text-align:left;
font-size; 85%;
background:#e6e6fa;
border-left: solid thin white;
position:absolute;
visibility:show;
}

h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}

h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 120%;
color: #333366;
}

h2{
font-size: 114%;
color: #333366;
}

h3{
font-size: 100%;
color: #996600;
}

h4{
font-size: 100%;
font-weight: normal;
color: #996600;
}

h5{
font-size: 100%;
color: #996600;
}

ul{
font-size: 90%;
list-style-type: none;
margin-left: 5%;
}

a:link, a:visited, a:hover {
color: #333399;
text-decoration: none;
}

a:hover {
text-decoration: underline;
color: #333366;
background: #CCCCCC;
}

pccode

10-13-2005, 10:11 PM

Let me preface this post by saying that your script does not have a refresh problem in the browser I'm using. I tested your script in the latest beta version of Firefox (1.5b2) and I didn't receive any problems with it refreshing. However, I did notice a few errors that may be contributing to the problem in other versions of firefox.

.navmenu
//before change
font-size; 85%;
//after change
font-size: 85%;

.navmenu
//before change
visibility:show;
//after change
visibility:visible;

//firefox does not support the hand option
//before change


//after change
#foldheader { cursor: url("fold.gif"), crosshair; font-weight:bold;}
#foldinglist A { cursor: url("list.gif"), crosshair; }
//make sure you remove the comment tags as well 
//without the A included, the default cursor will be used on links

//remove all occurrences of
style=&{head};