homepage Welcome to WebmasterWorld Guest from 174.129.76.87
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
anyone can help with this simple javascript please?
fi5hbone

5+ Year Member



 
Msg#: 4045 posted 6:01 pm on Jul 15, 2005 (gmt 0)

hi there,
the sidebar of my site is getting too long and i would like to do a tree menu. however, the one you guys pointed to me wasnt what i wanted. what i want works like this:i click on the main category, it brings me to a page and ONLY the articles for the site are expanded in the sidebar.click on another main category and it brings me to another page and ONLY the articles for that category expands in the sidebar, the rest will be closed. so basically, as long as you are reading an article from the family category, only the famliy articles appear in the sidebar. if you are reading an article from the health category, only the health articles appear in the sidebar. it's very similar to the one in about.com.

does anyone know how to do it?

 

webwitch

5+ Year Member



 
Msg#: 4045 posted 7:04 pm on Jul 15, 2005 (gmt 0)

the logic goes something like this:

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

lutherman

5+ Year Member



 
Msg#: 4045 posted 7:14 pm on Jul 15, 2005 (gmt 0)


<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 =)

fi5hbone

5+ Year Member



 
Msg#: 4045 posted 8:36 pm on Jul 15, 2005 (gmt 0)

hi lutherman,
it does not work on multiple pages? i the body sectino to suit my pages. i set the link on category 1 to go to abc.html. however when it reaches at abc.html, the menu closes up immediately. it like opens and closes immediately. am i supposed to modify it on each category page?

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!

fi5hbone

5+ Year Member



 
Msg#: 4045 posted 8:56 pm on Jul 15, 2005 (gmt 0)

<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='cat1.html' 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>

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?

lutherman

5+ Year Member



 
Msg#: 4045 posted 11:26 pm on Jul 15, 2005 (gmt 0)

sorry i reckon i totally misunderstood ye heh

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?

lutherman

5+ Year Member



 
Msg#: 4045 posted 12:04 am on Jul 16, 2005 (gmt 0)

if you just want some repeatable javascript to call once into each of your docs ... and each doc will contain the sidebar...

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>


fi5hbone

5+ Year Member



 
Msg#: 4045 posted 6:04 am on Jul 16, 2005 (gmt 0)

hi there,
sorry if i wasn't clear and made you go through all that trouble. really sorry.

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?

fi5hbone

5+ Year Member



 
Msg#: 4045 posted 9:00 am on Jul 16, 2005 (gmt 0)

hey lutherman, you're a genius! the latest code worked! the one with the javascript. if i could be so bold to ask if it's possible to give the user an option to close the menu by clicking on the current main cat again? im so sorry for being such a bother and it's ok if it's too troublesome.

you're a real godsent!

lutherman

5+ Year Member



 
Msg#: 4045 posted 12:58 pm on Jul 16, 2005 (gmt 0)

No problem at all, fi5hbone.

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>");

fi5hbone

5+ Year Member



 
Msg#: 4045 posted 7:15 am on Jul 17, 2005 (gmt 0)

im just wondering if you could add css styles to the javascript? i've fiddled around with the script and i keep messing it up. it's like im trying to add little bullets to the health1.html and health2.html but it just doesnt work.man it's tough.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved