Solved

need buttons using JavaScript

Posted on 2006-11-27
2
236 Views
Last Modified: 2012-08-14
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";
}
0
Comment
Question by:newbieweb
2 Comments
 
LVL 23

Accepted Solution

by:
rama_krishna580 earned 500 total points
ID: 18030371
Hi,

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

R.K
0
 

Author Comment

by:newbieweb
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?

newbieweb
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

759 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now