Forum Moderators: open
does anyone know how to do it?
youarehere = the page you're on
rootnode = the home page, or the root node
currentnode = a movable pointer
write a function shownodes() that displays all the children of a node.
As you display a child, check if it is an ancestor of youarehere. If it is, then recurse back into shownodes and "open" that node.
function shownodes(currentnode){
for i=0 to currentnode.children.length{
print nodename[i]
if (isancestor(i,youarehere)){
shownodes(i);
}
}
then start the tree with the root:
shownodes(rootnode)
Building your tree in that way will show:
parents
children
siblings
grandparents
ancestors
It will not show:
cousins
grandchildren
uncles
in-laws
<html><body>
<script language=javascript>
function on(zz) {
document.getElementById(zz).style.visibility = 'visible';
document.getElementById(zz).style.display = 'block';
}
function off(zz) {
document.getElementById(zz).style.visibility = 'hidden';
document.getElementById(zz).style.display = 'none';
}
function closeAll() {
for(i=0;document.getElementById('d'+i);i++) {
off('d'+i);
}
}
</script>
<a href='#' onClick="closeAll();on('d0');">category 1</a><br>
<div id=d0 style="position: relative; visibility: hidden; display: none; left: 20px;">
<a href='#'>somepage</a><br>
<a href='#'>somepage</a><br>
<a href='#'>somepage</a><br>
<a href='#'>somepage</a>
</div>
<a href='#' onClick="closeAll();on('d1');">category 2</a><br>
<div id=d1 style="position: relative; visibility: hidden; display: none; left: 20px;">
<a href='#'>somepage</a><br>
<a href='#'>somepage</a><br>
<a href='#'>somepage</a><br>
<a href='#'>somepage</a>
</div>
<a href='#' onClick="closeAll();on('d2');">category 3</a><br>
<div id=d2 style="position: relative; visibility: hidden; display: none; left: 20px;">
<a href='#'>somepage</a><br>
<a href='#'>somepage</a><br>
<a href='#'>somepage</a><br>
<a href='#'>somepage</a>
</div>
</body></html>
not in its most streamlined form, but is to the point... good luck =)
if it make things clearer, for example if i have 2 main sections, family and health. for the family main page i have family.html and its articles are family1.html and family2.html. for the health main page i have health.html and its articles are health1.html and health2.html. i also have an index.html, the intro page to everything. so on index.html, everything will be closed up. the visitor then decides to visit health. so he clicks on health and goes to health.html. in this instance, the submenu for health opens up and as long as he is in any health pages, only the health menu opens up. so he decides to visit the family page. he clicks on family and brings him to family.html and upon reaching family.html, the health menu is closed and only the family menu opens up. and as long as he is on any of the family pages, only the family menu is open.
hope it helps..
thanks anyway so far to the both of you!
i simplified everything just to experiment. i have these 2 files, index.html and cat1.html. from index.html, and i click on cat1.html, it does go to cat1.html but the menu opens then closes almost immediately! may i know what is wrong?
so you will you have a separate html file for the sidebar? or you want this all on one page?
for a dynamic approach, you could use the 2 frames (side, and index)... you also need the html page that specifies the frames.
side.html would contain the code i posted.
Say that the "health" listing is under the div "d2" and in each of the files that load on the main frame would contain a script snippet something like this at the bottom of the body...
for health.html
<script>
top.window.frames['side'].closeAll();
top.window.frames['side'].on('health');
</script>
or are you wanting to put the side bar in each page separately?
in a javascript file called script.js:
document.write("<style>.sub {position:relative;left:20px;}</style>"+
"<a href='index.html'>main</a><br>");
document.write("<a href='family.html'>family</a><br>");
if (location.href.indexOf('family')!= -1)
document.write("<a class=sub href='family1.html'>family 1</a><br>"+
"<a class=sub href='family2.html'>family 2</a><br>");
document.write("<a href='health.html'>health</a><br>");
if (location.href.indexOf('health')!= -1)
document.write("<a class=sub href='health1.html'>health 1</a><br>"+
"<a class=sub href='health2.html'>health 2</a><br>");
and in the table, div, span or whereever you want the sidebar on each page:
<script src=script.js></script>
i want them all in one file, without the use of frames if it's possible? but i dont really think it's possible with just 1 javascript right?
you're a real godsent!
its common for me (hope its not just me) to toss out a few rough draft ideas if its targetting a specific functionality. also, i coulda waited for more info, but i felt like jumping on it =)
ok - like the last try, but with the expanding divs from the first heheh...
keep the simple script call in all the pages,
we did it that way so you dont have to make changes to any more than 1 file) and simply change the script.js to:
function tog(zz) {
if (document.getElementById(zz).style.visibility!= 'hidden') {
document.getElementById(zz).style.visibility = 'hidden';
document.getElementById(zz).style.display = 'none';
} else {
document.getElementById(zz).style.visibility = 'visible';
document.getElementById(zz).style.display = 'block';
} }
document.write("<style>.sub {position:relative;left:20px;}</style>"+
"<a href='index.html'>main</a><br>");
document.write("<a href='family.html#' onClick=\"tog('df');\">family</a><br>");
if (location.href.indexOf('family')!= -1)
document.write("<div id=df class=sub><a href='family1.html'>family 1</a><br>"+
"<a href='family2.html'>family 2</a></div>");
document.write("<a href='health.html#' onClick=\"tog('dh');\">health</a><br>");
if (location.href.indexOf('health')!= -1)
document.write("<div id=dh class=sub><a href='health1.html'>health 1</a><br>"+
"<a href='health2.html'>health 2</a></div>");
