AnimTree

PersistentTree

AnimTree Cookie Persistence Tutorial

PersistentTree is built into AnimTree. It saves the tree state for your users so that as they navigate your site, the tree will always appear open to the right place. When a user returns to the site, the tree will be open as s/he left it.

How to make the tree "follow" the user around:

You can make multiple trees "follow" the user around two ways.

1. call activateMenu(sButtonId) in each page
2. Use PersistentTree.

---

Persistent Tree Instructions

1. put global.js on your server

2. modify LISTENER_SCRIPT_SRC and PERSISTENCE_MILLIS (optional)

3. call these functions in your document:

       fireOnload( function() { 
           saveTreeOnUnload(treeId);
           restoreTreeState(treeId, defaultButtonId);
       });
   

Here's a Breakdown

1. put global.js on your server

   Store global.js online with your other js files.

2. modify LISTENER_SCRIPT_SRC and PERSISTENCE_MILLIS (optional)

   in treeparams.js change:

   var LISTENER_SCRIPT_SRC  =  "/res/js/global.js";
   
   
   var MS_PER_DAY  =  1000 * 60 * 60 * 24;
   var PERSISTENCE_MILLIS  =  1 * MS_PER_DAY; // 1 day
   

   PERSISTENCE_MILLIS is how long the tree cookie is stored for. Tip: Use a negative number for a session cookie (expires when the user closes the browser).

   LISTENER_SCRIPT_SRC is the source for an event listener script for browsers that don't support event listener/attachEvent (mac IE).

3. call these in your document or in treeparams.js:

   fireOnload( function() { 
       saveTreeOnUnload(treeId);
       restoreTreeState(treeId, defaultButtonId);
   });
   

This has already been done for you in treeparams.js.

Variable treeId is the id of the tree to save. defaultButtonId is the id of the button to activate if no menu is activated, the id for defaultButtonId will be passed to activateMenu. You can see the source of function restoreTreeState.

Notes

Optionally, you can use a null defaultButton. This means that no default button is activated, but the tree will follow the user. You could put this in treeParams.js, as I have done in the demos.

    fireOnload( function() { 
        saveTreeOnUnload("nav");
        restoreTreeState("nav", null);
    });

Next in this tutorial: AnimTree Function Reference