Login
Important alert: (current site time 7/15/2013 1:10:48 PM EDT)
 

VB icon

DHTML Tree

 Email
Submitted on: 8/8/2000 12:36:02 AM
By: Tim Fischer 
Level: Intermediate
User Rating: By 2 Users
Compatibility: JavaScript
Views: 19784
author picture
(About the author)
 
     Uses DHTML, CSS, and JavaScript to make a Navagation Tree. Small Code.

 
code:
Can't Copy and Paste this?
Click here for a copy-and-paste friendly version of this code!
 
Terms of Agreement:   
By using this code, you agree to the following terms...   
  1. You may use this code in your own programs (and may compile it into a program and distribute it in compiled format for languages that allow it) freely and with no charge.
  2. You MAY NOT redistribute this code (for example to a web site) without written permission from the original author. Failure to do so is a violation of copyright laws.   
  3. You may link to this code from another website, but ONLY if it is not wrapped in a frame. 
  4. You will abide by any additional copyright restrictions which the author may have placed in the code or code's description. 
				
'**************************************
' Name: DHTML Tree
' Description:Uses DHTML, CSS, and JavaScript to make a Navagation Tree. Small Code.
' By: Tim Fischer
'
' Assumes:Tested only in IE.
'
'This code is copyrighted and has' limited warranties.Please see http://www.Planet-Source-Code.com/vb/scripts/ShowCode.asp?txtCodeId=1912&lngWId=14'for details.'**************************************

<html>
<head>
	<title>Untitled</title>
	<style type="text/css">	.sub{
		visibility: hidden;
		display: none;
	}
 </style>
	
	<script language="JavaScript">
		
	function subDisplay(subName) {
	
	if (eval(subName).style.visibility == "hidden"){
	eval(subName).style.visibility = "visible"
	eval(subName).style.display = "list-item"
	eval("img" + subName).src = "folderOpen.gif"
	}else{
	eval(subName).style.visibility = "hidden"
	eval(subName).style.display = "none"
	eval("img" + subName).src = "folderClosed.gif"
	}
	}
	</script>
</head>
<body>
<ul>
<img src="folderClosed.gif" id="imgsub1"> <span onclick="subDisplay('sub1')">Favorites</span>
<ul class="sub" id="sub1">
<img src="folderClosed.gif" id="imgsub2"> <span onclick="subDisplay('sub2')">Music</span><br>
<ul class="sub" id="sub2">
<img src="leaf.gif"> <a href="http://www.napster.com">Napster</a><br>
<img src="leaf.gif"> <a href="http://www.mp3.com">MP3.com</a><br>
<img src="leaf.gif"> <a href="http://www.scour.net">Scour</a><br>
</ul>
<img src="folderClosed.gif" id="imgsub3"> <span onclick="subDisplay('sub3')">Source Code</span><br>
<ul class="sub" id="sub3">
<img src="leaf.gif"> <a href="http://www.planetsourcecode.com">Planet Source Code</a><br>
</ul>
<img src="leaf.gif"> <a href="mailto:tim@bbs-la.com">Tim Fischer</a>
</ul>
</ul>
</body>
</html>

Report Bad Submission
Use this form to tell us if this entry should be deleted (i.e contains no code, is a virus, etc.).
This submission should be removed because:
Your Vote

What do you think of this code (in the Intermediate category)?
(The code with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor (See voting log ...)
 
Other User Comments

8/9/2000 4:41:18 AM: Massimo

Is it possible to have a full working functionnal sample packaged in a zip file ? thanks in advance
(If this comment was disrespectful, please report it.)
 
9/6/2000 8:41:08 AM: Codegrad

Something quirky is going on here. I have put a couple of alert boxes at the top of the subDisplay function to show what subName I am passing and the visibility property of that subName. The first time I click the span, I get the correct subName passed, but there is no visibility property to display. The second time I click, everything works fine. Unfortunately, this means I have to click on the span to
(If this comment was disrespectful, please report it.)
 
9/6/2000 6:42:26 PM: Tim Fischer

I noticed this too. I would like to fix this but at the time am extremly busy. I would greatly appreciate it if you would attempt to fix it. I did work on a fix but unfortunatly lost the code. I remember part of it was using the anchor tag instead of the span. Good luck. -Tim Fischer
(If this comment was disrespectful, please report it.)
 
9/25/2000 8:49:22 AM: Stephane PIAZZA

I've made quite the same programm you made.
I also used a dhtml tree menu, but mine is built with directories.
For your problems, u can search the 'Tree Menu Based on Directories' programm.
Use it with asp or just have a look to the DHTML part (located in menu.asp and script.js).
Don't hesitate to give me your opinion.
Try to put the onClick="subDisplay ...." on a link which look like this < a href="#" onClick="subDisplay(...". It will work evrytime you click on the line
Stephane
(If this comment was disrespectful, please report it.)
 
9/25/2000 11:08:34 PM: Tim Fischer

Thanks Stephane. Im sure everyone apreciates your response. -Tim Fischer
(If this comment was disrespectful, please report it.)
 
10/14/2001 4:33:29 PM: Thomas Catena

I was wondering how I can get more than one base {like favorites} in the code. I am looking for about 4 in total. Any information will be helpful
(If this comment was disrespectful, please report it.)
 
10/20/2006 4:59:55 AM: David Trillo Montero

If you did what Stephane PIAZZA
said, it works!
(If this comment was disrespectful, please report it.)
 
Add Your Feedback
Your feedback will be posted below and an email sent to the author. Please remember that the author was kind enough to share this with you, so any criticisms must be stated politely, or they will be deleted. (For feedback not related to this particular code, please click here instead.)
 

To post feedback, first please login.

Search:

Newest postings for Javascript.

Add this ticker to my site

Daily code email

Click here to join the 'Code of the Day' mailing list!

This site on CD

Over 7,000 submissions on a super fast CD!

Code/Articles

Top Code

Community

Jobs

Other

Goto…

Copyright© 1997-2013 by Exhedra Solutions, Inc. All Rights Reserved.
By using this site you agree to its Terms and Conditions. Planet Source Code™ and the phrase "Dream It. Code It"™ are trademarks of Exhedra Solutions, Inc.