Saturday, October 29, 2005

JavaScript Effects (drag/drop, animation etc)

Thinking of adding effects to your web pages using JavaScript? Jonathan Snook has comprised a list of useful ones you can use: JavaScript Effect Libraries.

Moo.fx (simple animations, small download), script.aculo.us (more powerful, has AJAX capabilities, drag/drop, visual effects, auto-complete controls) and Rico (AJAX, drag/drop, cinematic effects, behaviours). Use the Prototype JavaScript Framework, which can make developing JavaScript web applications easier. script.aculo.us is probably the most powerful. There is also a mention of Walter Zorn, whose libraries support more browsers (doesn't use Prototype, drag-and-drop works even with Netscape 4 and Internet Explorer 4).


Tags: ,

Friday, October 21, 2005

addEvent() recoding contest

Adding events to elements via javascript should be easy but is not. Each browser has different methods of adding events, most standards compliant ones would use addEventLister() (as defined by the W3C), but Internet Explorer uses attachEvent(). That is why Scott Andrew LePera created functions to add and remove events, regardless of browser: Crossbrowser DOM Scripting: Event Handlers.

However, Peter-Paul Koch of QuirksMode found a problem with it: addEvent() considered harmful. So he set up a recoding contest for developers to improve on it. Eventually a winner was declared, but there are still problems with it. It does not work on IE5 Mac or Netscape 4 (although with the number of people still using them dropping, it may not cause a problem as long as you have a fallback, like server-side processing), plus there can still be a memory leak with Internet Explorer for Windows.

One of the judges, Dean Edwards decided to write his own solution. It is different, as it does not use addEventLister or attachEvent. But it does work cross browser and does not leak memory. It may not be scalable as addEventLister/attachEvent and also may not work in the future (if element.onclick is no longer supported).


Tags: , ,

Saturday, October 15, 2005

Update to JavaScript DOM Text Clips

Many more objects properties and methods have been added to JavaScript DOM Text Clips. As well as being useful as text clips, it also serves like a reference - it can be used to see if a certain element supports a method or property as defined by the W3C. Any of these properties or methods, if used appropriately (i.e. don't use 'href' on a 'table' element for instance), should work in any DOM1 compliant browser.


Tags: ,

Tabbed Search v2 (JavaScript)

An alternative javascript file for Tabbed Search. Instead of changing the form action when clicking a table, it changes the action when clicking the submit button, so it does not impact on other possible submit buttons in the form. HTML and CSS pages remain the same.

The script: tabbedsearch.js

// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func)
{
 var oldonload = window.onload;
 if (typeof window.onload != 'function')
 {
  window.onload = func;
 }
 else
 {
  window.onload = function()
  {
   oldonload();
   func();
  }
 }
}
// this sets up the forms for search
// tested and works in IE 5+, Firefox 1.0+
function setupForms(method)
{
 // get all forms and loop through them
 var forms = document.getElementsByTagName("form");
 for(i=0; i<forms.length;i++)
 {
  if(forms[i].id == "")
  {
   forms[i].id = "form" + i;
  }
  var formid = forms[i].id;
  // get list
  var list = forms[i].getElementsByTagName("ul");
  // loop through items in list
  for(j=0; j<list.length;j++)
  {
   //alert(list[j].className);
   if(list[j].className == "formpages")
   {
    var items = list[j].getElementsByTagName("li");
    for(k=0; k<items.length;k++)
    {
     var link = items[k].getElementsByTagName("a")[0];
     if (link)
     {
      if(link.id == "")
      {
       link.id = formid + "Link" + k;
      }
      // this stores the links to the search
      if(forms[i].searchlinkids)
      {
       forms[i].searchlinkids = forms[i].searchlinkids + "," + link.id;
      }
      else
      {
       forms[i].searchlinkids = link.id;
      }
      link.onclick = function()
      { 
       removeLinkClassNames(formid);
       this.className = "active";
       return false;
      };
     }
    }
   }
  }
  // find submit button
  var divs = forms[i].getElementsByTagName("div");
  for(j=0; j<divs.length;j++)
  {
   if (divs[j].className == "searchbox")
   {
    var inputs = divs[j].getElementsByTagName("input");
    for(k=0; k<inputs.length;k++)
    {
     if(inputs[k].type == "submit")
     {
      inputs[k].onclick = function()
      {
       changeFormAction(formid, method);
      }
     }
    }
    break;
   }
  }
 }
}

function removeLinkClassNames(form)
{
 if(typeof(form) == 'string')
 {
  form = document.getElementById(form);
 }
 var f = form.searchlinkids.split(",");
 for (i=0; i<f.length; i++)
 {
  document.getElementById(f[i]).className = "";
 }
}

function changeFormAction(form,method)
{
 if(typeof(form) == 'string')
 {
  form = document.getElementById(form);
 }
 var action = form.action;
 form.oldaction = action;
 // get list
 var list = form.getElementsByTagName("ul");
 // loop through items in list
 for(i=0; i<list.length;i++)
 {
  //alert(list[i].className);
  if(list[i].className == "formpages")
  {
   var items = list[i].getElementsByTagName("li");
   for(j=0; j<items.length;j++)
   {
    var link = items[j].getElementsByTagName("a")[0];
    if (link)
    {
     if(link.className == "active")
     {
      action = link.href;
      break;
     }
    }
   }
  }
 }
 // change action and method
 if(action)
 {
  form.action = action;
 }
 if(method)
 {
  form.method = method;
 }
}



//addLoadEvent(setupForms);
//addLoadEvent(function(){setupForms("post")});
addLoadEvent(function(){setupForms("get")});

Tags: , ,

Sunday, October 09, 2005

Tabbed Search (JavaScript)

If you look at Google or other popular search engines, you notice that they use tabs to indicate what you are searching. What they do not do though, is change the forms action without going to a new page. With this script and accompanying CSS, it changes the parent forms action page and sets focus on a tab. The pages are contained in an unordered list that is then formatted to look like tabs.

Uses W3C DOM level 1 methods and properties, so should work in any complaint browser. Tested and works in IE5+, Firefox 1.0 and Opera 8.50. If JavaScript is disabled, it simply goes to the page linked to.

The script: tabbedsearch.js

// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
// this sets up the forms for search
// tested and works in IE 5+, Firefox 1.0+, Opera 8.50
function setupForms(method) {
 // get all forms and loop through them
 var forms = document.getElementsByTagName("form");
 for(i=0; i<forms.length;i++) {
  if(forms[i].id == "") {
   forms[i].id = "form" + i;
  }
  var formid = forms[i].id;
  // get list
  var list = forms[i].getElementsByTagName("ul");
  // loop through items in list
  for(j=0; j<list.length;j++) {
   //alert(list[j].className);
   if(list[j].className == "formpages") {
    var items = list[j].getElementsByTagName("li");
    for(k=0; k<items.length;k++) {
     if (items[k].getElementsByTagName("a")[0]) {
      var link = items[k].getElementsByTagName("a")[0];
      if(link.id == "") {
       link.id = formid + "Link" + k;
      }
      // this stores the links to the search
      if(forms[i].searchlinkids) {
       forms[i].searchlinkids = forms[i].searchlinkids + "," + link.id;
      }
      else {
       forms[i].searchlinkids = link.id;
      }
      link.onclick = function() { 
       changeFormAction(formid, this.href, method);
       this.className = "active";
       return false;
      };
     }
    }
   }
  }
 }
}

function changeFormAction(form,action,method) {
 if(typeof(form) == 'string') {
  form = document.getElementById(form);
 }
 var f = form.searchlinkids.split(",");
 for (i=0; i<f.length; i++) {
  document.getElementById(f[i]).className = "";
 }
 // change action and method
 if(form.action) {
  form.action = action; 
 }
 if(form.method) {
  form.method = method;
 }
}

// use normal form method
addLoadEvent(setupForms);
// change method to 'get'
//addLoadEvent(function(){setupForms("get")});
// change method to 'post'
//addLoadEvent(function(){setupForms("post")});

The CSS: tabbedsearch.css

body {
  font: 0.8em Verdana;
}
ul.formpages {
  list-style-type: none;
  padding: 0;
  margin: 0;
  /* fix for IE 5 margin div bug */
  _display: inline;
}
ul.formpages li {
  float: left;
  display: inline;
  background-color: #C2DDFE;
  margin: 0 3px 0 0;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
  /* fix for Opera margin div bug */
  position: relative;
  top: 1px;
}
ul.formpages a:link, ul.formpages a:visited {
  text-decoration: none;
  padding: 5px;
  color: #008;
  border-bottom: 1px solid #000;
  display: block;
}
ul.formpages a:hover {
  background: #009;
  color: #fff;
}
ul.formpages a.active:link, ul.formpages a.active:hover, ul.formpages a.active:visited {
  background: #eee;
  color: #000;
}
div.searchbox {
  background: #eee; 
  border: 1px solid #000;
  margin: 0px;
  padding: 12px;
  width: 300px;
  clear: both;
}

Demo page: tabbedsearch.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tabbed Search</title>
<script type="text/javascript" src="tabbedsearch.js"></script>
<style type="text/css">
<!--
 @import url("tabbedsearch.css");
//-->
</style>
</head>
<body>
<form action="search1.aspx" method="post">
<p>Clicking on any of the below links will change the forms action.</p>
<ul class="formpages">
 <li><a href="search1.aspx" class="active">Search 1</a></li>
 <li><a href="search2.aspx">Search 2</a></li>
 <li><a href="search3.aspx">Search 3</a></li>
</ul>
<div class="searchbox">Search: <input type="text" name="keywords" />
<input type="submit" value="Search" />
</div>
</form>
<p>Content after</p>
</body>
</html>

Tags: , , ,

Monday, October 03, 2005

JavaScript DOM Text Clips (PN2)

More Text Clips for PN2. Work in progress. Useful when developing web pages, or any scripting that uses the W3C DOM and JavaScript.

<?xml version="1.0"?>
<clips name="JavaScript DOM">
<!-- reference DOM 1 latest: http://www.w3.org/TR/REC-DOM-Level-1/ecma-script-language-binding.html -->
<!-- reference DOM 2 core latest: http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html -->
<!-- reference DOM 2 html latest: http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html -->
<clip name="------ Document properties ------"></clip>
<clip name="anchors">document.anchors</clip>
<clip name="applets">document.applets</clip>
<clip name="body">document.body</clip>
<clip name="cookie">document.cookie</clip>
<clip name="domain">document.domain</clip>
<clip name="forms">document.forms</clip>
<clip name="images">document.images</clip>
<clip name="links">document.links</clip>
<clip name="referrer">document.referrer</clip>
<clip name="title">document.title</clip>
<clip name="URL">document.URL</clip>
<clip name="------ Document methods ------"></clip>
<clip name="close">document.close()</clip>
<clip name="createElement">document.createElement("|")</clip>
<clip name="createTextNode">document.createTextNode("|")</clip>
<clip name="getElementById">document.getElementById("|")</clip>
<clip name="getElementsByTagName">document.getElementsByTagName("|")</clip>
<clip name="open">document.open()|</clip>
<clip name="write">document.write("|")</clip>
<clip name="writeln">document.writeln("|")</clip>
<clip name="------ Node properties ------"></clip>
<clip name=".attributes">|.attributes</clip>
<clip name=".childNodes">|.childNodes</clip>
<clip name=".firstChild">|.firstChild</clip>
<clip name=".lastChild">|.lastChild</clip>
<clip name=".nextSibling">|.nextSibling</clip>
<clip name=".nodeName">|.nodeName</clip>
<clip name=".nodeType">|.nodeType</clip>
<clip name=".nodeValue">|.nodeValue</clip>
<clip name=".ownerDocument">|.ownerDocument</clip>
<clip name=".parentNode">|.parentNode</clip>
<clip name=".previousSibling">|.previousSibling</clip>
<clip name="------ Node methods ------"></clip>
<clip name=".appendChild(newChild)">|.appendChild(newChild)</clip>
<clip name=".cloneNode(deep)">|.cloneNode(deep)</clip>
<clip name=".hasChildNodes()">|.hasChildNodes()</clip>
<clip name=".insertBefore(newChild, refChild)">|.insertBefore(newChild, refChild)</clip>
<clip name=".removeChild(oldChild)">|.removeChild(oldChild)</clip>
<clip name=".replaceChild(newChild, oldChild)">|.replaceChild(newChild, oldChild)</clip>
<clip name="------ Attr object ------"></clip>
<clip name=".name">|.name</clip>
<clip name=".specified">|.specified</clip>
<clip name=".value">|.value</clip>
<clip name="------ Element object ------"></clip>
<clip name=".getAttribute(name)">|.getAttribute(name)</clip>
<clip name=".getAttributeNode(name)">|.getAttributeNode(name)</clip>
<clip name=".normalize()">|.normalize()</clip>
<clip name=".getElementsByTagName(name)">|.getElementsByTagName(name)</clip>
<clip name=".removeAttributeNode(oldAttr)">|.removeAttributeNode(oldAttr)</clip>
<clip name=".setAttribute(name, value)">|.setAttribute(name, value)</clip>
<clip name=".setAttributeNode(newAttr)">|.setAttributeNode(newAttr)</clip>
<clip name=".tagName">|.tagName</clip>
<clip name="------ HTMLElement object ------"></clip>
<clip name=".className">|.className</clip>
<clip name=".dir">|.dir</clip>
<clip name=".id">|.id</clip>
<clip name=".lang">|.lang</clip>
<clip name=".title">|.title</clip>
<clip name="------ HTMLHtmlElement object ------"></clip>
<clip name=".version">|.version</clip>
<clip name="------ HTMLHeadElement object ------"></clip>
<clip name=".profile">|.profile</clip>
<clip name="------ HTMLLinkElement object ------"></clip>
<clip name=".charset">|.charset</clip>
<clip name=".disabled">|.disabled</clip>
<clip name=".href">|.href</clip>
<clip name=".hreflang">|.hreflang</clip>
<clip name=".media">|.media</clip>
<clip name=".rel">|.rel</clip>
<clip name=".rev">|.rev</clip>
<clip name=".target">|.target</clip>
<clip name=".type">|.type</clip>
<clip name="------ HTMLTitleElement object ------"></clip>
<clip name=".text">|.text</clip>
<clip name="------ HTMLMetaElement object ------"></clip>
<clip name=".content">|.content</clip>
<clip name=".httpEquiv">|.httpEquiv</clip>
<clip name=".name">|.name</clip>
<clip name=".scheme">|.scheme</clip>
<clip name="------ HTMLBaseElement object ------"></clip>
<clip name=".href">|.href</clip>
<clip name=".target">|.target</clip>
<clip name="------ HTMLIsIndexElement object ------"></clip>
<clip name=".form">|.form</clip>
<clip name=".prompt">|.prompt</clip>
<clip name="------ HTMLStyleElement object ------"></clip>
<clip name=".disabled">|.disabled</clip>
<clip name=".media">|.media</clip>
<clip name=".type">|.type</clip>
<clip name="------ HTMLBodyElement object ------"></clip>
<clip name=".aLink">|.aLink</clip>
<clip name=".background">|.background</clip>
<clip name=".bgColor">|.bgColor</clip>
<clip name=".link">|.link</clip>
<clip name=".text">|.text</clip>
<clip name=".vLink">|.vLink</clip>
<clip name="------ HTMLFormElement properties ------"></clip>
<clip name=".acceptCharset">|.acceptCharset</clip>
<clip name=".action">|.action</clip>
<clip name=".elements">|.elements</clip>
<clip name=".enctype">|.enctype</clip>
<clip name=".length">|.length</clip>
<clip name=".method">|.method</clip>
<clip name=".name">|.name</clip>
<clip name=".target">|.target</clip>
<clip name="------ HTMLFormElement methods ------"></clip>
<clip name=".reset()">|.reset()</clip>
<clip name=".submit()">|.submit()</clip>
<clip name="------ HTMLSelectElement properties ------"></clip>
<clip name=".disabled">|.disabled</clip>
<clip name=".form">|.form</clip>
<clip name=".length">|.length</clip>
<clip name=".multiple">|.multiple</clip>
<clip name=".name">|.name</clip>
<clip name=".options">|.options</clip>
<clip name=".selectedIndex">|.selectedIndex</clip>
<clip name=".size">|.size</clip>
<clip name=".tabIndex">|.tabIndex</clip>
<clip name=".type">|.type</clip>
<clip name=".value">|.value</clip>
<clip name="------ HTMLSelectElement methods ------"></clip>
<clip name=".add(element, before)">|.add(element, before)</clip>
<clip name=".blur()">|.blur()</clip>
<clip name=".focus()">|.focus()</clip>
<clip name=".remove(index)">|.remove(index)</clip>
<clip name="------ HTMLOptGroupElement object ------"></clip>
<clip name=".disabled">|.disabled</clip>
<clip name=".label">|.label</clip>
<clip name="------ HTMLOptionElement object ------"></clip>
<clip name=".defaultSelected">|.defaultSelected</clip>
<clip name=".disabled">|.disabled</clip>
<clip name=".form">|.form</clip>
<clip name=".index">|.index</clip>
<clip name=".label">|.label</clip>
<clip name=".selected">|.selected</clip>
<clip name=".text">|.text</clip>
<clip name=".value">|.value</clip>
<clip name="------ HTMLInputElement properties ------"></clip>
<clip name=".accept">|.accept</clip>
<clip name=".accessKey">|.accessKey</clip>
<clip name=".align">|.align</clip>
<clip name=".alt">|.alt</clip>
<clip name=".checked">|.checked</clip>
<clip name=".defaultChecked">|.defaultChecked</clip>
<clip name=".defaultValue">|.defaultValue</clip>
<clip name=".disabled">|.disabled</clip>
<clip name=".form">|.form</clip>
<clip name=".maxLength">|.maxLength</clip>
<clip name=".name">|.name</clip>
<clip name=".readOnly">|.readOnly</clip>
<clip name=".size">|.size</clip>
<clip name=".src">|.src</clip>
<clip name=".tabIndex">|.tabIndex</clip>
<clip name=".type">|.type</clip>
<clip name=".useMap">|.useMap</clip>
<clip name=".value">|.value</clip>
<clip name="------ HTMLInputElement methods ------"></clip>
<clip name=".blur()">|.blur()</clip>
<clip name=".click()">|.click()</clip>
<clip name=".focus()">|.focus()</clip>
<clip name=".select()">|.select()</clip>
<clip name="------ HTMLTextAreaElement properties ------"></clip>
<clip name=".accessKey">|.accessKey</clip>
<clip name=".cols">|.cols</clip>
<clip name=".defaultValue">|.defaultValue</clip>
<clip name=".disabled">|.disabled</clip>
<clip name=".form">|.form</clip>
<clip name=".name">|.name</clip>
<clip name=".readOnly">|.readOnly</clip>
<clip name=".rows">|.rows</clip>
<clip name=".tabIndex">|.tabIndex</clip>
<clip name=".type">|.type</clip>
<clip name=".value">|.value</clip>
<clip name="------ HTMLTextAreaElement methods ------"></clip>
<clip name=".blur()">|.blur()</clip>
<clip name=".focus()">|.focus()</clip>
<clip name=".select()">|.select()</clip>
<clip name="------ HTMLButtonElement object ------"></clip>
<clip name=".accessKey">|.accessKey</clip>
<clip name=".disabled">|.disabled</clip>
<clip name=".form">|.form</clip>
<clip name=".name">|.name</clip>
<clip name=".tabIndex">|.tabIndex</clip>
<clip name=".type">|.type</clip>
<clip name=".value">|.value</clip>
<clip name="------ HTMLLabelElement object ------"></clip>
<clip name=".accessKey">|.accessKey</clip>
<clip name=".form">|.form</clip>
<clip name=".htmlFor">|.htmlFor</clip>
<clip name="------ HTMLFieldSetElement object ------"></clip>
<clip name=".form">|.form</clip>
<clip name="------ HTMLLegendElement object ------"></clip>
<clip name=".accessKey">|.accessKey</clip>
<clip name=".align">|.align</clip>
<clip name=".form">|.form</clip>
<clip name="------ HTMLUListElement object ------"></clip>
<clip name=".compact">|.compact</clip>
<clip name=".type">|.type</clip>
<clip name="------ HTMLOListElement object ------"></clip>
<clip name=".compact">|.compact</clip>
<clip name=".start">|.start</clip>
<clip name=".type">|.type</clip>
<clip name="------ HTMLDList/Directory/MenuElement object ------"></clip>
<clip name=".compact">|.compact</clip>
<clip name="------ HTMLLIElement object ------"></clip>
<clip name=".type">|.type</clip>
<clip name=".value">|.value</clip>
<clip name="------ HTMLBlockquote/QuoteElement object ------"></clip>
<clip name=".cite">|.cite</clip>
<clip name="------ HTMLDiv/Paragraph/HeadingElement object ------"></clip>
<clip name=".align">|.align</clip>
<clip name="------ HTMLPreElement object ------"></clip>
<clip name=".width">|.width</clip>
<clip name="------ HTMLBRElement object ------"></clip>
<clip name=".clear">|.clear</clip>
<clip name="------ HTMLBaseFont/FontElement object ------"></clip>
<clip name=".color">|.color</clip>
<clip name=".face">|.face</clip>
<clip name=".size">|.size</clip>
<clip name="------ HTMLHRElement object ------"></clip>
<clip name=".align">|.align</clip>
<clip name=".noShade">|.noShade</clip>
<clip name=".size">|.size</clip>
<clip name=".width">|.width</clip>
<clip name="------ HTMLModElement object ------"></clip>
<clip name=".cite">|.cite</clip>
<clip name=".dateTime">|.dateTime</clip>
<clip name="------ HTMLAnchorElement properties ------"></clip>
<clip name=".accessKey">|.accessKey</clip>
<clip name=".charset">|.charset</clip>
<clip name=".coords">|.coords</clip>
<clip name=".href">|.href</clip>
<clip name=".hreflang">|.hreflang</clip>
<clip name=".name">|.name</clip>
<clip name=".rel">|.rel</clip>
<clip name=".rev">|.rev</clip>
<clip name=".shape">|.shape</clip>
<clip name=".tabIndex">|.tabIndex</clip>
<clip name=".target">|.target</clip>
<clip name=".type">|.type</clip>
<clip name="------ HTMLAnchorElement methods ------"></clip>
<clip name=".blur()">|.blur()</clip>
<clip name=".focus()">|.focus()</clip>
<clip name="------ HTMLImageElement object ------"></clip>
<clip name=".align">|.align</clip>
<clip name=".alt">|.alt</clip>
<clip name=".border">|.border</clip>
<clip name=".height">|.height</clip>
<clip name=".hspace">|.hspace</clip>
<clip name=".isMap">|.isMap</clip>
<clip name=".longDesc">|.longDesc</clip>
<clip name=".lowSrc">|.lowSrc</clip>
<clip name=".name">|.name</clip>
<clip name=".src">|.src</clip>
<clip name=".useMap">|.useMap</clip>
<clip name=".vspace">|.vspace</clip>
<clip name=".width">|.width</clip>
<clip name="------ HTMLObjectElement object ------"></clip>
<clip name=".align">|.align</clip>
<clip name=".archive">|.archive</clip>
<clip name=".border">|.border</clip>
<clip name=".code">|.code</clip>
<clip name=".codeBase">|.codeBase</clip>
<clip name=".codeType">|.codeType</clip>
<clip name=".data">|.data</clip>
<clip name=".declare">|.declare</clip>
<clip name=".form">|.form</clip>
<clip name=".height">|.height</clip>
<clip name=".hspace">|.hspace</clip>
<clip name=".name">|.name</clip>
<clip name=".standby">|.standby</clip>
<clip name=".tabIndex">|.tabIndex</clip>
<clip name=".type">|.type</clip>
<clip name=".useMap">|.useMap</clip>
<clip name=".vspace">|.vspace</clip>
<clip name=".width">|.width</clip>
<clip name="------ HTMLParamElement object ------"></clip>
<clip name=".name">|.name</clip>
<clip name=".type">|.type</clip>
<clip name=".value">|.value</clip>
<clip name=".valueType">|.valueType</clip>
<clip name="------ HTMLAppletElement object ------"></clip>
<clip name=".align">|.align</clip>
<clip name=".alt">|.alt</clip>
<clip name=".archive">|.archive</clip>
<clip name=".code">|.code</clip>
<clip name=".codeBase">|.codeBase</clip>
<clip name=".height">|.height</clip>
<clip name=".hspace">|.hspace</clip>
<clip name=".name">|.name</clip>
<clip name=".object">|.object</clip>
<clip name=".vspace">|.vspace</clip>
<clip name=".width">|.width</clip>
<clip name="------ HTMLMapElement object ------"></clip>
<clip name=".areas">|.areas</clip>
<clip name=".name">|.name</clip>
<clip name="------ HTMLAreaElement object ------"></clip>
<clip name=".accessKey">|.accessKey</clip>
<clip name=".alt">|.alt</clip>
<clip name=".coords">|.coords</clip>
<clip name=".href">|.href</clip>
<clip name=".noHref">|.noHref</clip>
<clip name=".shape">|.shape</clip>
<clip name=".tabIndex">|.tabIndex</clip>
<clip name=".target">|.target</clip>
<clip name="------ HTMLScriptElement object ------"></clip>
<clip name=".charset">|.charset</clip>
<clip name=".defer">|.defer</clip>
<clip name=".event">|.event</clip>
<clip name=".htmlFor">|.htmlFor</clip>
<clip name=".src">|.src</clip>
<clip name=".text">|.text</clip>
<clip name=".type">|.type</clip>
<clip name="------ HTMLTableElement properties ------"></clip>
<clip name=".align">|.align</clip>
<clip name=".bgColor">|.bgColor</clip>
<clip name=".border">|.border</clip>
<clip name=".caption">|.caption</clip>
<clip name=".cellPadding">|.cellPadding</clip>
<clip name=".cellSpacing">|.cellSpacing</clip>
<clip name=".frame">|.frame</clip>
<clip name=".rows">|.rows</clip>
<clip name=".rules">|.rules</clip>
<clip name=".summary">|.summary</clip>
<clip name=".tFoot">|.tFoot</clip>
<clip name=".tHead">|.tHead</clip>
<clip name=".width">|.width</clip>
<clip name="------ HTMLTableElement methods ------"></clip>
<clip name=".createCaption()">|.createCaption()</clip>
<clip name=".createTFoot()">|.createTFoot()</clip>
<clip name=".createTHead()">|.createTHead()</clip>
<clip name=".deleteCaption()">|.deleteCaption()</clip>
<clip name=".deleteTFoot()">|.deleteTFoot()</clip>
<clip name=".deleteTHead()">|.deleteTHead()</clip>
<clip name=".deleteRow(index)">|.deleteRow(index)</clip>
<clip name=".insertRow(index)">|.insertRow(index)</clip>
<clip name="------ HTMLTableCaptionElement object ------"></clip>
<clip name=".align">|.align</clip>
<clip name="------ HTMLTableColElement object ------"></clip>
<clip name=".align">|.align</clip>
<clip name=".ch">|.ch</clip>
<clip name=".chOff">|.chOff</clip>
<clip name=".span">|.span</clip>
<clip name=".vAlign">|.vAlign</clip>
<clip name=".width">|.width</clip>
<clip name="------ HTMLTableSectionElement properties ------"></clip>
<clip name=".align">|.align</clip>
<clip name=".ch">|.ch</clip>
<clip name=".chOff">|.chOff</clip>
<clip name=".vAlign">|.vAlign</clip>
<clip name=".width">|.width</clip>
<clip name="------ HTMLTableSectionElement methods ------"></clip>
<clip name=".deleteRow(index)">|.deleteRow(index)</clip>
<clip name=".insertRow(index)">|.insertRow(index)</clip>
<clip name="------ HTMLTableRowElement properties ------"></clip>
<clip name=".align">|.align</clip>
<clip name=".bgColor">|.bgColor</clip>
<clip name=".cells">|.cells</clip>
<clip name=".ch">|.ch</clip>
<clip name=".chOff">|.chOff</clip>
<clip name=".rowIndex">|.rowIndex</clip>
<clip name=".sectionRowIndex">|.sectionRowIndex</clip>
<clip name=".vAlign">|.vAlign</clip>
<clip name="------ HTMLTableRowElement methods ------"></clip>
<clip name=".deleteCell(index)">|.deleteCell(index)</clip>
<clip name=".insertCell(index)">|.insertCell(index)</clip>
<clip name="------ HTMLTableCellElement object ------"></clip>
<clip name=".abbr">|.abbr</clip>
<clip name=".align">|.align</clip>
<clip name=".axis">|.axis</clip>
<clip name=".bgColor">|.bgColor</clip>
<clip name=".cellIndex">|.cellIndex</clip>
<clip name=".ch">|.ch</clip>
<clip name=".chOff">|.chOff</clip>
<clip name=".colSpan">|.colSpan</clip>
<clip name=".headers">|.headers</clip>
<clip name=".height">|.height</clip>
<clip name=".noWrap">|.noWrap</clip>
<clip name=".rowSpan">|.rowSpan</clip>
<clip name=".scope">|.scope</clip>
<clip name=".vAlign">|.vAlign</clip>
<clip name=".width">|.width</clip>
<clip name="------ HTMLFrameSetElement object ------"></clip>
<clip name=".cols">|.cols</clip>
<clip name=".rows">|.rows</clip>
<clip name="------ HTMLFrameElement object ------"></clip>
<clip name=".frameBorder">|.frameBorder</clip>
<clip name=".longDesc">|.longDesc</clip>
<clip name=".marginHeight">|.marginHeight</clip>
<clip name=".marginWidth">|.marginWidth</clip>
<clip name=".name">|.name</clip>
<clip name=".noResize">|.noResize</clip>
<clip name=".scrolling">|.scrolling</clip>
<clip name=".src">|.src</clip>
<clip name="------ HTMLIFrameElement object ------"></clip>
<clip name=".align">|.align</clip>
<clip name=".frameBorder">|.frameBorder</clip>
<clip name=".height">|.height</clip>
<clip name=".longDesc">|.longDesc</clip>
<clip name=".marginHeight">|.marginHeight</clip>
<clip name=".marginWidth">|.marginWidth</clip>
<clip name=".name">|.name</clip>
<clip name=".scrolling">|.scrolling</clip>
<clip name=".src">|.src</clip>
<clip name=".width">|.width</clip>
</clips>

Tags: ,

getInnerText (JavaScript)

This function gets the inner text of the supplied node. It is recursive, so includes inner text of any child nodes. <br /> tags will be converted to linebreaks. Whitespace can be optionally excluded.

Should work in any W3C DOM level 1 compliant browser.

Simple to use - just do:

myNode = document.getElementById("myNode");
// include whitespace
var text = getInnerText(myNode);
var textNoWhiteSpace = getInnerText(myNode,true);

And the script itself:

function getInnerText(node,ignorewhitespace)
{
 var text = "";
 // if the node has children, loop through them
 if(node.hasChildNodes())
 {
  var children = node.childNodes;
  for(var i=0; i<children.length; i++)
  {
   // if node is a text node append it
   if(children[i].nodeName == "#text")
   {
    if(ignorewhitespace)
    {
     if(!/^\s+$/.test(children[i].nodeValue))
     {
      text = text.concat(children[i].nodeValue);
     }
    }
    else
    {
     text = text.concat(children[i].nodeValue);
    }
   }
   // if node is a line break append \n
   else if(children[i].nodeName == "BR")
   {
    text = text.concat("\n");
   }
   // otherwise call this function again to get the text
   else
   {
    text = text.concat(getInnerText(children[i]));
   }
  }
 }
 // it has no children, so get the text
 else
 {
  // if node is a text node append it
  if(node.nodeName == "#text")
  {
   text = text.concat(node.nodeValue);
  }
  // if node is a line break append \n
  else if(node.nodeName == "BR")
  {
   text = text.concat("\n");
  }
 }
 return text;
}

Tags: ,