Top Javascript Code Snippets for 2007

Javascript examples for web developers in 2007. All of my favorite unobtrusive javascript code and javascript examples that I use while building best-practices web sites. If you are even a remotely talented webdesigner who utilizes javascript, you will love this article!

NOTE: I am kinda obsessed with robust and highly accessible and unobtrusive code, as well as web-standards and cross-browser functionality, so this code is all good baby.

The javascript examples

Get the object!

//------------------------------------
// gi
function gi(eleName){
    if(document.getElementById&&document.getElementById(eleName)) return document.getElementById(eleName)
    else if(document.all&&document.all(eleName)) return document.all(eleName)
    else if(document.layers&&document.layers[eleName]) return document.layers[eleName]
    else return false
}

This handy function loads any function on page load, can be used multiple times!

//------------------------------------
// addLoadListener
function addLoadListener(fn){
    if(typeof window.addEventListener !='undefined') window.addEventListener('load',fn,false);
    else if(typeof document.addEventListener !='undefined') document.addEventListener('load',fn,false);
    else if(typeof window.attachEvent !='undefined') window.attachEvent('onload',fn);
    else{
        var oldfn=window.onload
        if(typeof window.onload !='function') window.onload=fn;
        else window.onload=function(){oldfn();fn();}
    }
}

Add and Remove an event!

This code is heavily based on the Quirksmode addEvent contest winner, John Resig, and his winning entry.

//------------------------------------
// addEvent
function addEvent(obj,type,fn){
    if(obj.addEventListener) obj.addEventListener(type,fn,false);
    else if(obj.attachEvent){
        obj["e"+type+fn]=fn;
        obj[type+fn]=function(){obj["e"+type+fn](window.event);}
        obj.attachEvent("on"+type,obj[type+fn]);
    }
}
 
//------------------------------------
// removeEvent
function removeEvent(obj,type,fn){
    if(obj.removeEventListener) obj.removeEventListener(type,fn,false);
    else if(obj.detachEvent){
        obj.detachEvent("on"+type,obj[type+fn]);
        obj[type+fn]=null;
        obj["e"+type+fn]=null;
    }
}

Cookies

//------------------------------------
// getExpDate
function getExpDate(days,hours,minutes){
    var expDate=new Date();
    if(typeof days=="number"&&typeof hours=="number"&&typeof hours=="number"){
        expDate.setDate(expDate.getDate()+parseInt(days));
        expDate.setHours(expDate.getHours()+parseInt(hours));
        expDate.setMinutes(expDate.getMinutes()+parseInt(minutes));
        return expDate.toGMTString();
    } else return "";
}
 
//------------------------------------
// getCookieVal
function getCookieVal(offset){
    var endstr=document.cookie.indexOf(";",offset);
    if(endstr==-1) endstr=document.cookie.length;
    return unescape(document.cookie.substring(offset,endstr));
}
 
//------------------------------------
// getCookie
function getCookie(name){
    var arg=name+"=";
    var alen=arg.length;
    var clen=document.cookie.length;
    var i=0;
    while(i<clen){
        var j=i+alen;
        if(document.cookie.substring(i,j)==arg) return getCookieVal(j);
        i=document.cookie.indexOf(" ",i)+1;
        if(i==0)break;
    }
    return "";
}
 
//------------------------------------
// setCookie
function setCookie(name,value,expires,path,domain,secure){
    document.cookie=name+"="+escape(value)+((expires)? "; expires="+expires : "")+((path)? "; path="+path : "")+((domain)? "; domain="+domain : "")+((secure)? "; secure" : "");
}
 
//------------------------------------
// deleteCookie
function deleteCookie(name,path,domain){
    if(getCookie(name)) document.cookie=name+"="+((path)? "; path="+path : "")+((domain)? "; domain="+domain : "")+"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}

Highlights any input field that a user clicks on

//------------------------------------
// formEffects
function formEffects(){
    if(!gi('ContentW')) return;
    var areaDiv=gi('ContentW');
    var ut,rea;
    var INP=areaDiv.getElementsByTagName('input');
    var TAS=areaDiv.getElementsByTagName('textarea');
 
    for (var i=0;(ut=INP[i]);i++){
        addEvent(ut,'focus',oninputfocus);
        addEvent(ut,'blur',oninputblur);
    }
    for (var i=0;(rea=TAS[i]);i++){
        addEvent(rea,'focus',oninputfocus);
        addEvent(rea,'blur',oninputblur);
    }
}
 
//------------------------------------
// oninputfocus
function oninputfocus(evt){
    evt = (evt) ? evt : ((window.event) ? window.event : "");
    if (evt) var elem=giT(evt);
    if(elem)AddClass(elem,'Ffocus');
}
 
//------------------------------------
// oninputblur
function oninputblur(evt){
    evt = (evt) ? evt : ((window.event) ? window.event : "");
    if (evt) var elem=giT(evt);
    if(elem)RemoveClass(elem,'Ffocus');
}

Various functions to add, remove, or check for CSS classes on an object

//------------------------------------
// HasClass
function HasClass(el,cl){
    if((el.className===null)||(typeof el=='undefined')) return false;
    var classes=el.className.split(" ");
    for(i in classes){
        if(classes[i]==cl) return true;
    }
    return false;
}
 
//------------------------------------
// AddClass
function AddClass(el,cl){
    if((HasClass(el,cl))||(typeof el=='undefined')) return;
    el.className+=" "+cl;
}
 
//------------------------------------
// RemoveClass
function RemoveClass(el,cl){
    if(typeof el=='undefined')return;
    if(el.className===null)return;
    var classes=el.className.split(" ");
    var result=[];
    for(i in classes){
        if(classes[i] !=cl) result[result.length]=classes[i];
    }
    el.className=result.join(" ");
}

Hide or show an object using CSS

CSS

.S {visibility:visible;display:block;}
.H {visibility:hidden;display:none;}

Javascript

//------------------------------------
// H
function H(t){
    if(typeof t=='object') try t.className='H';
    catch(e){};
}
 
//------------------------------------
// S
function S(t){
    if(typeof t=='object') try t.className='S';
    catch(e){};
}

Get the element calling the function

//------------------------------------
// giT
function giT(evt){
    var elem;
    if (evt.target) elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target;
    else elem = evt.srcElement;
    return elem;
}

More Javascript Info:

• http://irama.org/web/dhtml/useful-code/
• http://24ways.org/2005/introducing-udasss
• http://www.dustindiaz.com/top-ten-javascript/

November 12th, 2007

« Awk Tutorial and IntroductionRenaming Sponsored Links in AdSense »

Comments Welcome