DZone Snippets: Bradalyst's Code Snippets

Unobtrusively Executing JavaScript on Page Load

bradalyst (brad) — Fri, 12 Oct 2007 16:51:15 GMT

http://simonwillison.net/2004/May/26/addLoadEvent/

The addLoadEvent function takes as an argument another function which should be executed once the page has loaded. Unlike assigning directly to window.onload, the function adds the event in such a way that any previously added onload functions will be executed first.

The way this works is relatively simple: if window.onload has not already been assigned a function, the function passed to addLoadEvent is simply assigned to window.onload. If window.onload has already been set, a brand new function is created which first calls the original onload handler, then calls the new handler afterwards.

addLoadEvent has one very important property: it will work even if something has previously been assigned to window.onload without using addLoadEvent itself. This makes it ideal for use in scripts that may be executing along side other scripts that have already been registered to execute once the page has loaded.



function addLoadEvent(func) {

  var oldonload = window.onload;

  if (typeof window.onload != 'function') {

    window.onload = func;

  }

  else {

    window.onload = function() {

      if (oldonload) {

        oldonload();

      }

      func();

    }

  }

}



addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);

addLoadEvent(function() {

  /* more code to run on page load */ 

});

HTML/JavaScript - Select list - Add/Remove Options (DOM)

bradalyst (brad) — Wed, 22 Aug 2007 12:39:41 GMT

from http://www.mredkj.com/tutorials/tutorial005.html

Overview

* Insert Before Selected - A new option is created and added above the selected option (as determined by selectedIndex). If none are selected, then no option is added.
* Remove Selected - Deletes the selected option (or options) from the list. If no options are selected, no options are deleted.
* Append Last - No matter what is selected, a new option is added at the end.
* Remove Last - No matter what is selected, the last option is deleted from the list.

Explanation

According to DOM Level 1, the following is the syntax for the add and remove methods in HTMLSelectElement:

void add(in HTMLElement element, in HTMLElement before) raises(DOMException);
void remove(in long index);

The add method takes two arguments: the element to add, and the element to insert before. The spec also says you can add to the end of the list by passing null as the second argument.

The remove method just takes a number: the index of the option to be removed.

The JavaScript

The HTML







Insert Before Selected




Remove Selected









Append Last




Remove Last

Automatic Breadcrumbs

bradalyst (brad) — Fri, 17 Aug 2007 13:18:19 GMT

From: http://hyperdisc.unitec.ac.nz/materials/javascript/top10/breadcrumbs.htm

It is possible to hard-code the links in a breadcrumb trail - i.e. to add all the links manually. It is also possible to automatically produce a breadcrumb trail for all pages. This can be done server-side using XSSI, ASP, ColdFusion or PHP. It can also be done client-side using JavaScript.

This is working at the top of every page in the Materials site.

You need to add the function JavaScript to the HEAD of every page and the call to the function in the BODY of every page, wherever you would like the breadcrumb trail to appear. You can add the call to the function multiple times in the same page.

Points to note about this version of the script:

* It wraps the entire breadcrumb trail in a CSS class called "topnav". You can style this however you like, or you could modify the script to change 'topnav' to any CSS class name you want.
* It names the site "Hyperdisc". You need to modify the script to change the name to something else.
* It assumes that the homepage of the site is in the root directory of the web server. If the homepage of your site is actually in a sub-directory, you would need to seriously modify the script.
* You need to have an index.htm (or equivalent) file in each directory or the user will experience 403 errors.
* Apparantly this script causes errors in older browsers.
* Also note that this script does not work in frames.

javascript - dom method for replacing nodes

bradalyst (brad) — Fri, 15 Sep 2006 22:53:32 GMT

In addition to removing nodes, the DOM offers a way to replace one node with another. The replaceChild method accomplishes this. As with removeChild above, replaceChild needs to be called from the element that contains the node you wish to replace.

replaceChild takes two arguments: a reference to the new node, and another to the node being replaced. The following example creates a new SPAN element containing a text node, and uses it to replace an existing SPAN.



The quick brown fox jumps over the lazy dog.

javascript - dom method for removing nodes

bradalyst (brad) — Fri, 15 Sep 2006 22:50:11 GMT

You can remove existing nodes as well as add new ones. The removeChild method allows any node to remove one of its child nodes. Simply pass a reference to the node you wish to remove. Any text or elements within the node being removed will be removed along with it.



Click this link to see the above script in action.