IE 6: revealing all onload

[Lydia]

I'm new to DOM and javascripting and have constructed a hide/show menu. I can't find a way to keep IE6 from revealing all the sub-lists onload. The code (inspired by PPK and Jeremy Keith's recent books) follows:

window.onload = function () {
var topnav = document.getElementById ("navmain");
var parent = document.getElementsByTagName("ul");
for (var i=0;i<parent.length;i++) {
if (parent[i].className != "section") continue;
parent[i].style.display = "none";
var header = parent[i].previousSibling;
if (header.nodeType != 1)
header = header.previousSibling;
header.relatedTag = parent[i];
header.onclick = openClose;
}
}
function openClose () {
var currentValue = this.relatedTag.style.display;
var newValue = (currentValue == "none") ? "block" : "none";
this.relatedTag.style.display = newValue;
}
Markup:
<div id="navmain" class="clearfix">
<ul><li><h4>Markets</h4>
<ul class="section">
<li><a href="/corporate/">Corporate</a></li>
<li><a href="/govt/">Govt/Agency</a></li>
<li><a href="/municipal/">Municipal</a></li>
<li><a href="/mbsabs/">MBS/ABS/CDO</a></li>
<li><a href="/funding/">Funding</a></li>
</ul>
</li></ul>
</div>


Hoping for some simple solution, but all advice is welcome.

[Basscyst]

In your stylesheet try putting something like:


#navmain ul ul
{
display:none;
}

or

.section
{
display:none;
}


This way the child uls will be hidden prior to load.

Basscyst

[Lydia]

Dear Basscyst:
Thank you for the suggestion. I appreciate your speedy reply.
I am hoping to keep form and function fully separate - unless it is impossible! Should I have no luck controlling IE, I may have to resort to using CSS but I'll still have to keep all elements accessible and { display: none } hides information completely from non-Javascript enabled browsers, handheld devices and screen readers.

[Basscyst]

var css=document.createElement('link');
css.setAttribute("rel","stylesheet");
css.setAttribute("href","javaScriptOnly.css");
css.setAttribute("type","text/css");
document.getElementsByTagName('head')[0].appendChild(css);


This way the stylesheet is only loaded if javascript is enabled.

If you are worried about screen readers try using something like this:


.hidden {
height: 0;
width: 0;
overflow: hidden;
position: absolute;
}


Instead of display:none;

Basscyst

[Lydia]

Thank you again!

I have created two sample pages, one adding the alternate IE-only css via the script you provided (http://design.gfma.com/sifmaChanges/sifmaNav2.html) and one in the markup (http://design.gfma.com/sifmaChanges/sifmaNav.html), with different results. Using your script the subnav gets stuck "open" and using an HTML link it won't "open" at all.

In addition, if I replace the CSS you provided with <display:none;> as you originally suggested, the subnav is unavailable with JS off, though fine otherwise.

I really appreciate your trying to help with this. I'm starting to wonder if I don't need to use a more robust Javascript to control the hide/show function, though I am not equipped to produce it.

[Basscyst]

.js

/* Inspiration from:
ppk on javascript www.quirksmode.org
jeremy keith DOM Scripting domscripting.com */

// help from Basscyst at CodingForums.com
var css=document.createElement('link');
css.setAttribute("rel","stylesheet");
css.setAttribute("href","http://design.gfma.com/sifmaScripts/ie.css");
css.setAttribute("type","text/css");
document.getElementsByTagName('head')[0].appendChild(css);

window.onload = function () {
var topnav = document.getElementById("navmain");
var parent = document.getElementsByTagName("ul");
for (var i=0;i<parent.length;i++) {
if (parent[i].className != "section") continue;
parent[i].className= "section";
var header = parent[i].previousSibling;
if (header.nodeType != 1)
header = header.previousSibling;
header.relatedTag = parent[i];
header.onclick = openClose;
}
}
function openClose () {
var currentValue = this.relatedTag.className;
var newValue = (currentValue == "section") ? "" : "section";
this.relatedTag.className = newValue;

/* if this.relatedTag.style.display = "block"
and another one is clicked,
close the first
and open the next

Eliz suggestion:
onload and each time openClose is run have all parent[i].style.display = "none"; */
}


html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>sifmaNav</title>
<link rel="stylesheet" type="text/css" href="http://design.gfma.com/sifmaScripts/sifmaNav.css" media="screen" />
<style type="text/css">
</style>
<script src="newnav2.js" type="text/javascript"></script>
</head>

<body>
<!-- This is the left side of the page -->
<div id="leftbar">
<!-- primary navigation --><div id="navmain" class="clearfix">
<ul><li><h4>Markets</h4>
<ul class="section"><li><a href="/corporate/">Corporate</a></li>
<li><a href="/govt/">Govt/Agency</a></li>
<li><a href="/municipal/">Municipal</a></li>
<li><a href="/mbsabs/">MBS/ABS/CDO</a></li>
<li><a href="/funding/">Funding</a></li></ul>
</li>
<li><h4>Regions</h4>
<ul class="section"><li><a href="/europe/">Europe</a></li>
<li><a href="/USA/">USA</a></li></ul>
</li>
<li><h4>Focus Areas</h4>
<ul class="section"><li><a href="/continuingeducation/">Continuing Education</a></li>
<li><a href="/legal/">Legal/Regulatory</a></li>
<li><a href="/legislativeIssues/">Legislative</a></li>
<li><a href="/marketpractices/">Market Practices</a></li>
<li><a href="/regionaldealers/">Regional Dealers</a></li>
<li><a href="/technology/">Tech/Ops</a></li>
<li><a href="/BCP">Business Continuity</a></li>
<li><a href="/nextstars/">NextStars Perspective</a></li></ul>
</li>
<li><ul><li><h4>Most Popular Pages</h4>
<ul class="section"><li><a href="/story.asp?id=324">Swap Index</a></li>
<li><a href="/story.asp?id=498">MBS Settlement Dates</a></li>
<li><a href="/story.asp?id=1278">MBS Prepayment Projections</a></li>
<li><a href="/research_all.asp?catid=36">Statistical Tables</a></li>
<li><a href="/research_all.asp?catid=37">Research Reports</a></li>
<li><a href="/story.asp?id=1494">eCommerce Survey</a></li></ul>
</li>
<li><h4>About Us</h4>
<ul class="section"><li><a href="/story.asp?id=970">What We Do</a></li>
<li><a href="/story.asp?id=1624">Board</a></li>
<li><a href="/private/committees.asp"><img src="/graphics/padlock11px.gif" alt="password protected area" />Committees</a></li>
<li><a href="/members.asp">Members</a></li>
<li><a href="/story.asp?id=785">Staff</a></li>
<li><a href="http://www.bondmarkets.com/careers">Careers at TBMA</a></li>
<li><a href="/story.asp?id=782">Membership</a></li>
<li><a href="/Report2004/letter04.shtml">Annual Report</a></li>
<li><a href="/private/story.asp?id=430"><img src="/graphics/padlock11px.gif" alt="password protected area" />Bond PAC</a></li></ul>
</li>
<li><h4>Our Other Web Sites</h4>
<ul class="section"><li><a href="http://www.investinginbonds.com">Investing In Bonds . com</a></li>
<li><a href="http://www.tomorrowsMoney.org">Tomorrows Money . org</a></li>
<li><a href="http://www.ahorrando.org">Ahorrando . org</a></li>
<li><a href="http://ppf.bondmarkets.com">Public Policy Forum</a></li>
<li><a href="http://www.americansecuritization.com">American Securitization Forum</a></li>
<li><a href="http://www.europeansecuritisation.com">European Securitisation Forum</a></li>
<li><a href="http://www.theassetmanager.com">The Asset Managers Forum</a></li>
<li><a href="http://www.bondmarkets.org">The Bond Market Foundation</a></li></ul>
</li></ul>
</li></ul>
</div>
<!-- end navmain --></div>

</body>

</html>


css

#navmain ul.section
{ height: 0;
width: 0;
overflow: hidden;
position: absolute;
}


Working Example (http://www.bidabulk.com/sifmanav2.html)

Cheers,
Basscyst

[Lydia]

Wow - thank you so much. It took a finetooth comb for me to figure out what the changes were - reviewing the code in that way was very useful. It does indeed work in IE,
BUT...
now it's busted it Safari!
I'm searching for a fix - there is probably a Safari hack I'll need to add into the stylesheet for that browser.

I am very grateful for your all your help and for being a good teacher as well. If you weren't on the other side of the country I'd take you out for a beer but for now please accept my appreciation long-distance.