Show Posts
61
PHP/Javascript / [Javascript] 10 super useful Javascript Snippets
« on: September 17, 2011, 12:06:36 am »
1. Email Validation
Source
Source
Source
Source
Source
6. Determine if Browser Understands HTML5 Video
Source
7. Get browser viewport width and height
Source
8. getElementsByClassName
Source
9. Delayed Redirect
Source
10. iPhone Style Change on Orientation Change
Source
Source
Code: [Select]
function checkMail(email){
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (filter.test(email)) {
return true;
}
return false;
}
2. Toogle CheckboxesSource
Code: [Select]
<script type="text/javascript">
function toggle_checkboxes(id) {
if (!document.getElementById){ return; }
if (!document.getElementsByTagName){ return; }
var inputs = document.getElementById(id).getElementsByTagName("input");
for(var x=0; x < inputs.length; x++) {
if (inputs[x].type == 'checkbox'){
inputs[x].checked = !inputs[x].checked;
}
}
}
</script>
<div id="parent_box">
<input type="checkbox" name="foo" value="1" /> 1<br/>
<input type="checkbox" name="foo" value="2" checked="checked" /> 2<br/>
<input type="checkbox" name="foo" value="3" checked="checked" /> 3<br/>
<br/>
<input type="button" value="Toggle checkboxes"
onclick="toggle_checkboxes('parent_box')" />
</div>
3. Image PreloaderSource
Code: [Select]
var images = new Array();
function preloadImages(){
for (i=0; i < preloadImages.arguments.length; i++){
images[i] = new Image();
images[i].src = preloadImages.arguments[i];
}
}
preloadImages("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg");
4. Javascript cookiesSource
Code: [Select]
/**
* Sets a Cookie with the given name and value.
*
* name Name of the cookie
* value Value of the cookie
* [expires] Expiration date of the cookie (default: end of current session)
* [path] Path where the cookie is valid (default: path of calling document)
* [domain] Domain where the cookie is valid
* (default: domain of calling document)
* [secure] Boolean value indicating if the cookie transmission requires a
* secure transmission
*/
function setCookie(name, value, expires, path, domain, secure) {
document.cookie= name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
/**
* Gets the value of the specified cookie.
*
* name Name of the desired cookie.
*
* Returns a string containing value of specified cookie,
* or null if cookie does not exist.
*/
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else {
begin += 2;
}
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
return unescape(dc.substring(begin + prefix.length, end));
}
/**
* Deletes the specified cookie.
*
* name name of the cookie
* [path] path of the cookie (must be same as path used to create cookie)
* [domain] domain of the cookie (must be same as domain used to create cookie)
*/
function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}
5. Sort Dropdown MenuSource
Code: [Select]
function sortList(id) {
var obj = document.getElementById("id");
var values = new Array();
for(var i = 0; i < obj.options.length; i++) {
values.push(obj.options[i].innerHTML + "--xx--" + obj.options[i].value);
}
values = values.sort();
for(var i = 0; i < values.length; i++) {
valueArray = values[i].split('--xx--');
obj.options[i].innerHTML = valueArray[0];
obj.options[i].value = valueArray[1];
}
}6. Determine if Browser Understands HTML5 Video
Source
Code: [Select]
// Check if the browser understands the video element.
function understands_video() {
return !!document.createElement('video').canPlayType; // boolean
}
if ( !understands_video() ) {
// Must be older browser or IE.
// Maybe do something like hide custom
// HTML5 controls. Or whatever...
videoControls.style.display = 'none';
}7. Get browser viewport width and height
Source
Code: [Select]
<script type="text/javascript">
<!--
var viewportwidth;
var viewportheight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
// older versions of IE
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>8. getElementsByClassName
Source
Code: [Select]
/*
Written by Jonathan Snook, http://www.snook.ca/jonathan
Add-ons by Robert Nyman, http://www.robertnyman.com
*/
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}9. Delayed Redirect
Source
Code: [Select]
setTimeout( "window.location.href =
'http://walkerwines.com.au/'", 5*1000 );10. iPhone Style Change on Orientation Change
Source
Code: [Select]
window.addEventListener('load', setOrientation, false);
window.addEventListener('orientationchange', setOrientation, false);
function setOrientation() {
var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';
var cl = document.body.className;
cl = cl.replace(/portrait|landscape/, orient);
document.body.className = cl;
}
