Created
September 20, 2012 00:44
-
-
Save netpoetica/3753279 to your computer and use it in GitHub Desktop.
custom cross-browser getElementsByClassname and various utility functions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Name: utils.js | |
Desc: A collection of JS Utility functions, some authored by me (Keith Rosenberg, http://www.keithrosenberg.com) | |
and some authored by fellow scripters | |
Location: https://dl.dropbox.com/u/30820392/JS_Utils/utils.js | |
JavaScript Style Guide - Readable, Consistent Code | |
Yahoo, Google, Mozilla, jQuery recommendations | |
Naming: | |
Variables and Functions | |
- Allowed letters, numbers, $, and _ | |
- private properties use _ before var name | |
- use camelCase ;) | |
Objects | |
- uppercase first letter (Math, Date) | |
Brace Style: open curly brace on the same line as the keyword | |
if (x) { | |
//.... | |
} | |
Functions - define them before you call them for readability | |
Google Closure Compiler (minifier, in browser) | |
http://closure-compiler.appspot.com/home | |
*/ | |
//Setup UTILS namespace, make sure it's unique, and if not, make sure we keep what's already there | |
var UTILS = UTILS || {}; | |
/* | |
Name: getElementsByClassName(String(className), Node(node)) | |
Desc: Utility function to get elements by className | |
Author: Keith Rosenberg | |
Returns: A NodeList of DOM Elements | |
Example: console.log(getElementsByClassName("newtab-cell")); | |
Notes: | |
- Does not require and in fact doesn't work properly if you put a "." in front | |
of the class name, i.e. ".newtab-cell" | |
- Returns a NodeList in both instances | |
- Implements Good Defaults by making "node" an optional arguement that defaults to | |
document | |
*/ | |
UTILS.getElementsByClassName = function(className, node){ | |
"use strict"; | |
//Node defaults to document if no node is specified (undefined), or null/false passed to bypass arguement | |
//try this later: node = !node ? node : document; | |
node = node ? node : document; | |
if(document.getElementsByClassName){ | |
// If browser supports this function, use it. | |
return node.getElementsByClassName(className); | |
} | |
else{ | |
// If the browser doesn't support the function, use custom test | |
var allElems = node.getElementsByTagName("*"), | |
allElemsLength = allElems.length, | |
elemList = [], //will be converted to NodeList when populated | |
i = 0, | |
currentElem; | |
//Use traditional for instead of foreach for cross-browser compatability and issues with | |
//using an object operation (for...each(in)) on NodeLists, which are not quite objects/arrays | |
for(i; i < allElemsLength; i+=1){ | |
currentElem = allElems[i]; | |
//search() returns -1 if no string found | |
if(currentElem.className.search(className) !== -1){ | |
elemList.push(currentElem); | |
} | |
} | |
return elemList; | |
} | |
}; | |
UTILS.getElementsByAttribute = function(attribute, value, node){ | |
"use strict"; | |
//Node defaults to document if no node is specified (undefined), or null/false passed to bypass arguement | |
node = node ? node : document; | |
var allElems = node.getElementsByTagName("*"), | |
allElemsLength = allElems.length, | |
elemList = [], //will be converted to NodeList when populated | |
i = 0, | |
currentElem; | |
//Use traditional for instead of foreach for cross-browser compatability and issues with | |
//using an object operation (for...each(in)) on NodeLists, which are not quite objects/arrays | |
for(i; i < allElemsLength; i+=1){ | |
currentElem = allElems[i]; | |
//search() returns -1 if no string found | |
if(currentElem.getAttribute(attribute)){ | |
if(value === null){ | |
elemList.push(currentElem); | |
} | |
else { | |
if(currentElem.getAttribute(attribute) === value){ | |
elemList.push(currentElem); | |
} | |
} | |
} | |
} | |
return elemList; | |
}; | |
/* | |
Name: randomColorHex | |
Desc: Utility function to generate a random color | |
Author: Keith Rosenberg | |
Returns: String | |
Example: console.log(randomColorHex()); //#AA00F0 | |
Notes: | |
- returns string, including # | |
*/ | |
UTILS.randomColorHex = function(){ | |
// Acceptable numbers are 0-9, letters A-F. A - F represented by 10 - 16 respectively | |
var hexLen = 6, | |
hexValues = ['#'] | |
tempDigit = 0; | |
while(hexLen > 0){ | |
hexLen--; | |
tempDigit = Math.floor(Math.random() * 16); | |
switch(tempDigit){ | |
case 10: | |
tempDigit = 'A'; | |
break; | |
case 11: | |
tempDigit = 'B'; | |
break; | |
case 12: | |
tempDigit = 'C'; | |
break; | |
case 13: | |
tempDigit = 'D'; | |
break; | |
case 14: | |
tempDigit = 'E'; | |
break; | |
case 15: | |
tempDigit = 'F'; | |
break; | |
default: | |
tempDigit = 0; | |
break; | |
} | |
// Make a string | |
hexValues.push(String(tempDigit)); | |
} | |
var color = hexValues.join(''); | |
// Ensure we are returning a string | |
return String(color); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment