Web Developer Blog

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: Web Developer Blog , JavaScript

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

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: Web Developer Blog , PN2

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

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

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

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