SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show/Hide Links In Vert Nav Bar

    I am trying to locate a script that will help with my nav bar. The nav bar is vertical and has a few live text links in it. The links are of "regions" and each region contains several "locations". I want the nav to initially show just the three regions and once a user clicks on a specific region, I would like for the locations for that region to appear underneath the respective region... but only the region that was clicked on. I have seen this on many sites, but I couldn't find one quick enough to post in my thread. However, I do have a sample page to look at that displays my starting point and where I want to go. I do not want the page to have to reload in order to display the sub links and Dreamweavers Show/Hide Layers and Pop-Up Menu are not doing the trick. The Pop-Up Menu feature was close, but it didn't shift the main links when a list of sub links popped up. I appreciate everyones help in advance!


    LINK-
    http://ackermannpr.com/fsf/sitepoint.html
    Todd Temple > T2 Design

  2. #2
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    There are (at least) two ways to do it: load the regions in hidden content or use ajax to retrieve the regions asynchronously from the server.

    In first case, you can use a hidden div, then show/hide it when the link is clicked:
    Code html:
    <a href="javascript:void(0)" onclick="showhide(0)">Location 1</a><br />
    <div name="loc">
      <a href="region1_1.html">Region 1</a><br />
      <a href="region1_2.html">Region 2</a><br />
    </div>
    <a href="javascript:void(0)" onclick="showhide(1)">Location 2</a><br />
    <div name="loc">
      <a href="region2_1.html">Region 1</a><br />
      <a href="region2_2.html">Region 2</a><br />
    </div>
     
    <script type="text/javascript">
      //hide the layers initially
      var divs=document.getElementsByName('loc');
      var i=0;
      for(i=0; i<divs.length; i++) divs[i].style.display='none';
     
      function showhide(id){
        var divs=document.getElementsByName('loc');
        if(divs[id].style.display=='none') divs[id].style.display='block';
        else divs[id].style.display='none';
      }
    </script>

    In case of ajax... well, I'm too lazy and it's late, look up Ajax.
    Saul

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks php-daemon!

    Just one question. I added your code and script, but I can't figure out how to make the default or the initial view to hide the div's. The are visible when I go to the page and I would like to make them hidden. Any clues? Here is a link to where I am so far.


    LINK-
    http://www.ackermannpr.com/fsf/locationsHours.html


    Thanks again! Your a genius!

    Todd Temple
    Todd Temple > T2 Design

  4. #4
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You've included the code to your other JS code in the head part of the document. That's all OK, but the hide all snippet is executed before the rest of the document (including the divs) is loaded. It is important that the hide all code is executed after the divs are loaded (so there is actually something to hide). You can wrap up that code into a function and make a call below the divs:
    Code javascript:
      function hideall(){
        //hide the layers initially
        var divs=document.getElementsByName('loc');
        var i=0;
        for(i=0; i<divs.length; i++) divs[i].style.display='none'; 
      }

    Code html:
    <div name='region'>
    <!-- ... -->
    </div>
     
    <script type="text/javascript">hideall()</script>
    Saul

  5. #5
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have added the new function to the global.js file and also added the call after the div tags within the body.

    Was I supposed to add the comment tags?

    Does the function and/or call need to be in the same document or can the function reside in the global javascript file?

    Here is where I am at....


    LINK-
    http://www.ackermannpr.com/fsf/locationsHours.html


    Thanks so much!

    Todd
    Todd Temple > T2 Design

  6. #6
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    No, everything is OK, just that you've copied the function from here and did not change the div name ('loc' to 'region').
    Code javascript:
    var divs=document.getElementsByName('region');
    Saul

  7. #7
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Woops! My bad. I changed that part and it still was not working. I tried removing the comments from each category and it is working fine now. I really, really, really, really appreciate your help. You are a life saver!


    LINK-
    http://www.ackermannpr.com/fsf/locationsHours.html


    Thanks again!

    Todd Temple > T2 Design
    Todd Temple > T2 Design

  8. #8
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Sure.

    Not sure what comments are you talking about, though. If those in my post #4, that was my attempt to use ... without breaking the html.
    Saul


Bookmarks

Posting Permissions

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