Small javascript Library - updated 12th July 2011

The small javascript weighs in at 6.9kB (un minified) and contains all the routines used in these pages.
Certainly for someone connected on dial up this might be unacceptable - maybe 2s to download just the javascript library? How long do people live?
Pursuant to our stated aim of being nice to everyone then, we should always trim the function that we are not using in the site.
I know that some reader don't really want to learn javascript, simply wishing instead, to make a cool website with the minimum of effort - good for you say I.
To this end I shall endeavour to include as many examples (over time) as will make for easy editing and use.
The small library has been tested successfully on the following Browsers;

Firefox 100% OK

Safari 95% it just can't do border radius Google chrome 98% these can't read border radius (an acceptable work around is in place)

Opera tested through time - always seemed OK The latest version - the library works well.

Internet Explorer 6 up to 10 (pre release) 90% but IE is a desperately slow and crippled affair - not much we can do about that. If we would try to run too many animations at once IE will certainly reveal its infirmities.
Perhaps thats not a bad thing though.
After all, we are all constantly amused that anyone at all would be foolish enough to ever use the thing (whose failings are far too numerous to list here) and yet why shouldn't they? If web designers are constantly inventing new ways to fool IE users into thinking the damn thing actually works?
Please rest assured that the small javascript library does work with IE, but perhaps if you are making your own personal web site, you may, at least on one of your pages, really push the boat out and in so doing, subtly point out to your IE users, the error of their ways.

Just think of the joy on their lil faces once they discover what a REAL browser can do!

Editing the small library.


Science is fun!!!! never take it seriously.

Download Library

The class part of the library ( the bit that deals with 'class' attribute of the HTML tag in question ) is at the very top of the library.
Referring to the code, if we have finished out web site and find that we have not used $$(elementClass).css, or $$(elementClass).h, we should remove the relevant parts of the library.

‚Äč
$$ = function(a) {
	gr = new Array();
	co = document.getElementsByTagName('*');
	l=co.length;
	len=0;
	for (i=0;i < l;i++) {
		try {
			if (co[i].attributes['class']) {
				if (co[i].attributes['class'].value.search(a)!=-1) {
					nam='xx'+Math.floor(Math.random()*1701);//silly Yummy
					if (!co[i].id)
						co[i].setAttribute('id', nam);
					len=gr.push(co[i]);
				}
			}
		} catch(e) {
		}
	}
	gr.css = function(a,b) {
		for (i=0;i< len;i++) 
				gr[i].style[a] =  b ;
	}
	gr.w = function(w) {
		for (i=0;i< len;i++)
			$(gr[i].id).w(w);
	}
	gr.h= function(w) {
		for (i=0;i< len;i++) {
			$(gr[i].id).h(w);
		}
	}
	gr.op = function(w) {
		for (i=0;i< len;i++)
			$(gr[i].id).op(w);
	}
	return gr;
}

First lets get rid of the css. [ gr.css ] in the code. So:

$$ = function(a) {
	gr = new Array();
	co = document.getElementsByTagName('*');
	l=co.length;
	len=0;
	for (i=0;i < l;i++) {
		try {
			if (co[i].attributes['class']) {
				if (co[i].attributes['class'].value.search(a)!=-1) {
					nam='xx'+Math.floor(Math.random()*1701);
					if (!co[i].id)
						co[i].setAttribute('id', nam);
					len=gr.push(co[i]);
				}
			}
		} catch(e) {
		}
	}
	gr.w = function(w) {
		for (i=0;i< len;i++)
			$(gr[i].id).w(w);
	}
	gr.h= function(w) {
		for (i=0;i< len;i++) {
			$(gr[i].id).h(w);
		}
	}
	gr.op = function(w) {
		for (i=0;i< len;i++)
			$(gr[i].id).op(w);
	}
	return gr;
}

..and now the height:

$$ = function(a) {
	gr = new Array();
	co = document.getElementsByTagName('*');
	l=co.length;
	len=0;
	for (i=0;i < l;i++) {
		try {
			if (co[i].attributes['class']) {
				if (co[i].attributes['class'].value.search(a)!=-1) {
					nam='xx'+Math.floor(Math.random()*1701);
					if (!co[i].id)
						co[i].setAttribute('id', nam);
					len=gr.push(co[i]);
				}
			}
		} catch(e) {
		}
	}
	gr.css = function(a,b) {
		for (i=0;i< len;i++) 
				gr[i].style[a] =  b ;
	}
	gr.w = function(w) {
		for (i=0;i< len;i++)
			$(gr[i].id).w(w);
	}
	gr.op = function(w) {
		for (i=0;i< len;i++)
			$(gr[i].id).op(w);
	}
	return gr;
}

So, it's all very easy. If there's a dentist in the house, he will get the idea. If we haven't used class at all, we just bin the lot.


		




Clearly, if we wished to add a function, we would simply insert it somewhere, anywhere in the middle DIRECTLY before an existing 'function() {' statement.


As you will have guessed, the same is true for the other part of the library.



OK, well time for the food shopping. More usage examples later. Enjoy!