Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Senior Member [Li] Brad's Avatar
    Join Date
    Oct 2003
    Location
    Saskatoon, Canada
    Posts
    578
    Member #
    3689
    I'm looking to make a tree style navigation that can expand and colapse without reloading the page. Preferably something similar (if not the same as) http://www.strongchoice.com/project_eight/

    I know this is JvaScript, but can someone point me in the direction of a tutorial or help me set up the bare bones of the script?

    Thanks for your time,
    [Li] Brad
    "Art strives for form, and hopes for beauty." - George Bellows

  2.  

  3. #2
    Senior Member skrlin's Avatar
    Join Date
    Apr 2003
    Location
    Illinois
    Posts
    562
    Member #
    1063
    If you'd like to see how it's done, you can right-click in the dark-gray frame and view source to see the code. It's pretty ugly though as it was coded through a WYSIWYG editor. Try that and reply in this thread with any questions you may have about it.
    - Brian

  4. #3
    Senior Member [Li] Brad's Avatar
    Join Date
    Oct 2003
    Location
    Saskatoon, Canada
    Posts
    578
    Member #
    3689
    Right, I tried to figure out that code but got confused with the functions Anyway, I found out another method and my question now is: how can I make it so that my navigation section has an image of a + when the section is closed and has a - image when it is open? Here is the code I am using:
    Code:
    <script type="text/javascript">
    if (document.getElementById){
    document.write('<style type="text/css">\n')
    document.write('.submenu{display: none;}\n')
    document.write('</style>\n')
    }
    
    function SwitchMenu(obj){
    	if(document.getElementById){
    	var el = document.getElementById(obj);
    	var ar = document.getElementById("masterdiv").getElementsByTagName("span");
    		if(el.style.display != "block"){
    			for (var i=0; i<ar.length; i++){
    				if (ar[i].className=="submenu")
    				ar[i].style.display = "none";
    			}
    			el.style.display = "block";
    			
    		}else{
    			el.style.display = "none";
    		}
    	}
    }
    </script>
    for the script and
    Code:
    <div id="masterdiv">
        <div class="menutitle" onclick="SwitchMenu('sub1')">Site Menu</a></div>
    	<span class="submenu" id="sub1">
    		- <a class="submenulinks" href="link.html">A Link</a><br>
    	</span>
    for the actual menu. I am thinking it may be in the if/else of the script that I can add an image to?

    [Li] Brad
    "Art strives for form, and hopes for beauty." - George Bellows

  5. #4
    Senior Member skrlin's Avatar
    Join Date
    Apr 2003
    Location
    Illinois
    Posts
    562
    Member #
    1063
    I started something like this a while ago for demonstration. You can see it here and use the code as you see fit.
    - Brian

  6. #5
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Simple solution in regards to the script. Just create an <img> within each div with an id like "sub1Image" and in your script, when you set your el.style to block, do this:

    document.getElementById(obj + 'Image').src = 'minus.gif';

    and vice-versa for the plus.gif. That way, it corresponds to the visibility style state of the div it belongs to.

  7. #6
    Senior Member [Li] Brad's Avatar
    Join Date
    Oct 2003
    Location
    Saskatoon, Canada
    Posts
    578
    Member #
    3689
    Wow! Thanks for the code skrlin, and thanks transio for your help implementing the images, I got it to work perfectly

    EDIT: here is a link to see it in action!

    [Li] Brad
    "Art strives for form, and hopes for beauty." - George Bellows

  8. #7
    Senior Member skrlin's Avatar
    Join Date
    Apr 2003
    Location
    Illinois
    Posts
    562
    Member #
    1063
    Looks great. Keep us up to date as the script grows into multiple trees, and possibly multiple nested trees. Post back in this thread if you have any other questions/problems and we'll help out.
    - Brian

  9. #8
    Senior Member [Li] Brad's Avatar
    Join Date
    Oct 2003
    Location
    Saskatoon, Canada
    Posts
    578
    Member #
    3689
    Right,

    Thanks to your help, I have been able to modify the original JavaScript code and made it possible to do nested branches. I am offering the code to anyone who wants it, just e-mail or PM me. Here is the url for the nested tree nav. Can anyone tell me if I need to preload the + and - images because they seem to load slow for me...

    [Li] Brad
    "Art strives for form, and hopes for beauty." - George Bellows

  10. #9
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Brad, one thing you might want to do is preload the minus image so that there's no delay when expanding the first menu.

  11. #10
    Member
    Join Date
    Sep 2003
    Posts
    47
    Member #
    3135
    Originally posted by [Li] Brad
    Right,

    Thanks to your help, I have been able to modify the original JavaScript code and made it possible to do nested branches. I am offering the code to anyone who wants it, just e-mail or PM me. Here is the url for the nested tree nav. Can anyone tell me if I need to preload the + and - images because they seem to load slow for me...

    [Li] Brad
    Could i view the code? i'd apreciate it!

    Thanks!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:00 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com