Too much recursion 

Higher Order Javascript


   Subscribe in NewsGator Online    Subscribe in Rojo    Add to Google      Add to My AOL   Subscribe in FeedLounge   Add to netvibes  

Brendan Eich's Roadmap  Standard ECMA-262  Yahoo! UI Library     

Saturday, September 23, 2006


IE 5.5 IE6.x Transparent PNG fix + Mimified Brothercake Browser Detect

IE png fix. Works well. Included with a condensed/optimized version of Brothercake's Browser Detection Script. Read comments for use with or without browser detection.

// minified Brothercake browser detection object (thanks bro!)
// usage: alert(Browser.browser+'\n'+Browser.version+'\n'+Browser.OS)
var Browser = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion) || "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
searchString: function (data) {
for (var i=0,len=data.length;i var dataString = data[i].string, dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if((dataString) && (dataString.indexOf(data[i].subString) != -1)||(dataProp)){
return data[i].identity
} } },
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString); if (index == -1) return;
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
dataBrowser: [
{string: navigator.vendor, subString: "Apple", identity: "Safari"},
{prop: window.opera,identity: "Opera"},
{string: navigator.vendor, subString: "iCab", identity: "iCab"},
{string: navigator.vendor, subString: "KDE", identity: "Konqueror"},
{string: navigator.userAgent,subString: "Firefox", identity: "Firefox"},
{string: navigator.userAgent,subString: "Netscape",identity: "Netscape"},// for newer Netscapes (6+)
{string: navigator.userAgent,subString: "MSIE", identity: "IE", versionSearch: "MSIE"},
{string: navigator.userAgent,subString: "Gecko", identity: "Mozilla", versionSearch: "rv"},
{string: navigator.userAgent,subString: "Mozilla", identity: "Netscape",versionSearch: "Mozilla"}],// for older Netscapes (4-)
dataOS : [
{string: navigator.platform, subString: "Win", identity: "Windows"},
{string: navigator.platform, subString: "Mac", identity: "Mac" },
{string: navigator.platform, subString: "Linux", identity: "Linux" }]

// IE PNG FIX: correctly handle PNG transparency in Win IE 5.5 > 6.x
if((Browser.version>5.4) && (Browser.version<7) && (Browser.browser=='IE')){
// uncomment line below and comment line above to become independent of browser detect script
//if(window.attachEvent && (parseFloat(navigator.appVersion.split("MSIE")[1])<7)){
window.attachEvent("onload",function(){ if (document.body.filters){
var i=document.images.length; while(i--){
var img = document.images[i], imgName = img.src.toUpperCase();
if (imgName.substring(imgName.length-3, imgName.length) == "PNG"){ var
imgID = ( ? "id='" + + "' " : "",
imgClass = (img.className) ? "class='" + img.className + "' " : "",
imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ",
imgStyle = "display:inline-block;" +;
if (img.align == "left") image.align='left'; //imgStyle = "float:left;" + imgStyle
if (img.align == "right")image.align='left'; //imgStyle = "float:right;"+ imgStyle
if (img.parentElement.href) imgStyle = "cursor:pointer;" + imgStyle
img.outerHTML= " + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\">
} } } } ) };


Function.prototype.toEvent (bindAsEventListener)



This one keeps this and sends event object as the first argument (no more checking!). It also has only one parameter or parameters maybe- the argument/s you want to send to your function. Thats it! Bonus: the last argument is the co-ordinates of the event.
Explanation:Say you want to attach an onclick event to a button with id of 'myBut':
So far so good. Lets make a function for it to connect to. Remember, the first argument of an event is e. (IE doesn't use that, but we've made IE act like the rest now). Notice how this is our button.
function doSomTing(e,h,w){
alert(this.nodeName+ " " h + w);

OK. so lets attach this function to our event. We need to pass 2 arguments (e is automagically sent):

document.getElementById('myBut').onclick= doSomTing.toEvent('Hello ','World')

Here it is:

// Function.prototype.toEvent, .bindAsEventListener( args ) rem2006
// Important: sends event as the first argument to your function in IE also!,
// event XY [Array][x,y] is passed as last arg, your passed args are in the middle :)
// example: myElement.onclick= myFunc.toEvent( myArguments );
Function.prototype.toEvent = Function.prototype.bindAsEventListener= function(){
var _method= this, r=[], len=arguments.length, i=0;//alert(len)
for (i;i return function( ev ){ r[0]= ev= ev || event;
var db=document.body, dd=document.documentElement;
r[r.length++]=(ev.pageX)? [ev.pageX, ev.pageY] :
[ev.clientX + db.scrollLeft+ dd.scrollLeft,
ev.clientY + db.scrollTop + dd.scrollTop];
return _method.apply(|| ev.srcElement, r);

Friday, September 22, 2006


String.prototype.exe part2

Think I got it this time:
// executes string as body of function, args = comma seprated arguments
// ex.: 'var h=arguments[0]; var w=arguments[1]; alert(h+"\\n"+w)'.exe('Hello','World');
String.prototype.exe = function(){
eval( 'function(){' +this+ '}' ).apply(this,arguments);

Tuesday, September 19, 2006


Javascript Speed Tester new version

Test your javascript functions out with jsSpeedTester v0.45:


download with this.js api:

Sunday, September 17, 2006


goodbye expando hello addData, getData

Why are expando's needed? To hold data. Sometimes, the data is another node(bad for ie). So how do we store data about an element? Say a div wants to know who its 2 'brother nodes' are, or an element wants to keep track of its size changes? Whatever, check this out:

String.prototype.addData= = function(n,v){
if (!window.elData){window.elData=[]}
if( !elData[this] ){ elData[this]=[] }
if( !n ){ elData[elData.length++]=this }else{ elData[this][n]=v };
return this;
String.prototype.getData= = function(n){
return( n )? elData[this][n] : elData[this];

Now add all the data you want. Say the div previously mentioned has an id of 'blah':

Getting the data is also easy:
b1= 'blah'.gd('b1'); b2= 'blah'.gd('b1');;

This can also be used for classNames, function args...



String.prototype.cssObj( styleObject[Object][optional] )
String.prototype.cssObj= function( styleObj ){ styleObj = styleObj || {};
var pairs=this.replace( /(^\s*)|(;\s*$)/g, '' ).split( /\s*;\s*/ ),selector,propAndVal,i=pairs.length;
while( i-- ){ propAndVal= pairs[i].split( /\s*:\s*/ );
selector=propAndVal[0] ;if( selector.match(/-/) ){ }
styleObj[ selector ]= propAndVal[1].toLowerCase()}; return styleObj;
String.prototype.camelCase= = function(){
return this.replace(/-\D/gi, function(match){return match.charAt(match.length - 1).toUpperCase()} );

This code fits in wonderfully with many of the dom creation functions around, like the one on here. Example:
var s={ backgroundColor:'#f00',position:'absolute', width:'50px', height:'50px'};
'padding:5px; border-width:4px; border-style:solid; border-color:#333'.cssObj(s);


June 2006   July 2006   August 2006   September 2006  

This page is powered by Blogger. Isn't yours?