Treemenu.js -- automatically expand?

JavaScript
1

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

+ TopNode

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

- TopNode
  +FirstLevelNode1
  +FirstLevelNode2
  +FirstLevelNode3

What do I need to do to make that happen?

-Dave

2

JavaScript Anthology’s errata has a correction to the stylesheet for you to make.

3

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

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.

5

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.

6

That’s exactly what I needed to know. I’ll download the code and try it again.

7

Actually, I don’t need it to expand every expandable branch, just the second level. Any ideas on that?

8

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.

9

Fair enough. More tomorrow, one way or another.

10

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?

<!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

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:


- TopNode
  +FirstLevelNode1
  +FirstLevelNode2
  +FirstLevelNode3
12

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

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.

14

I’ll take a look. Thanks for your help.