need buttons using JavaScript

Greetings,

I use a free node tree by Matt Kruse (below), which is working out well for me.  I would like to add a bit of functionality and am not sure how to approach it.

in the frame with the node tree I'd like a few buttons to change the way the tree is displayed.  I'd like 4 buttons called:

Expand                       Larger Font

Collapse                     Smaller Font


I'd like the Expand button to expand all nodes.  I'd like Collape to collapse al nodes  I'd like "Larger Font" to increment the font size for people with a hard time reading.  I'd like "Smaller Font" for people who want the benefit of denser text.

Does this approach make sense?

How would I accomplish this with buttons?  And is there a better way to accomplish this?

Thanks for the help.

newbieweb


// ===================================================================
// Author: Matt Kruse <matt@mattkruse.com>
// WWW: http://www.mattkruse.com/
//
// NOTICE: You may use this code for any purpose, commercial or
// private, without any further permission from the author. You may
// remove this notice from your final code if you wish, however it is
// appreciated by the author if at least my web site address is kept.
//
// You may *NOT* re-distribute this code in any way except through its
// use. That means, you can include it in your product, or your web
// site, or any other form where the code is actually being used. You
// may not put the plain javascript up on your site for download or
// include it in your javascript libraries for download.
// If you wish to share this code with others, please just point them
// to the URL instead.
// Please DO NOT link directly to my .js files from your site. Copy
// the files to your server and use them there. Thank you.
// ===================================================================

// HISTORY
// ------------------------------------------------------------------
// December 9, 2003: Added script to the Javascript Toolbox
// December 10, 2003: Added the preProcessTrees variable to allow user
//      to turn off automatic conversion of UL's onLoad
// March 1, 2004: Changed it so if a <li> has a class already attached
//      to it, that class won't be erased when initialized. This allows
//      you to set the state of the tree when painting the page simply
//      by setting some <li>'s class name as being "liOpen" (see example)
/*
This code is inspired by and extended from Stuart Langridge's aqlist code:
            http://www.kryogenix.org/code/browser/aqlists/
            Stuart Langridge, November 2002
            sil@kryogenix.org
            Inspired by Aaron's labels.js (http://youngpup.net/demos/labels/)
            and Dave Lindquist's menuDropDown.js (http://www.gazingus.org/dhtml/?id=109)
*/

// Automatically attach a listener to the window onload, to convert the trees
addEvent(window,"load",convertTrees);

// Utility function to add an event listener
function addEvent(o,e,f){
      if (o.addEventListener){ o.addEventListener(e,f,true); return true; }
      else if (o.attachEvent){ return o.attachEvent("on"+e,f); }
      else { return false; }
}

// utility function to set a global variable if it is not already set
function setDefault(name,val) {
      if (typeof(window[name])=="undefined" || window[name]==null) {
            window[name]=val;
      }
}

// Full expands a tree with a given ID
function expandTree(treeId) {
      var ul = document.getElementById(treeId);
      if (ul == null) { return false; }
      expandCollapseList(ul,nodeOpenClass);
}

// Fully collapses a tree with a given ID
function collapseTree(treeId) {
      var ul = document.getElementById(treeId);
      if (ul == null) { return false; }
      expandCollapseList(ul,nodeClosedClass);
}

// Expands enough nodes to expose an LI with a given ID
function expandToItem(frameId,treeId,itemId) {
      var ul = window.parent.frames[frameId].document.getElementById(treeId);
      if (ul == null) { return false; }
      var ret = expandCollapseList(ul,nodeOpenClass,itemId);
      if (ret) {
            /*var o = document.getElementById(itemId);*/
            var o = window.parent.frames[frameId].document.getElementById(itemId);
            if (o.scrollIntoView) {
                  o.scrollIntoView(false);
            }
      }
}

// Performs 3 functions:
// a) Expand all nodes
// b) Collapse all nodes
// c) Expand all nodes to reach a certain ID
function expandCollapseList(ul,cName,itemId) {
      if (!ul.childNodes || ul.childNodes.length==0) { return false; }
      // Iterate LIs
      for (var itemi=0;itemi<ul.childNodes.length;itemi++) {
            var item = ul.childNodes[itemi];
            if (itemId!=null && item.id==itemId) { return true; }
            if (item.nodeName == "LI") {
                  // Iterate things in this LI
                  var subLists = false;
                  for (var sitemi=0;sitemi<item.childNodes.length;sitemi++) {
                        var sitem = item.childNodes[sitemi];
                        if (sitem.nodeName=="UL") {
                              subLists = true;
                              var ret = expandCollapseList(sitem,cName,itemId);
                              if (itemId!=null && ret) {
                                    item.className=cName;
                                    return true;
                              }
                        }
                  }
                  if (subLists && itemId==null) {
                        item.className = cName;
                  }
            }
      }
}

// Search the document for UL elements with the correct CLASS name, then process them
function convertTrees() {
      setDefault("treeClass","mktree");
      setDefault("nodeClosedClass","liClosed");
      setDefault("nodeOpenClass","liOpen");
      setDefault("nodeBulletClass","liBullet");
      setDefault("nodeLinkClass","bullet");
      setDefault("preProcessTrees",true);
      if (preProcessTrees) {
            if (!document.createElement) { return; } // Without createElement, we can't do anything
            uls = document.getElementsByTagName("ul");
            for (var uli=0;uli<uls.length;uli++) {
                  var ul=uls[uli];
                  if (ul.nodeName=="UL" && ul.className==treeClass) {
                        processList(ul);
                  }
            }
      }
}

// Process a UL tag and all its children, to convert to a tree
function processList(ul) {
      if (!ul.childNodes || ul.childNodes.length==0) { return; }
      // Iterate LIs
      for (var itemi=0;itemi<ul.childNodes.length;itemi++) {
            var item = ul.childNodes[itemi];
            if (item.nodeName == "LI") {
                  // Iterate things in this LI
                  var subLists = false;
                  for (var sitemi=0;sitemi<item.childNodes.length;sitemi++) {
                        var sitem = item.childNodes[sitemi];
                        if (sitem.nodeName=="UL") {
                              subLists = true;
                              processList(sitem);
                        }
                  }
                  var s= document.createElement("SPAN");
                  var t= '\u00A0'; // &nbsp;
                  s.className = nodeLinkClass;
                  if (subLists) {
                        // This LI has UL's in it, so it's a +/- node
                        if (item.className==null || item.className=="") {
                              item.className = nodeClosedClass;
                        }
                        // If it's just text, make the text work as the link also
                        if (item.firstChild.nodeName=="#text") {
                              t = t+item.firstChild.nodeValue;
                              item.removeChild(item.firstChild);
                        }
                        s.onclick = function () {
                              this.parentNode.className = (this.parentNode.className==nodeOpenClass) ? nodeClosedClass : nodeOpenClass;
                              return false;
                        }
                  }
                  else {
                        // No sublists, so it's just a bullet node
                        item.className = nodeBulletClass;
                        s.onclick = function () { return false; }
                  }
                  s.appendChild(document.createTextNode(t));
                  item.insertBefore(s,item.firstChild);
            }
      }
}
      
var selItem = null;
var selItemClassname;

//Select item function
function selectItem(frameId, treeId, itemId)
{
      //Reset selected?
      if(selItem)
            selItem.className = selItemClassname;
      
      selItem = window.parent.frames[frameId].document.getElementById(itemId);
       selItemClassname = selItem.className;
       selItem.className += " selected";
}
newbiewebSr. Software EngineerAsked:
Who is Participating?
 
rama_krishna580Connect With a Mentor Commented:
Hi,

Look at here; you may get some idea how to do it...
http://www.alistapart.com/articles/relafont

R.K
0
 
newbiewebSr. Software EngineerAuthor Commented:
thanks for that page.  I was actually more looking for the way to use JavaScript to create buttons.

I'd like them to be at the bottom of a frame, in a two by two matrix.

Can anybody show me?

newbieweb
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.