...

View Full Version : Folding Tree Menu target help



pinkysmallz
02-12-2007, 11:37 PM
I am using the Folding Treeview Menu script from http://www.javascriptkit.com/script/treeview/ and got it working and it's a wonderful script. However I just have one question I can't seem to figure out... I am using it in a page with an iFrame and would like to target the links from the treeview menu into the iFrame. Since this doesn't come with any documentation I am really having a hard time with it and I'm not so much of a programmer anymore so it would be difficult for me to really figure this out. Has anyone does this before? I'd really appreciate any help I can get.

pinkysmallz
02-13-2007, 01:24 AM
Well in case anyone else was wondering, I ended up solving the issue myself. I went into the jktreeview.js file and changed

jktreeview.prototype.addItem=function(itemText, noderef, href){
var noderef=(typeof noderef!="undefined" && noderef!="")? noderef : this.treetop.getRoot()
var treebranch=new YAHOO.widget.TextNode(itemText, noderef, false)
if (typeof href!="undefined")
treebranch.href=href
return treebranch
}
to

jktreeview.prototype.addItem=function(itemText, noderef, href, target){
var noderef=(typeof noderef!="undefined" && noderef!="")? noderef : this.treetop.getRoot()
var treebranch=new YAHOO.widget.TextNode(itemText, noderef, false)
if (typeof href!="undefined")
treebranch.href=href
if (typeof target!="undefined")
treebranch.target=target
return treebranch
}
I originally tried changing the treeview.js to just have the target be the iFrame I wanted, but it didn't work. So by passing it along from jktreeview.js to treeview.js I was able to get it to work correctly.

JayStang
02-13-2007, 01:38 AM
Hi pinkysmallz,

Try giving something like this a shot...


file: jktreeview.js


function jktreeview(treeid){
this.treetop=new YAHOO.widget.TreeView(treeid)
}

jktreeview.prototype.addItem=function(itemText, noderef, href){
var noderef=(typeof noderef!="undefined" && noderef!="")? noderef : this.treetop.getRoot()
var treebranch=new YAHOO.widget.TextNode(itemText, noderef, false)
if (typeof href!="undefined")
treebranch.href="javascript: LinkIframe('" + href + "');";

return treebranch
}

// note:added ***treebranch.href="javascript: LinkIframe('" + href + "');";*** making the link call a javascript function rather then linking


file: demo.html



//add this function
<script>
function LinkIframe(href){
document.getElementById('MainIframe').src = href;
}
<script>

<iframe id="MainIframe" width="500" height="500" />





that should do the trick. seemed to work for me.

g'luck.

JayStang
02-13-2007, 01:39 AM
damn beat me too it... your way will work just perfect too.

pinkysmallz
02-13-2007, 02:17 AM
Actually while I have your attention, maybe you can help me with something that I am definitely not succeeding in fixing myself... I have a menu with 3 top tiers, each opening a number of nodes underneath when you click. I am trying to make it so that only one parent will be expanded and when you click on another, it will collapse whatever was expanded and expand only that one. I am trying to keep the page a certain height and if you expand all of the parents, it becomes too tall.

JayStang
02-14-2007, 01:34 AM
Hey,
Sorry i don't have time for a more through example..

But where i would start is take a look at the "Collapse" Function. What i would do is when you expand a node runn the Collapse function first and collapse all nodes, and then just expand the one you want.

hope that helps.

pinkysmallz
02-15-2007, 02:09 AM
I checked in the JS files, but I think that since I am using the "dumbed down" version (jktreeview) which does most of the work for you, I don't think I can pass along any expand or collapse commands to the actual treeview script. If you have any suggestions I'd appreciate it. Thanks for the help!

JayStang
02-15-2007, 02:57 AM
can you post the actual code that your currently using the expand and collapse the nodes?

pinkysmallz
02-17-2007, 10:05 PM
Well like I said, I use jktreeview which calls on treeview.js and I have it modified to the following:

function jktreeview(treeid){
this.treetop=new YAHOO.widget.TreeView(treeid)
}

jktreeview.prototype.addItem=function(itemText, noderef, href, target){
var noderef=(typeof noderef!="undefined" && noderef!="")? noderef : this.treetop.getRoot()
var treebranch=new YAHOO.widget.TextNode(itemText, noderef, false)
if (typeof href!="undefined")
treebranch.href=href
if (typeof target!="undefined")
treebranch.target=target
return treebranch
}
Then inside my HTML I use the following code to create and manage my tree:

<div id="tree1"></div>
<script type="text/javascript">
var pinetree=new jktreeview("tree1") //INITIALIZE THE MENU TREE
var branch1=pinetree.addItem("Self-Esteem") //ADD SELF-ESTEEM ARTICLES
pinetree.addItem("Self-Esteem Developing a Strong Belief in Yourself", branch1, "articles/betterini.html", "articleFrame")
pinetree.addItem("Why High Self Esteem and Self Improvement are Inseperable", branch1, "articles/zancanaro.html", "articleFrame")
pinetree.addItem("A Short Review of Symptoms from Low Self-Esteem", branch1, "articles/limon.html", "articleFrame")
pinetree.addItem("10 Tips to Improve Your Self Esteem", branch1, "articles/dobler.html", "articleFrame")
pinetree.addItem("Four Ways to Improve Your Self Esteem", branch1, "articles/white.html", "articleFrame")
pinetree.addItem("What Is Self Esteem?", branch1, "articles/white2.html", "articleFrame")
var branch2=pinetree.addItem("Relationships") //ADD RELATIONSHIP ARTICLES
pinetree.addItem("Increasing Harmony In Your Relationship", branch2, "articles/pettinger.html", "articleFrame")
pinetree.addItem("How to Build Solid Relationships Using the Power of Words", branch2, "articles/lee.html", "articleFrame")
pinetree.addItem("Why Do I Attract So Many Losers?", branch2, "articles/brasher.html", "articleFrame")
var branch3=pinetree.addItem("Parenting") //ADD PARENTING ARTICLES
pinetree.addItem("How to Raise a Reader", branch3, "articles/mascle.html", "articleFrame")
pinetree.addItem("Attention Expecting Mothers: Specific Guidelines for Nutrition and Weight Gain", branch3, "articles/clarke.html", "articleFrame")
pinetree.addItem("The Many Benefits of Breastfeeding", branch3, "articles/obrien.html", "articleFrame")
pinetree.addItem("Teaching Children the Value of a Dollar - Parenting Tips for a Generation", branch3, "articles/berry.html", "articleFrame")
pinetree.treetop.draw(); //REQUIRED LINE: Initalize tree
</script>
Now what I want to do is only allow one of each of the parents (Parenting, Relationship or Self-Esteem) to be expanded at a time. Because I'm going through jktreeview, I don't think I have direct access to treeview hence I even had to edit jktreeview a bit to allow me to send a target for the link. Any ideas?

curveb@ll
02-22-2007, 08:28 AM
Hi pinkysmallz,

Looks like you're in great strong technical handz with JayStang, but on a complete aside I noticed a typo in your content:


pinetree.addItem("Why High Self Esteem and Self Improvement are Inseperable", branch1, "articles/zancanaro.html", "articleFrame")
Inseperable would usually be Inseparable, so to speak

Best of luck,

Curveb@ll

ps. what is the name of your website (or is it public?) it looks interesting

pinkysmallz
02-22-2007, 12:39 PM
hah! Thank you for catching that typo, I was in such a rush when I was doing this I completely missed that! The site is my girlfriends actually, she is just making me do all the hard work :) It is www.jamiekaria.com, let me know if you have any comments / criticism of the site, I'd love to hear it as we just launched it and are trying to make it the best we can.

P.S. The treeview is on the Articles page



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum