Tree, Simple tree, damn -- it's all I want Options

[tharpdevenport]

I've Googled to death. I either get stuff too complicated, "Demo"s that hide the surce code, ones you have to buy or download, ones for people who know what they are doing and thusly don't need it all laid out for them.

I no nothing about DHTML or javascript. All I want -- without having to learn -- is what you see on the left here:

http://dhtml-menu.com/tree-examples/tree-menuxp.html


I already have the + and - symbols created and ready.

I want a tree menu that looks like that, except no pictures (with the exception of + and -).

Basic. That's all. Damn it's pissing me off. Must have looked in all hte wrong places, right?

[Christian J]

Will this one do? http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

[tharpdevenport]

It should ... how the heck do I use the images I have created, instead of the crappy ones they got there?
When you click on the Plus box and get the minus. I got those two images already.

[Christian J]

From viewing the image properties I think they are called "open.gif" and "closed.gif".

[tharpdevenport]

I think you severly under estimate my ability at understanding this. ;-)

From all the code I see posted, I don't know what to remove to get rid of the other images, and what to change to put mine in place of them. I don't see simple "open" and "close" -- a phrase I rarely get to use.

[Darin McGrew]

Go to http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

Under Step 2, follow the link to simpletreemenu.js

Look at lines 4 and 5 of this file.

[tharpdevenport]

I copied the legal use stuff, put the script from the .js file before the </SCRIPT>, then used the code for the BODY and the images aren't showing.

In fact, they are listed with no clicking and the "expand all" and "contract all" aren't working.

???


I'm telling you all -- I don't know what I am doing. :-)

This post has been edited by tharpdevenport: Feb 26 2007, 09:13 PM

[Darin McGrew]

I'm confused. When it says:

Step 2: The above code references a few external files, which you need to save and upload to your webpage directory (right click each file and select "Save As"):

Did you do that?

[Frederiek]

The images are defined in the javascript and applied as background-image through the script.

CODE

ddtreemenu.closefolder="closed.gif" //set image path to "closed" folder image
ddtreemenu.openfolder="open.gif" //set image path to "open" folder image

The CSS file also applies (probably default) background-images:

CODE

background: white url(list.gif) no-repeat left center;

and

CODE

background: white url(closed.gif) no-repeat left 1px;

This means that you have to change the image file names everywhere (.js and .css) to the names of your own images (including the path to them if necessary).


Actually, I have a feeling that the Folding Treeview Menu from javascriptkit.com will be more to your liking. The demo shows three slightly different menu's, from which you can choose. Leave out the dotted line images if you want to.

[Christian J]

Go to http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

Under Step 2, follow the link to simpletreemenu.js

Look at lines 4 and 5 of this file.

Or you could simply right-click the three images shown at step 2 to get their file names, then name your own images the same. This might be simpler than finding & changing the file names in the javascript and CSS files.

[Christian J]

I copied the legal use stuff, put the script from the .js file before the </SCRIPT>

That sounds like you pasted the actual code from the JS file after the legal stuff. But

CODE

<script type="text/javascript" src="simpletreemenu.js">

already tries to load the external file "simpletreemenu.js".

[tharpdevenport]

Yes, I posted the actual code. I thought that's what I should do.

If I remove: src="simpletreemenu.js"

Will it reference the code instead?

[Darin McGrew]

At what point are the instructions provided by Dynamic Drive confusing you?

[tharpdevenport]

I thouht it meant save the code, which was in files that needed to be downloaded.


Anyway, I usually try to go out of my way dealing with java or anything like that, since I have yet to learn it.

[tharpdevenport]

All I have done is serve to confuse myself:

http://rejectedfilmscores.150m.com/WKGC/Archive.html

[Darin McGrew]

A few things I noticed...

• The tag
  CODE
  <link rel="stylesheet" type="text/css" href="simpletree.css" />
  should not be inside <script>...</script>.
• The URL http://rejectedfilmscores.150m.com/WKGC/simpletree.css returns 404 Not Found.
• While http://rejectedfilmscores.150m.com/WKGC/minus.gif exists, http://rejectedfilmscores.150m.com/WKGC/plus.gif returns 404 Not Found.
• The page will be rendered in quirks mode by most browsers.
• Why are you using a Strict doctype declaration if you're using markup that is allowed only in Transitional?
• The online validator also points out some broken HTML structure that you really should fix.

[tharpdevenport]

The first one is from the legal notice area. I jsut copied and pasted like it said.

Second: simpletree.css -- I put the code direct into the page, foregoing the file.

Third: PLUS is showing up fine for me
http://rejectedfilmscores.150m.com/WKGC/plus.GIF


As to the DocType: I have NO IDEA what to use. Someone gave me a link, here, and it didn't help me at all on which to choose. I asked which I should use, and was told STRICT. That is why.

[Darin McGrew]

Third: PLUS is showing up fine for me
http://rejectedfilmscores.150m.com/WKGC/plus.GIF

URLs are case sensitive. http://rejectedfilmscores.150m.com/WKGC/plus.gif is not the same as http://rejectedfilmscores.150m.com/WKGC/plus.GIF

[tharpdevenport]

Fixed it, but still not working, as can be seen. And I fixed the DocType, and removed the extra table to see code more clearly.


It's amazing it's turning out to be this hard for me.

[Darin McGrew]

It's amazing it's turning out to be this hard for me.

I don't find it amazing:

All I want -- without having to learn -- is [...]