Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Folding Tree Menu target help

    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.

  • #2
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well in case anyone else was wondering, I ended up solving the issue myself. I went into the jktreeview.js file and changed
    Code:
    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
    Code:
    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.

  • #3
    Regular Coder
    Join Date
    Jan 2006
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi pinkysmallz,

    Try giving something like this a shot...


    file: jktreeview.js
    PHP Code:
    function jktreeview(treeid){
        
    this.treetop=new YAHOO.widget.TreeView(treeid)
    }

    jktreeview.prototype.addItem=function(itemTextnoderefhref){
        var 
    noderef=(typeof noderef!="undefined" && noderef!="")? noderef this.treetop.getRoot()
        var 
    treebranch=new YAHOO.widget.TextNode(itemTextnodereffalse)
        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
    PHP Code:

    //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.

  • #4
    Regular Coder
    Join Date
    Jan 2006
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts
    damn beat me too it... your way will work just perfect too.

  • #5
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Regular Coder
    Join Date
    Jan 2006
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #8
    Regular Coder
    Join Date
    Jan 2006
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts
    can you post the actual code that your currently using the expand and collapse the nodes?

  • #9
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well like I said, I use jktreeview which calls on treeview.js and I have it modified to the following:
    Code:
    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:
    Code:
    <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?

  • #10
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    On a complete aside...

    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

  • #11
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •