Deep Tech Fusion

tech related weblog

Custom JavaScript functions

10) addEvent()

Surely a staple to event attachment! Regardless to what version you use written by whatever developer, it does what it says it does. And of course as you might of known, I’ve put together quite a handy version myself recently of addEvent() with some help from the contest winner and Mark Wubben along with a few minor syntax adjustments. But just to be fair to Scott Andrew, here is the original that started it all.
Scott Andrew’s original addEvent() function

function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
}
else if (elm.attachEvent) {
var r = elm.attachEvent(‘on’ + evType, fn);
return r;
}
else {
elm[‘on’ + evType] = fn;
}
}

9) addLoadEvent()

Originally written by Simon Willison and highly adopted by many others as a simple way to add events to trigger after the page has loaded. This of course attaches all your events to the onload event handler which some still see as necessary, nevertheless it does exactly what it’s supposed to, and does it well.
addLoadEvent() by Simon Willison

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != ‘function’) {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}

Of course another method is to simply assign multiple event listeners to the window by using addEvent() as described in number 10 as follows:
assigning multiple load events to window

addEvent(window,’load’,func1,false);
addEvent(window,’load’,func2,false);
addEvent(window,’load’,func3,false);

8) getElementsByClass()
Originially written by nobody in particular. Several developers have implemented their own version and no one single version has proven to be better than another. As you might expect, my humble self has even had a crack at it. This function was spawned from developers needing a quick and elegant way of grabbing elements by a className and to a developer’s surprise, it’s not an original DOM method as one might think…afterall, we have getElementById, getElementsByName(), getElementsByTagName, what the hell happened to getElementsByClass??? Here it is in all its glory:

getElementsByClass by Dustin Diaz

function getElementsByClass(searchClass,node,tag) {

	var classElements = new Array();

	if ( node == null )

		node = document;

	if ( tag == null )

		tag = '*';

	var els = node.getElementsByTagName(tag);

	var elsLen = els.length;

	var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');

	for (i = 0, j = 0; i < elsLen; i++) {

		if ( pattern.test(els[i].className) ) {

			classElements[j] = els[i];

			j++;

		}

	}

	return classElements;

}

Simply add a class name to the beginning of the funciton and the 2nd and 3rd arguments are optional and the magic is done for you!

7) cssQuery()

version 2.0.2

getElementsByTagName? Pah!

Introduction

cssQuery() is a powerful cross-browser JavaScript function that enables querying of a DOM document using CSS selectors. All CSS1 and CSS2 selectors are allowed plus quite a few CSS3 selectors.

Usage

Syntax

elements = cssQuery(selector [, from]);

where selector (required) is a valid CSS selector and from (optional) is a document, element or array of elements which is filtered by selector.

The function returns a JavaScript array of elements. If there is no match, an empty array is returned.

Some examples:

// find all paragraphs that are direct descendants //  of the document body var tags = cssQuery("body > p");  // find all elements with the "href" attribute var tags = cssQuery("[href]");  // find all anchor elements with "href" equal to "#" var tags = cssQuery("a[href='#']"); // find all images contained by the above anchors var images = cssQuery("img", tags);  // find all lists var tags = cssQuery("dl,ol,ul");  // query an external xml document var tags = cssQuery("my|:root>my|link", myXMLDoc);  // just plain complicated var complex = "p>a:first-child+input[type=text]~span"; var tags = cssQuery(complex);

6) toggle()

<a href=’http://ads.developertutorials.com/adclick.php?n=af051ed1&#8242; target=’_parent’><img src=’http://ads.developertutorials.com/adview.php?what=zone:6&amp;n=af051ed1&#8242; border=’0′ alt=”></a>

To be totally honest, there are probably more variations of this function than there needs to be. The history of ‘toggling’ basically comes down to showing/hiding an element upon an event being fired. To make matters much simpler, I too have put one together. But by no means is it considered the ultimate toggle function, but it does do the basic functionality of showing and hiding.

toggle() by the masses

function toggle(obj) { 
	var el = document.getElementById(obj); 
	if ( el.style.display != 'none' ) { 
		el.style.display = 'none'; 
	} 
	else { 
		el.style.display = ''; 
	} 
}

5) insertAfter()

As far as I know, Jeremy Keith sort of came up with this idea even though one would have thought this too would be a DOM core method. But just like getElementsByClass, it isn’t. So rather than pulling the function straight out of the book, I’ll leave that up to you to buy it yourself. Instead I’ve pulled this simple method from public domain:

insertAfter() on public domain

function insertAfter(parent, node, referenceNode) { 
	parent.insertBefore(node, referenceNode.nextSibling); 
}

4) inArray()

This too is very sad that this isn’t part of the DOM core functionality. But hey, it makes for fun references like this! This function however isn’t quite a function; it’s a prototype that extends the DOM Array object. I remember one day thinking to myself “surely I can do this in PHP, it’s gotta be in JavaScript.” Well, this extension makes it work just like you’d expect if you’re a PHP developer. Here is a version from EmbiMEDIA

inArray Prototype Array object by EmbiMedia

 
Array.prototype.inArray = function (value) { 
	var i; 
	for (i=0; i < this.length; i++) { 
		if (this[i] === value) { 
			return true; 
		} 
	} 
	return false; 
};

3, 2, & 1) getCookie(), setCookie(), deleteCookie()
             
<a href=’http://ads.developertutorials.com/adclick.php?n=af051ed1&#8242; target=’_parent’><img src=’http://ads.developertutorials.com/adview.php?what=zone:6&amp;n=af051ed1&#8242; border=’0′ alt=”></a>

I honestly don’t know what I would do without these guys. I hate the DOM implementations of setting cookies in JavaScript. In PHP it’s so easy, and it’s easy for one main reason, they work just like the functions below. All three of these functions were found to be public domain and free to use.

getCookie(), setCookie(), deleteCookie() open domain

function getCookie( name ) {
var start = document.cookie.indexOf( name + "=" );
var len = start + name.length + 1;
if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
return null;
}
if ( start == -1 ) return null;
var end = document.cookie.indexOf( ';', len );
if ( end == -1 ) end = document.cookie.length;
return unescape( document.cookie.substring( len, end ) );
}

function setCookie( name, value, expires, path, domain, secure ) {
var today = new Date();
today.setTime( today.getTime() );
if ( expires ) {
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );
document.cookie = name+'='+escape( value ) +
( ( expires ) ? ';expires='+expires_date.toGMTString() : '' ) + //expires.toGMTString()
( ( path ) ? ';path=' + path : '' ) +
( ( domain ) ? ';domain=' + domain : '' ) +
( ( secure ) ? ';secure' : '' );
}

function deleteCookie( name, path, domain ) {
if ( getCookie( name ) ) document.cookie = name + '=' +
( ( path ) ? ';path=' + path : '') +
( ( domain ) ? ';domain=' + domain : '' ) +
';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}


Prototype function $

function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}

Advertisements

December 18, 2006 - Posted by | JAVASCRIPT

1 Comment »

  1. […] Custom JavaScript functions Monday, Dec 18 2006 […]

    Pingback by JAVA SCRIPT «SUN TECH FUSION SUN TECH FUSION | March 22, 2016 | Reply


Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: