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



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/



	




	


	

		

			
Top Javascript Code Snippets for 2007 - AskApache
			

	

		

		

		

		

	


			
			

				
Charles Torvalds
				13 Nov 2007
				
			

					

		

			

							
		

		
	




		

			
				Exit mobile version