URL's in tree nav problem (Expert needed)

[Stuz]

I have posted this on the devshed forums below
Please click and follow through.

http://forums.devshed.com/t57619/s.html

Thanks for any help this needs an expert to fix it.

[khalidali63]

Replace the code segment below from your page


var content = ""
content += "<span class='level0' style='font-size:12pt' id='parent'>" + TreeArray[0].fullname +"</span>"
document.write(content)
var newElem, newText, newImg
for (var i = 1; i <= TreeArray.length-1 ; i++){
newImg = document.createElement("img")
newImg.src = TreeArray[i].children == 0 ? "images/null_book.gif" : "images/closed_book.gif"
newImg.style.cursor = TreeArray[i].children == 0 ? "default" : "hand"
newElem = document.createElement("span")
newElem.id = TreeArray[i].id
newElem.className = TreeArray[i].className
newText = document.createTextNode("" + "<a href=\""+TreeArray[i].theurl+"\">" + TreeArray[i].fullname + "</a>")
newElem.appendChild(newImg)
newElem.appendChild(newText)
document.getElementById(TreeArray[i].parent).appendChild(newElem)
navigator.appName == "Netscape" ? newImg.setAttribute("onclick", "swapImage(this); toggle(this)") : newImg.onclick = respond


with the one below


var content = ""
content += "<span class='level0' style='font-size:12pt' id='parent'>" + TreeArray[0].fullname +"</span>"
document.write(content)
var newElem, newText, newImg
for (var i = 1; i <= TreeArray.length-1 ; i++){
newImg = document.createElement("img")
newImg.src = TreeArray[i].children == 0 ? "images/null_book.gif" : "images/closed_book.gif"
newImg.style.cursor = TreeArray[i].children == 0 ? "default" : "hand"
newElem = document.createElement("span")
newElem.id = TreeArray[i].id
newElem.className = TreeArray[i].className;
anchorEl = document.createElement("a");
anchorEl.setAttribute("href",TreeArray[i].theurl)
anchorEl.appendChild(document.createTextNode(TreeArray[i].fullname))
newText = document.createTextNode(TreeArray[i].fullname)
newElem.appendChild(newImg)
newElem.appendChild(newText)
newElem.appendChild(anchorEl)
document.getElementById(TreeArray[i].parent).appendChild(newElem)
navigator.appName == "Netscape" ? newImg.setAttribute("onclick", "swapImage(this); toggle(this)") : newImg.onclick = respond


You still require some serious tweaking though.

:D

Cheers

Khalid

[Stuz]

Thanks alot that works great I can sort out the tweaks I am sure.

Once its finished Ill strip out the names and so on and post it here for all.

[khalidali63]

:D
Sounds great..

Cheers

Khalid

[Stuz]

After some tweaking I have got the code to work the way I like
All I need to so now is get the CSS to work on the links in the tree menu.

Links to the HTML and the CSS are below Hmmm.
When the text in the tree is not a HYPERLINK the CSS styles work however once made into HYPERLINKS the CSS styling dissapears.

I have added a.classname:hover etc to the style sheet but cannot seem to get this to work.

Thanks again.

I have uploaded the latest versions of the files and will continue to do so until its complete.

http://freespace.virgin.net/badbad.granny/tree.html
http://freespace.virgin.net/badbad.granny/tree.css

[khalidali63]

Did you mean something like this

http://68.145.35.86/temp/TreeProblem.html

Actually I am not sure what exactly was your concern..

:cool:

Cheers

Khalid

[Stuz]

Kind of Ill explain.

Before the tree names where not links the style sheet I attached made each branch a different color.

So the top was purple for the sake of arguing and then the next brance was black respectivly.

Once the names where made into Hyperlinks the CSS styling dissapeared.

In the style sheet the oppropriate a:hover commands are there so in theroy the urls should be stylised.

the class name comes from appendChild() on the HTML page.

Since chaging it from plain text to a URL the appendChild() does not update the CSS.

Thats the best I can explain it im affraid.

Below is the two versions.

The second version is how I want my links to be displayed.
When you click a book to open the next level the text in that next level is a differant colour if that level has a child the color of that childs text is the same as first color.

look at the tree 1 and you will see what I mean

Our edited code: Tree

http://freespace.virgin.net/badbad.granny/tree.html
http://freespace.virgin.net/badbad.granny/tree.css

The Original source: Tree1

http://freespace.virgin.net/badbad.granny/tree1.html
http://freespace.virgin.net/badbad.granny/tree1.css

[khalidali63]

I think what you'd need to do is add a separate class attribute for links,since class set for span is not effecting the link.

Just a suggestion

Cheers

Khalid

[Stuz]

Im not sure how to fix this.

When you say class what code do I use please remeber that I am a begginer.

Even though I do know what a class is I am not sure how to make a new container for the URL's any sample code would be appeciated.

Thanks again

[khalidali63]

See if this is close..

I am actually not quite sure what exactly you want it to look like(its sunday..I guess)

n e ways take a look

http://68.145.35.86/temp/TreeProblem.html

Cheers

Khalid

[Stuz]

Thats exactly correct.

I managed to get it to work last night.

I noticed after looking at your source that you have done it a differant way to me.

not that its important as both ways work.

I assume your way is shorter as I had to reenter lots of .level(x) etc in my style sheet to make it work.

the lines

if(document.all){
newElem.className = TreeArray[i].className;
}else{
newElem.setAttribute("class",TreeArray[i].className);

I dident use them I made a seperate class in the CSS for each style level.

this worked.

I dont understand how the code above works.

Still with out you I would have had a lot more trouble trying to get this finished we have both used differant ways to achive the same thing and I thank you for your time.

Please take a look at the final tree to see what differs.

I am going to add a photo gallery so that all people have a picture and some information document.write(into a new pop window).

This page will load in a redirect.html to view its source now please right click view source on the lower part of the page.

Once next upgrade is complete Ill post here again so that if people would like to use the script they can.

Ill zip up all files now and upload them.

Thanks again been great working with you.