javascript tree control problem... 1

[shnazz]

My tree always reverts back to it's initial state whenever I click on a link. What it should do is display the tree as it was when I clicked on the link

Any help is appreciated. I would like to avoid putting information in the querystring to solve this problem (though I can't even figure out how to solve this issue like that)

Here is a snippet of my code:
<script language="JavaScript">
function showBranch(branch) {
var objBranch = document.getElementById(branch).style;
if(objBranch.display=="none")
objBranch.display="block";
else
objBranch.display="none";
}
</script>

<div class="nav_bar" onClick="showBranch('branch1');">
Employees</div>
<span class="nav_branch" id="branch1" >
<a href="ContList.php">Contact List</a>
<a href="EmpInfo.php">Employee Info</a>
</span>
</div>

 

[vbkris]

>><div class="nav_bar" onClick="showBranch('branch1');">

put the onclick event in the right Link
e.g:
<a href="ContList.php" onClick="showBranch('branch1');">Contact List</a>
<a href="EmpInfo.php">Employee Info</a>

reomove it from the DIV tag...

Known is handfull, Unknown is worldfull

 

[shnazz]

that doesn't work because in order to get to the branch with "Contact List" and "Employee Info", you have to click on "Employees".

For example lets say my menu looks like this:
---------
Employees
---------
After you click on Employees it should look like this:
---------------
Employees
Contact List
Employee Info
---------------
My problem is that when I click on the "Contact List" link, my tree navigation returns to just saying "Employees".

I did try putting "Employees" in a href=# tag with the onclick instead of in the div tag, but that did not work as well

please help!

 

[vbkris]

try:
href="javascript:;"

Known is handfull, Unknown is worldfull

 

[theboyhope]

Loop through the links in your navigation DIV and match the href against the current URL, use parentNode however many times to go back up the tree a bit and set display to block.

 

[vbkris]

but what confuses me is how can the tree collapse without the function being called? it shouldnt...

Known is handfull, Unknown is worldfull

 

[theboyhope]

But he's going to another page so it all goes back to the initial settings. At least, that's how I understood it.

There are a number of ways he could do this but checking the links href values against the current URL seems the least invasive given that he wants to avoid the querystring.

 

[vbkris]

>>But he's going to another page

that other page surely would not have the same content (my assumption)...

Known is handfull, Unknown is worldfull

 

[shnazz]

vbkris: I have a stylesheet for the branch that sets display to none. If I don't do this then my tree opens up fully everytime.

theboyhope: I don't quite understand what you mean here. Please forgive as I am new to all of this.

 

[vbkris]

thats not problem shnazz,
when the page loads the tree is hidden right?
when u click on the DIV the tree expands right?

for it to collapse the syle property must again be set back to "none", so the logcal explanation is that showBranch is being called unnecessariy, thats what i am trying to point out, ur code seems correct...

Known is handfull, Unknown is worldfull

 

[shnazz]

Everything does go back to its initial settings as boyhope says. I don't have any frames in the site I am coding, I am using includes. The other page has the same navigation include and so all of the navigational content is the same.

I could modify each page to display a certain block based on where it fits in the hierarchy, however I don't find this to be an optimal solution. However, if it's the best solution then I would go with it.

 

[shnazz]

>when the page loads the tree is hidden right?
>when u click on the DIV the tree expands right?

yes and yes.

>for it to collapse the syle property must again be set >back to "none",

If I stay on the same page and clock on the tree, then it collapses because of the conditional statement in showBranch.

If I change pages, I have a feeling it loses all the previous javascript information and reverts back to looking at the stylesheet which sets display to none. I was under the impression that in javascript one does not need to use the querystring for such things.

theboyhope: still trying to figure out you said earlier

 

[theboyhope]

I meant something like below. (NB - example assumes the current page is called 'test.html'.)

<style>

.nav_branch { display: none; }

</style>

<script language="JavaScript">

	window.onload = function() {
 
		navSection = document.getElementById( "navigation" ); 
		navLinks = navSection.getElementsByTagName( "A" );

		for( var i=0; i < navLinks.length; i++ ) {

			if( document.URL.indexOf( navLinks[ i ].href ) != -1 ) {

				navParent = navLinks[ i ].parentNode;
				navParent.style.display = "block";
			}
		}
	}
</script>

<div id="navigation">
<div class="nav_bar" onClick="showBranch('branch1');">
  Employees</div>
  <span class="nav_branch" id="branch1" >
    <a href="test.html">Contact List</a>
    <a href="EmpInfo.php">Employee Info</a>
  </span>
</div>
</div>

Alternatively, you could use body IDs and specify which branch should be visible in your style sheet.

HTH.

 

[theboyhope]

Oh, and you should stick a break statement in once there has been a match. No point in checking the rest of the links.

 

[theboyhope]

One more addition: it won't work as it is until you upload it because it ends up trying to match 'file://C:\... etc' against 'file:///C:/... etc'. It'll work on the server though, or you could just tweak it a bit to work locally.

 

[shnazz]

Thanks alot! I tweaked it to work locally, though I think I may add it to the server in the future.