SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    treemenu.js -- automatically expand?

    I'm using treemenu.js from The JavaScript Anthology. When loaded, it shows just the top node, like this:

    Code:
    + TopNode
    I need it to open, on load, to the first level, like this:

    Code:
    - TopNode
      +FirstLevelNode1
      +FirstLevelNode2
      +FirstLevelNode3
    What do I need to do to make that happen?

    -Dave

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    JavaScript Anthology's errata has a correction to the stylesheet for you to make.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't see anything in that typos and corrections page that addresses this -- though I'm not sure what I'm looking for. Care to amplify?

    The treemenu.js code is in Chapter 15, starting on 365 or so in my PDF. The two entries in the typos and corrections that address that part of the book appear to be hacks for IE7+, not anything about expanding the menu automatically.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Do you experience the same problem with the code from the code archive for the book.

    In the unlikely case that you do, we can troubleshoot further from there

    If the tree menu from the code archive works properly, then you may have an issue in the code you copied from the book. Using the treeMenu.js file from the code library will then resolve your problem.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I should add that treeMenu.js is supposed to automatically expand the first expandable item in every branch of the tree, so given that the code you have typed in is not expanding, there is either something wrong with the code you typed in, or the way you've set up your menu.

    Either way, the "known and confirmed to be working" code from the code archive will help you to get back on track.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's exactly what I needed to know. I'll download the code and try it again.

  7. #7
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, I don't need it to expand every expandable branch, just the second level. Any ideas on that?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The existing design of the code is to expand the 1st branch at every depth.

    Once you have that working, it would be trivial to add a parameter when calling it to specify the depth to end at.

    Get it working first.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fair enough. More tomorrow, one way or another.

  10. #10
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I downloaded the script, but it's still not working. I gave the freshly unzipped script the innocuous input below (after trying my very large TOC file, which has the same structure), and it still fails.

    The menu loads, showing all of the topics in the entire map, but as soon as you point to (mouse over) anything in the list, it collapses down to just the top level.

    Fails the same way on IE 8.0.6001.18702 and Firefox 3.5.7.

    What should I try next?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>Test</title>
      </head>
      <body>
        <script type="text/javascript" src="treeMenu.js"></script>
        <ul id="navigation" class="foldertree">
          <li>
            <a href="#">Top Level</a>
            <ul>
              <li>
                <a href="#">Second Level 1</a>
              </li>
              <li>
                <a href="#">Second Level 2</a>
                <ul>
                  <li>
                    <a href="#">Third Level 1</a>
                  </li>
                  <li>
                    <a href="#">Third Level 2</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#">Second Level 2</a>
                <ul>
                  <li>
                    <a href="#">Third Level 3</a>
                  </li>
                  <li>
                    <a href="#">Third Level 4</a>
                  </li>
                  <li>
                    <a href="#">Third Level 5</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </body>
    </html>

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Ahh, I am misunderstanding things.

    The foldertree automatically opens the nagivation link that applies to the current page.

    Right now you have no page names on your links, so folder-tree doesn't know which one to start showing. If you give FirstLevelNode1 the name of you page, it will automatically open to show this:

    Code:
    - TopNode
      +FirstLevelNode1
      +FirstLevelNode2
      +FirstLevelNode3
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, now we're on the same page, so to speak.

    The problem now is that I need it to behave slightly differently. I see how this would be very useful in a site where the menu showed up on every page, but I'm using it in a frame, so the current page isn't one of the links in the menu at all.

    I understand if helping make it behave like that is outside the scope of this forum, but if you can point me in the right direction, please do.

    I either have to change the menu behavior or rearchitect the site. The former has to be easier.

    Love the Pratchett, by the way.

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I suggest that you toss the treemenu, as it doesn't suit your needs, and use some other solution instead.

    I believe that jQuery has some very capable solutions that you can customise to your needs.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll take a look. Thanks for your help.


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
  •