Hallo all,
I’m picking my way through what should be a simple hide/show page, except I found myself writing a bazillion for loops and then having trouble accessing the right groupsOfThingies…
I have an HTML structure like so
<div id="beschrijflinks">
<h2>Main header</h2>
<div> <--I might not need this element-->
<h3>Sub Header OVERALL</h3>
<ul>A nameless list</ul>
<h3>Sub Header</h3>
<ul>A nameless list</ul>
etc...
</div>
<h2>Main Header</h2>
<div>
<h3>Sub Header OVERALL</h3>
<ul>A nameless list</ul>
<h3>Sub Header</h3>
<ul>A nameless list</ul>
..etc
</div>
<h2>Main Header</h2>
<div>
<h3>Sub Header OVERALL</h3>
<ul>A nameless list</ul>
<h3>Sub Header</h3>
<ul>A nameless list</ul>
...etc
</div>
</div>
This is how I’d write that HTML as a static page, so that’s what I’m starting with. This is not a pure <ul> setup like I found at Dynamic Drive.
Now the guy managing the site wants only the h2 Main Headers to be seen on the page by default, and that when people click one of them, the h3 Sub Headers who come after them appear. So clicking on the first h2 should make the h3’s inside the div that follows that h2 appear, but none of the others.
If the users then click on the FIRST h3 Sub Header (called “overall”), everything else appears (the lists underneath ALL the h3 Sub Headers in that section). For this reason I added a nameless div to wrap all h3’s who come after each h2, thinking that might be a way to separate the groupsOfThingies.
Otherwise, if any of the other h3 Sub Headers are clicked, only the list that sits under them appears.
I’ve decided to have everyone be on the page by default, and onLoad a class of “verberg” (hidden) is added dynamically to those who need to hide. This positions them absolutely and pulls them offscreen, meaning they are accessible to screen readers and Lynx users.
The h2 Main Headers and the h3 Sub Headers are also given child anchors inside so keyboarders will be able to use onclick (but maybe a better event should be used?).
However when trying to do all of this, I end up with a bunch of loops looping through getElementByTagNames, and going through teh Googles I find these are kinda like arrays but not really. Ok. So I found nodeList.nextNode but that’s not quite what I need to do.
I don’t know how to say, when the “a” inside x is clicked, then the bunch-of-elements who come directly afterwards in the source get Stuff Done To Them. Instead, when I gave it a try, I got
clicking on any h2 makes just the last set of h3’s appear.
I’m pretty sure I’m writing myself into a hole with all these nested for loops, but I’m not sure how to give names to these nodeLists without looping (I need to be able to reference them somehow and I thought, since the first h3 of the group always does something extra special, that it would be useful somewhere to be able to reference it like h3[0] or something), and I’m not sure how to do something like nextSibling (not nextNode) with these things.
So, I’m looking for any online tutorials (written in this century cause I find plenty of one integrated into the HTML with LANGUAGE=JAVASCRIPT and a href=“javascript(void)”) that show how to reference groups of thingies who come after or in between other groups of thingies in source.
I have been bouncing around https://developer.mozilla.org/en/DOM/ and trying to make sure I ignore all the gecko-specific stuff and flipping through the Javascript Anthology but I’m missing something important and not getting in the right area. Every time I try to start from the beginning and try to understand the basics, the manager of this site keeps asking me when the page will be finished. ARG. It’ll be finished when I know what the heck I’m doing!! Which right now looks like next year!
The half-assed code I have currently (directly in the HTML for now):
<script type="text/javascript">
function addClass(target, classValue) {
var pattern = new RegExp("(^| )" + classValue + "( |$)");
if (!pattern.test(target.className)) {
if (target.className == "") {
target.className = classValue;
}
else {
target.className =+ " " + classValue;
}
}
return true;
}
function removeClass(target, classValue) {
var removedClass = target.className;
var pattern = new RegExp("(^| )" + classValue + "( |$)");
removedClass = removedClass.replace(pattern, "$1");
removedClass = removedClass.replace(/ $/, "");
target.className = removedClass;
return true;
}
function createAnchor(text, href) {
var anchor = document.createElement("a");
anchor.appendChild(document.createTextNode(text));
anchor.href = "#" + href;
return anchor;
}
//MY CODE
var parent = document.getElementById("beschrijflinks"),
h2 = parent.getElementsByTagName("h2"),
div = parent.getElementsByTagName("div");
var h2Length = h2.length;
var divLength = div.length;
for (var i=0; i < h2Length; i++) {
var a = createAnchor("+", "foo");
h2[i].appendChild(a);
}
for (var j=0; j < divLength; j++) {
var h3 = div[j].getElementsByTagName("h3");
var h3Length = h3.length;
for (var k=0; k < h3Length; k++) {
var a = createAnchor("+", "foo");
h3[k].appendChild(a);
h3[k].setAttribute("class", "verberg");
}
var lijst = div[j].getElementsByTagName("ul");
var lijstLength = lijst.length;
for (var l=0; l < lijstLength; l++) {
lijst[l].setAttribute("class", "verberg");
}
}
</script>
The add and removeClass thingie are for when I can figure out how to just toggle the classes on and off. The class is already described in the CSS, it just needs to be dynamically added and removed when users Do Stuff. I don’t have the onclick in there because it was failing horribly. Because everything gets defined inside those for loops my onclick stuff was ending up horribly nested inside just to access the variables I’ve made, and then nothing seems to work with nextSibling (h2.nextSibling isn’t equaling the div, and I can’t manually say div[0] div[1] div[2] etc but I think this is the direction I need to go to).
I need a good kick in the head. I need to know where to search for how to do this.
