Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


need buttons using JavaScript

Posted on 2006-11-27
Medium Priority
Last Modified: 2012-08-14

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.


// ===================================================================
// 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.
// ===================================================================

// ------------------------------------------------------------------
// 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:
            Stuart Langridge, November 2002
            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

// 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) {

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

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

// 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) {

// 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) {
                                    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() {
      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) {

// 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;
                  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;
                        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; }
var selItem = null;
var selItemClassname;

//Select item function
function selectItem(frameId, treeId, itemId)
      //Reset selected?
            selItem.className = selItemClassname;
      selItem = window.parent.frames[frameId].document.getElementById(itemId);
       selItemClassname = selItem.className;
       selItem.className += " selected";
Question by:newbieweb
LVL 23

Accepted Solution

rama_krishna580 earned 2000 total points
ID: 18030371

Look at here; you may get some idea how to do it...


Author Comment

ID: 18033922
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?


Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

572 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question