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.