Someday I Need to Write a JS Library

Unfortunately, I’ve never sat down and written a full blown out JS library; at least not in a really clean and reusable way. However, I do have a few custom Javascript functions that I tend to use in several projects.

The majority of these can be found by doing a quick search on google or some equivalent; but I figured I could keep them here for an easy find and if anyone else happened upon them they might be useful as a small collection.

Javascript Cookie Management

//create cookie
function createCookie(name,value,mins) {
	if (mins) {
		var date = new Date();
		date.setTime(date.getTime()+(mins*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
//read cookie
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
//erase cookie
function eraseCookie(name) {
	createCookie(name,"",-1);
}

String Manipulation

function inStr(strSearch, charSearchFor) {
	for (i=0; i < len(strSearch); i++)
	{
	    if (charSearchFor == mid(strSearch, i, len(charSearchFor)))
	    {
			return i;
	    }
	}
	return -1;
}
function len(str) {
    return String(str).length;
}
function mid(str, start, len) {
    if (start < 0 || len  iLen) {
        iEnd = iLen;
    }
    else {
        iEnd = start + len;
    }
    
    return String(str).substring(start,iEnd);
}
function left(str, n) {
    if (n  String(str).length) {  // Invalid bound, return
        return str;                // entire string
    }
    else { // Valid bound, return appropriate substring
        return String(str).substring(0,n);
    }
}
function right(str, n) {
    if (n  String(str).length) {  // Invalid bound, return
        return str;                     // entire string
    }    
    else { // Valid bound, return appropriate substring
        var iLen = String(str).length;
        return String(str).substring(iLen, iLen - n);
    }
}

Page Navigation

This is really just shorthand for 99% of the popup pages that I would use when I called window.open().

function openPopup(page, width, height) 
{
    window.open(page,'PopupWindow','width='+width+',height='+height+',resizable=no,scrollbars=no');
}

Page/Form Input Helpers

//**************************************************************//
//Makes input control (form control) a highlighted color.  Works
//specifically for textboxes and textareas.
//
//obj = "this" if being triggered by event or if null is passed 
//      or accepts an overload of any document control object.
//
//className = name of css class for active input box.
//--------------------------------------------------------------//
function doActivateInput(obj) {
    if(obj == "[object Event]" || obj == null) {
        obj = this;
    }
    
    if(obj != null) {
        obj.className="input_active";
    }
}
function doDeactivateInput(obj) {
    if(obj == "[object Event]" || obj == null) {
        obj = this;
    }
    
    if(obj != null) {
        obj.className="";
    }
}
//**************************************************************//
//**************************************************************//
//Preloads images for a page to correct wait time when displaying 
//hidden/new images
//
//imgPathArray = string array of img paths to preload 
//--------------------------------------------------------------//
function preloadImages(imgPathArray) {
    for(i=0;i<imgPathArray.length;i++) {
        var img = new Image();
        img.src = imgPathArray[i];
    }
}
//**************************************************************//
//**************************************************************//
//Helper function for adding textbox activate/inactivate event listeners
//
//obj = the object (textbox/input box) to perform action on
//--------------------------------------------------------------//
function doHelperAddTextboxEventListeners(obj) {
    if (obj.addEventListener) {
       obj.addEventListener("focus", function () {doActivateInput(this);}, false);
       obj.addEventListener("blur", function () {doDeactivateInput(this);}, false); 
    } 
    else if (obj.attachEvent) {
       obj.onfocus = function () {doActivateInput(obj);};
       obj.onblur = function () {doDeactivateInput(obj);};
    }
}
//**************************************************************//
//**************************************************************//
//Helper function for adding buttons hover state event listeners
//
//obj = the object (button) to perform action on
//--------------------------------------------------------------//
function doHelperAddButtonEventListeners(obj, activeImgPath, inactiveImgPath) {
    if (obj.addEventListener) {
       obj.addEventListener("mouseover", function () {this.src=activeImgPath;}, false);
       obj.addEventListener("focus", function () {this.src=activeImgPath;}, false);
       obj.addEventListener("mouseout", function () {this.src=inactiveImgPath;}, false);
       obj.addEventListener("blur", function () {this.src=inactiveImgPath;}, false);   
    } 
    else if (obj.attachEvent) {
       obj.onmouseover = function () {this.src=activeImgPath;};
       obj.onfocus = function () {this.src=activeImgPath;};
       obj.onmouseout = function () {this.src=inactiveImgPath;};
       obj.onblur = function () {this.src=inactiveImgPath;};  
    }
}
//**************************************************************//

Check out Script.acul.us!

For a really fun (and useful) Javascript library try out: Script.aculo.us, which does a wide range of client-side effects to really provide a richer UI and better web-applications.