AnimTree

FAQ

  1. How do I make a menu open when the page loads?
  2. How Can I activate the correct menu for each page?
  3. The menutree doesn't look right/won't collapse
  4. How do I change the position of the menu tree to fit in my page?
  5. Everything else below the tree moves down when a menu opens. How can I avoid this?
  6. How can I highlight or disable the current node?
  7. I can't get the persistence to work. What's wrong?

  1. How do I make a menu open when the page loads?

    				
<body onload='activateMenu(sButtonId);'>
    top ↑

  2. How Can I activate the correct menu for each page?

    Call activateMenu in every page: 

    <body onload='activateMenu(sButtonId);'>

    Parameter sButtonId is the id of a button that you want to activate.

    Or, if your site is large and you're server-side savvy, you can parse the http request header and assign a value to a JavaScript String variable for activateMenu.

    Here's our code. It's server-side Java that prints out a JavaScript varaible to the client: 

    public static String getSection(final String uri) {
    String section = "";
    if(uri.startsWith("/scripts/")) {
        section = uri.replaceFirst(^/scripts/,").replaceFirst("/.*","");
    }
    return section;
}

    Then we call restoreTreeState onload: 

    
var SECTION = "<%=getSection(request.getRequestURI())%>";

    After server side parsing, we have something like this: 

    var SECTION = "animtree";


fireOnload( function() {
        saveTreeOnUnload("contentScripts");
        restoreTreeState("contentScripts", window.SECTION||null);
});

    With this code, PersistentTree will follow the user. If the user follows an external link (from another site) directly to a page within /scripts/ (for example /scripts/animtree/), he won't have a cookie and a button with the id of window.SECTION will be activated.

  3. The menutree doesn't look right/won't collapse

    This is probably one of the following:

    • Invalid markup

      Solution: Validate your page.

    • Improper Tree Structure or missing className

      Solution: Check the structure from the HTML tab.

    • Script is not licensed for your domain

      Solution: Contact us for a purchase.

    top ↑

  4. How do I change the position of the menu tree to fit in my page?

    The root of the tree is the node (div) that contains all the menus. If the root is inside a table cell, you can use position: relative. You can affect positioning with margin-top and margin-left. You can refer to the demo.

    To make the tree fit your page, use different css. Be creative and original. You don't need to make it look like mine or anyone else's. You can use images to get a really different look.

  5. Everything else below the tree moves down when a menu opens. How can I avoid this?

    Give the tree a fixed height. Put other items below the tree. You can optionally use overflow: auto to allow the tree to be scrolled (see the demos). 

    .AnimTree {
    height: 350px;
    width: 200px;
    overflow: auto;
}
    top ↑

  6. How Can I Highlight or Disable the Current Node?

    Although it is possible to do it with JavaScript, we do not recommend this approach.

    DHTML Kitchen uses a server side script to get a link or a disabled node. A disabled node has 2 class names: menuNode and disabled. Compare a menuNode to a disabled menuNode;

    menuNode

    <a title="PersistentTree Tutorial" 
  href="/scripts/animtree/tutorial/persistentTree.jsp" 
  class="menuNode"
  >6 - PersistentTree</a>

    disabled menuNode

    <span title="You are here" 
  class="menuNode disabled" 
  >6 - PersistentTree</span>

    Appearance

    We use an a tag for menuNode, instead of a div containing an a.

    The disabled menuNode will be styled with CSS, as is the menuNode. 

    body .AnimTree .menu .menu span.disabled {
    background-color: #FFF9F0;
}

    Strategy

    The idea is to check the location to see if the user is on the same page as the link, and if he is, then write out a disabled or hilited node.

    Here's the very simple code we use: 

                
<%=Page.getLinkOrDisabled(request, 
            "/scripts/animtree/tutorial/persistentTree.jsp", 
            "menuNode", 
            "title='PersistentTree Tutorial'",
            "6 - PersistentTree")%>

    Static method Page.getLinkOrDisabled returns a string with either a link or a disabled/hilited node. 

    package com.dhtmlkitchen;

import javax.servlet.http.*;

public class Page {

    /* isCurrentPage returns true if the page the user requested 
     * starts with (or is) parameter url. 
     */
    public static boolean isCurrentPage(HttpServletRequest request, 
                                                         String url) {
        return request.getServletPath().toString().startsWith(url);
    }
    
    
    /* getLinkOrDisabled returns either a link or disabled span, 
     * if the user is on the page of url.
     *
     * If the user is not on the same page as url, 
     * returns a link with the specified url, className, and innerHTML.
     * Otherwise, returns a span with the className + " disabled"
     * and a title of "you are here".
     */
    public static String getLinkOrDisabled(HttpServletRequest request, 
                                                     String url, 
                                                     String className, 
                                                     String innerHTML) {
        if(isCurrentPage(request, url))
            return "<span class='"+(className+" disabled'").trim() 
            + " title='You are here'>"+innerHTML+"</span>";
        return "<a class='"+className+"' href='"+url+"'>"+innerHTML+"</a>";
    }
}

    A more scalable option would be to use custom tags. For our small site and development team, the code above works fine.

    top ↑

  7. I can't get the persistence to work. What's wrong?

    Some browsers (such as mozilla) treat cookies from a file:/// differently than cookies from an http (or https) protocol. Try the persistence on an http connection. (You can use localhost).

    top ↑

If you have invalid markup, you may experience errors. If you get stuck, you contact support. If you want to be featured in the demos page, send an email.

 

Tags

Archived Scripts

*AnimTree
*Tabs
*GlideMenus
*DragLib