Javascript Util Snippets

[itsallkizza]

People keep asking for the same little Javascript snippets over and over so I figured I'd just start posting them here:

<script type="text/javascript">
// <![CDATA[

/* Remove Repeated Values In An Array - Type Sensitive */

function uniquifyArray(arr)
{
var new_arr = new Array();
var arr_contains = function(arr,what)
{
for (var i=0;i<arr.length;i++)
{
if (arr[i] === what) return true;
}
return false;
}
for (var i=0;i<arr.length;i++)
{
if (!arr_contains(new_arr,arr[i])) new_arr[new_arr.length] = arr[i];
}
return new_arr;
}



/* Coordinates and Dimensions of HTML Elements */

function getXYOfElement(elm)
{
var x = 0;
var y = 0;
if (elm.offsetParent)
{
do
{
x += elm.offsetLeft;
y += elm.offsetTop;
}
while (elm = elm.offsetParent);
return [x,y];
}
return false;
}

function getWidthHeightOfElement(elm)
{
if (elm.offsetWidth && elm.offsetHeight) return [elm.offsetWidth,elm.offsetHeight];
return false;
}



/* Matching Phrase Finder */
// accepts an array of strings and an optional min length as input
// it returns an array that includes all max-size phrases that are common to all inputted strings

function findInCommon(str_arr,min)
{
if (!min) min = 1;
var phrases = new Array();
var inAll = function(strs,str)
{
for (var i=0;i<strs.length;i++)
{
if (strs[i].indexOf(str) == -1) return false;
}
return true;
}
for (var i=0;i<str_arr[0].length-min;i++)
{
var phraseToAdd = str_arr[0].substr(i,min);
if (inAll(str_arr,phraseToAdd))
{
var a = 1;
while (inAll(str_arr,str_arr[0].substr(i,min+a)) && i+a < str_arr[0].length) phraseToAdd = str_arr[0].substr(i,min+(a++));
phrases[phrases.length] = phraseToAdd;
i += a;
}
}
return phrases;
}

/* TEST
alert(findInCommon(["the dog ate my homework","the cat ate my homework","i ate my homework"],3));
*/



//* Check If Element Has Class */

function hasClass(element,name)
{
var element_class = "";
if (element.attributes["class"]) element_class = element.attributes["class"].value;
else if (element.className) element_class = element.className;
else if (element.getAttribute) element_class = element.getAttribute("class");
var classes_to_check = element_class.split(" ");
for (var i=0;i<classes_to_check.length;i++)
{
if (classes_to_check[i] == name) return true;
}
return false;
}



/* Check If Variable Exists */

function checkVarExists(var_name)
{
if (eval("typeof("+var_name+")") == "undefined") return false;
return true;
}

if (typeof(some_var) == "undefined") var variable_doesnt_exist = true;

// Note: In truth, its better form to use the typeof(some_var) check instead of the function
// because it uses an eval AND it requires a string, which may not serve the desired purpose.
// This is because in Javascript, references to variables and objects are not passed to
// functions, evaluations (clones) of them are.

/* TEST
alert(checkVarExists("some_var"));
if (typeof(some_var) == "undefined") alert("variable doesnt exist");
*/



/* Join and Split Two-Dimensional Arrays */

function join2DArray(arr,sep1,sep2)
{
if (sep1 == undefined || sep1 == null) sep1 = "";
if (sep2 == undefined || sep2 == null) sep2 = "";
for (var i=0;i<arr.length;i++)
{
if (arr[i].join) arr[i] = arr[i].join(sep2);
}
return arr.join(sep1);
}

function split2DArray(str,sep1,sep2)
{
if (sep1 == undefined || sep1 == null) sep1 = "";
if (sep2 == undefined || sep2 == null) sep2 = "";
var arr = str.split(sep1);
for (var i=0;i<arr.length;i++) arr[i] = arr[i].split(sep2);
return arr;
}

/* TEST
var my_arr = [[1,2,3],[4,5,6],[7,8,9]];
var my_arr_joined = join2DArray(my_arr,"|",",");
alert(my_arr_joined);
var my_arr_resplit = split2DArray(my_arr_joined,"|",",");
alert(my_arr_resplit[0][1]);
*/

// ]]>
</script>

[rnd me]

Can I rip-off code posted here for my own purposes?

in other words, would you be opposed to me including your snips in my own library and redistributing it?

[itsallkizza]

You absolutely can, anyone can feel free to use anything I post here :)

Thanks for asking!

[rnd me]

you inspired me to release my code arsenal publicly.

my snippets library had been added to my signature.

it is available here: snippets (http://danml.com/snips.htm).

All browsers can view the included library.
Firefox and IE8 users to store, backup, and export their own snippets as well.

if anyone would like to post their own folder exports here (or just more plain snippets), i will merge them with the master JSON data file, and they will be available to all users.

enjoy,
-dan

[itsallkizza]

You got some cool stuff in there :)

Very impressive.

[itsallkizza]

My edit time wore off. Here's more:

/* Coordinates Of Mouse Cursor In Relation To Document */

function getCursorPosition(e)
{
e = e || window.event;
if (e)
{
if (e.pageX || e.pageX == 0) return [e.pageX,e.pageY];
else if (document.documentElement && document.body)
{
var dE = document.documentElement;
var dB = document.body;
if ((e.clientX || e.clientX == 0) && ((dB.scrollLeft || dB.scrollLeft == 0) || (dE.clientLeft || dE.clientLeft == 0))) return [e.clientX + (dE.scrollLeft || dB.scrollLeft || 0) - (dE.clientLeft || 0),e.clientY + (dE.scrollTop || dB.scrollTop || 0) - (dE.clientTop || 0)];
}
}
return null;
}

/* TEST
function mousemove(e)
{
e = e || window.event;
document.getElementsByTagName("body")[0].innerHTML = getCursorPosition(e);
}
document.onmousemove = mousemove;
*/

[itsallkizza]

And more:

/* Manipulate The Class Attribute Of HTML Elements */
// Note: These by no means have to be contained in an object - the only reason I put them together this way is for organization.
function ClassUtil()
{
this.getClass = function(element)
{
return (element.className || (element.getAttribute ? element.getAttribute("class") : false) || element.attributes["class"] || "");
}
this.setClass = function(element,class_name,overwrite)
{
// without overwrite set, its just like adding a class to the element
var new_class = overwrite ? class_name : this.getClass(element)+" "+class_name;
element.className = new_class;
if (element.setAttribute) element.setAttribute("class",new_class);
}
this.removeClass = function(element,class_name)
{
var elm_class = this.getClass(element);
var classes_to_check = elm_class.split(" ");
var new_class = "";
for (var i=0;i<classes_to_check.length;i++)
{
if (class_name != classes_to_check[i]) new_class += " "+classes_to_check[i];
}
this.setClass(element,new_class,true);
}
this.checkClass = function(element,class_name)
{
var elm_class = this.getClass(element);
var classes_to_check = elm_class.split(" ");
for (var i=0;i<classes_to_check.length;i++)
{
if (class_name == classes_to_check[i]) return true;
}
return false;
}
}
var cutil = new ClassUtil();

[itsallkizza]

Oops, here's a fix:

/* Manipulate The Class Attribute Of HTML Elements */
// Note: These by no means have to be contained in an object - the only reason I put them together this way is for organization.
function ClassUtil()
{
this.getClass = function(element)
{
return (element.className || (element.getAttribute ? element.getAttribute("class") : false) || (element.attributes["class"] ? element.attributes["class"].value : false) || "");
}
this.setClass = function(element,class_name,overwrite)
{
// without overwrite set, its just like adding a class to the element
var new_class = overwrite ? class_name : this.getClass(element)+" "+class_name;
element.className = new_class;
if (element.setAttribute) element.setAttribute("class",new_class);
}
this.removeClass = function(element,class_name)
{
var elm_class = this.getClass(element);
var classes_to_check = elm_class.split(" ");
var new_class = "";
for (var i=0;i<classes_to_check.length;i++)
{
if (class_name != classes_to_check[i]) new_class += " "+classes_to_check[i];
}
this.setClass(element,new_class,true);
}
this.checkClass = function(element,class_name)
{
var elm_class = this.getClass(element);
var classes_to_check = elm_class.split(" ");
for (var i=0;i<classes_to_check.length;i++)
{
if (class_name == classes_to_check[i]) return true;
}
return false;
}
}
var cutil = new ClassUtil();

[itsallkizza]

function ClassUtil()
{
this.getClass = function(element)
{
return element.className || (element.getAttribute ? element.getAttribute("class") : false) || "";
}
this.setClass = function(element,class_name,overwrite)
{
// without overwrite set, its just like adding a class to the element
var new_class = overwrite ? class_name : this.getClass(element)+" "+class_name;
element.className = new_class;
if (element.setAttribute) element.setAttribute("class",new_class);
}
this.removeClass = function(element,class_name)
{
var elm_class = this.getClass(element);
var classes_to_check = elm_class.split(" ");
var new_class = "";
for (var i=0;i<classes_to_check.length;i++)
{
if (class_name != classes_to_check[i]) new_class += " "+classes_to_check[i];
}
this.setClass(element,new_class,true);
}
this.checkClass = function(element,class_name)
{
var elm_class = this.getClass(element);
var classes_to_check = elm_class.split(" ");
for (var i=0;i<classes_to_check.length;i++)
{
if (class_name == classes_to_check[i]) return true;
}
return false;
}
this.getElementsByClassName = function(class_name,opt_root)
{
var root = opt_root || document;
var all = root.getElementsByTagName("*");
var sp = new Array();
for (var i=0;i<all.length;i++)
{
if (this.checkClass(all[i],class_name)) sp.push(all[i]);
}
return sp;
}
}
var cutil = new ClassUtil();

[itsallkizza]

Update: getElementsByClassName now accepts multiple classes to check and removeClass doesn't add arbitrary spaces

function ClassUtil()
{
this.getClass = function(element)
{
return element.className || (element.getAttribute ? element.getAttribute("class") : false) || "";
}
this.setClass = function(element,class_name,overwrite)
{
// without overwrite set, its just like adding a class to the element
var new_class = overwrite ? class_name : (this.getClass(element) ? this.getClass(element)+" "+class_name : class_name);
element.className = new_class;
if (element.setAttribute) element.setAttribute("class",new_class);
}
this.removeClass = function(element,class_name)
{
var elm_class = this.getClass(element);
var classes_to_check = elm_class.split(" ");
var new_class = new Array();
for (var i=0;i<classes_to_check.length;i++)
{
if (class_name != classes_to_check[i]) new_class.push(classes_to_check[i]);
}
this.setClass(element,new_class.join(" "),true);
}
this.checkClass = function(element,class_name)
{
var elm_class = this.getClass(element);
var classes_to_check = elm_class.split(" ");
for (var i=0;i<classes_to_check.length;i++)
{
if (class_name == classes_to_check[i]) return true;
}
return false;
}
this.getElementsByClassName = function(class_name,opt_root)
{
var root = opt_root || document;
var all = root.getElementsByTagName("*");
var class_names = class_name.split(" ");
var sp = new Array();
for (var i=0;i<all.length;i++)
{
var chk = 0;
for (var c=0;c<class_names.length;c++)
{
if (this.checkClass(all[i],class_names[c])) chk++;
}
if (chk == class_names.length) sp.push(all[i]);
}
return sp;
}
}
var cutil = new ClassUtil();

[itsallkizza]

function XML_HTTP_Util()
{
this.sendRequest = function(url,method,params,async,callback,callbackargs)
{
method = method ? method.toUpperCase() : "GET";
callback = callback || function(){};
params = params ? params.join("&") : "";
if (method == "GET" && params) url += "?"+params;
var req = this.createXMLHTTPObject();
if (!req) callback.call(this,false,callbackargs);
req.ref = this;
req.open(method,url,async);
req.setRequestHeader('User-Agent','XMLHTTP/1.0');
if (method == "POST")
{
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
req.setRequestHeader("Content-length",params.length);
req.setRequestHeader("Connection","close");
}
req.onreadystatechange = function()
{
if (this.readyState != 4) return;
if (this.status != 200 && this.status != 304)
{
//alert("HTTP error " + req.status);
callback.call(this.ref,false,callbackargs);
}
else
{
callback.call(this.ref,req,callbackargs);
}
}
if (req.readyState == 4) return;
req.send(method=="GET"?null:params);
}
this.createXMLHTTPObject = function()
{
var xmlhttp = false;
for (var i=0;i<this.XMLHttpFactories.length;i++)
{
try
{
xmlhttp = this.XMLHttpFactories[i]();
}
catch(e)
{
continue;
}
break;
}
return xmlhttp;
}
this.XMLHttpFactories = [
function() {return new XMLHttpRequest()},
function() {return new ActiveXObject("Msxml2.XMLHTTP")},
function() {return new ActiveXObject("Msxml3.XMLHTTP")},
function() {return new ActiveXObject("Microsoft.XMLHTTP")}
];
}
var xhu = new XML_HTTP_Util();

[itsallkizza]

My last cutil was flawed, fixed:

function ClassUtil()
{
this.getClass = function(element)
{
return element.className || (element.getAttribute ? element.getAttribute("class") : false) || "";
}
this.setClass = function(element,class_name,overwrite)
{
// without overwrite set, its just like adding a class to the element
var new_class = overwrite ? class_name : (this.getClass(element) ? this.getClass(element)+" "+class_name : class_name);
element.className = new_class;
if (element.setAttribute) element.setAttribute("class",new_class);
}
this.removeClass = function(element,class_name)
{
var elm_class = this.getClass(element);
var classes_to_check = elm_class.split(" ");
var new_class = new Array();
for (var i=0;i<classes_to_check.length;i++)
{
if (class_name != classes_to_check[i]) new_class.push(classes_to_check[i]);
}
this.setClass(element,new_class.join(" "),true);
}
this.checkClass = function(element,class_name)
{
var elm_classes = this.getClass(element).split(" ");
var classes_to_check = class_name.split(" ");
var chk = 0;
for (var i=0;i<classes_to_check.length;i++)
{
for (var c=0;c<elm_classes.length;c++)
{
if (classes_to_check[i] == elm_classes[c])
{
chk++;
break;
}
}
}
return chk == classes_to_check.length;
}
this.getElementsByClassName = function(class_name,opt_root)
{
var root = opt_root || document;
var all = root.getElementsByTagName("*");
var sp = new Array();
for (var i=0;i<all.length;i++)
{
if (this.checkClass(all[i],class_name)) sp.push(all[i]);
}
return sp;
}
}
var cutil = new ClassUtil();