on load

]|V|[agnus

10-07-2004, 06:44 AM

http://sethrasmussen.com/lyndale/dandelion/

In the sidebar, I've got submenus that are contained within nested <dl>s. These <dl>s are marked with the class "submenu".

I have this code to loop over all <dl>s, grab the ones with the appropriate class, and hide their <dd> offspring when the page loads:

function initSidebarSubs() {
var dls = document.getElementsByTagName("dl");
for (i=0;i<dls.length;i++) {
if (dls[i].className=="submenu") {
var kids = dls[i].childNodes;
for (i=0;i<kids.length;i++) {
if (kids[i].nodeName=="DD") {
kids[i].style.display = "none";
}
}
}
}
}

It works for the first <dl class="submenu"> on the page, but not the second one. :confused:

***

This is quite another issue entirely, but I am also trying to figure out how to do the main navigation submenus without inline event handlers, but I am not groking the other methods for doing such a thing for some reason. Can anybody point me to some good resources? Perhaps an example of what I'm trying to accomplish?

hemebond

10-07-2004, 08:13 AM

hide all dd elements<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>45701</title>

</head>
<body>
<dl class="submenu">
<dt>dt</dt>
<dd>dd</dd>
</dl>
<dl class="submenu">
<dt>dt</dt>
<dd>dd</dd>
</dl>
</body>
<script type="text/javascript">
var list = document.getElementsByTagName('dl');
for(var i = 0; i < list.length; i++)
{
if(list[i].className != 'submenu')
{
continue;
}
var temp = list[i].getElementsByTagName('dd');
for(var j = 0; j < temp.length; j++)
{
temp[j].style.display = 'none';
}
}
</script>
</html>use classes to toggle visibility on click<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>45701</title>

<style type="text/css">
.sub_closed dd {
display:none;
}
.sub_open dd {
display:block;
}
</style>
</head>
<body>
<dl>
<dt>dt</dt>
<dd>dd</dd>
</dl>
</body>
<script type="text/javascript">
var list = document.getElementsByTagName('dl');
for(var i = 0; i < list.length; i++)
{
list[i].className = 'sub_closed';
if(window.ie)
{
list[i].onclick = toggle;
}
else
{
list[i].addEventListener('click',toggle,true);
}
}

function toggle(e)
{
var el = (window.ie) ? this : e.currentTarget;
el.className = (el.className == 'sub_closed') ? 'sub_open' : 'sub_closed';
}
</script>
</html>

]|V|[agnus

10-07-2004, 04:45 PM

I'll look at those, but it'd be helpful if you could explain why my solution isn't working. If it's unsound code, that's one thing, but if it's not, I'd rather investigate why it doesn't work first.

]|V|[agnus

10-07-2004, 04:53 PM

Your example using getElementsByTagName("dd") within' the appropriate dl got me in the right direction. I simply changed my existing function to this:

function initSidebarSubs() {
var dls = document.getElementsByTagName("dl");
for (i=0;i<dls.length;i++) {
if (dls[i].className=="submenu") {
var dds = dls[i].getElementsByTagName("dd");
for(j=0;j<dds.length;j++){dds[j].style.display="none";}
}
}
}

lavalamp

10-16-2004, 04:52 PM

The only problem with your original function was that you were using the variable i in both for loops.