by Unknown in javascript , Tutorial 0
Find the length of the array before using it in the for function, so it doesn't need to count the length of the array each iteration (assuming the length won't be changing mid-loop).
var arLen=myArray.length;
for ( var i=0, len=arLen; i<len; i++ ){
// do something with myArray[i]
}
by Unknown in javascript , Tutorial 0
The CSS preprocessors Sass and LESS can take any color and darken() or lighten() it by a specific value. But no such ability is built into JavaScript. This function takes colors in hex format (i.e. #F06D06, with or without hash) and lightens or darkens them with a value.
function LightenDarkenColor(col, amt) {
var usePound = false;
if (col[0] == "#") {
col = col.slice(1);
usePound = true;
}
var num = parseInt(col,16);
var r = (num >> 16) + amt;
if (r > 255) r = 255;
else if (r < 0) r = 0;
var b = ((num >> 8) & 0x00FF) + amt;
if (b > 255) b = 255;
else if (b < 0) b = 0;
var g = (num & 0x0000FF) + amt;
if (g > 255) g = 255;
else if (g < 0) g = 0;
return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
}// Lighten
var NewColor = LightenDarkenColor("#F06D06", 20);
// Darken
var NewColor = LightenDarkenColor("#F06D06", -20); by Unknown in javascript , Tutorial 0
Use a blank.gif as the src of images, and include the width and height of the final image.
<img src="blank.gif" class="lazy" data-src="http://cdn.css-tricks.com/images/full-size.jpg" width="240" height="152">/* lazyload.js (c) Lorenzo Giuliani
* MIT License (http://www.opensource.org/licenses/mit-license.html)
*
* expects a list of:
* `<img src="blank.gif" data-src="my_image.png" width="600" height="400" class="lazy">`
*/
!function(window){
var $q = function(q, res){
if (document.querySelectorAll) {
res = document.querySelectorAll(q);
} else {
var d=document
, a=d.styleSheets[0] || d.createStyleSheet();
a.addRule(q,'f:b');
for(var l=d.all,b=0,c=[],f=l.length;b<f;b++)
l[b].currentStyle.f && c.push(l[b]);
a.removeRule(0);
res = c;
}
return res;
}
, addEventListener = function(evt, fn){
window.addEventListener
? this.addEventListener(evt, fn, false)
: (window.attachEvent)
? this.attachEvent('on' + evt, fn)
: this['on' + evt] = fn;
}
, _has = function(obj, key) {
return Object.prototype.hasOwnProperty.call(obj, key);
}
;
function loadImage (el, fn) {
var img = new Image()
, src = el.getAttribute('data-src');
img.onload = function() {
if (!! el.parent)
el.parent.replaceChild(img, el)
else
el.src = src;
fn? fn() : null;
}
img.src = src;
}
function elementInViewport(el) {
var rect = el.getBoundingClientRect()
return (
rect.top >= 0
&& rect.left >= 0
&& rect.top <= (window.innerHeight || document.documentElement.clientHeight)
)
}
var images = new Array()
, query = $q('img.lazy')
, processScroll = function(){
for (var i = 0; i < images.length; i++) {
if (elementInViewport(images[i])) {
loadImage(images[i], function () {
images.splice(i, i);
});
}
};
}
;
// Array.prototype.slice.call is not callable under our lovely IE8
for (var i = 0; i < query.length; i++) {
images.push(query[i]);
};
processScroll();
addEventListener('scroll',processScroll);
}(this);by Unknown in javascript , Tutorial 0
As in, what keyboard events report based on what keys are pressed.
$("#textinput").keydown(function(e) {
e.keyCode; // this value
});
|
|
|
by Unknown in javascript , Tutorial 0
JavaScript-required area is hidden with inline CSS, and then shown after it loads with a small snippet of JavaScript. Below that, noscript tags are used for fallback content. So only one or the other of these bits of content will be required depending on if JavaScript is enabled or not.
<!-- JavaScript-Required Content -->
<div id="photoslider" style="display:none">Javascript photoslider</div>
<script>document.getElementById('photoslider').style.display='';</script>
<!-- END JavaScript-Required Content -->
<!-- Fallback Content -->
<noscript><div id="photo">Alternative static photo as content when javascript is turned off</div></noscript>
<!-- END Fallback Content -->by Unknown in javascript , Tutorial 0
var MD5 = function (string) {
function RotateLeft(lValue, iShiftBits) {
return (lValue<<iShiftBits) | (lValue>>>(32-iShiftBits));
}
function AddUnsigned(lX,lY) {
var lX4,lY4,lX8,lY8,lResult;
lX8 = (lX & 0x80000000);
lY8 = (lY & 0x80000000);
lX4 = (lX & 0x40000000);
lY4 = (lY & 0x40000000);
lResult = (lX & 0x3FFFFFFF)+(lY & 0x3FFFFFFF);
if (lX4 & lY4) {
return (lResult ^ 0x80000000 ^ lX8 ^ lY8);
}
if (lX4 | lY4) {
if (lResult & 0x40000000) {
return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);
} else {
return (lResult ^ 0x40000000 ^ lX8 ^ lY8);
}
} else {
return (lResult ^ lX8 ^ lY8);
}
}
function F(x,y,z) { return (x & y) | ((~x) & z); }
function G(x,y,z) { return (x & z) | (y & (~z)); }
function H(x,y,z) { return (x ^ y ^ z); }
function I(x,y,z) { return (y ^ (x | (~z))); }
function FF(a,b,c,d,x,s,ac) {
a = AddUnsigned(a, AddUnsigned(AddUnsigned(F(b, c, d), x), ac));
return AddUnsigned(RotateLeft(a, s), b);
};
function GG(a,b,c,d,x,s,ac) {
a = AddUnsigned(a, AddUnsigned(AddUnsigned(G(b, c, d), x), ac));
return AddUnsigned(RotateLeft(a, s), b);
};
function HH(a,b,c,d,x,s,ac) {
a = AddUnsigned(a, AddUnsigned(AddUnsigned(H(b, c, d), x), ac));
return AddUnsigned(RotateLeft(a, s), b);
};
function II(a,b,c,d,x,s,ac) {
a = AddUnsigned(a, AddUnsigned(AddUnsigned(I(b, c, d), x), ac));
return AddUnsigned(RotateLeft(a, s), b);
};
function ConvertToWordArray(string) {
var lWordCount;
var lMessageLength = string.length;
var lNumberOfWords_temp1=lMessageLength + 8;
var lNumberOfWords_temp2=(lNumberOfWords_temp1-(lNumberOfWords_temp1 % 64))/64;
var lNumberOfWords = (lNumberOfWords_temp2+1)*16;
var lWordArray=Array(lNumberOfWords-1);
var lBytePosition = 0;
var lByteCount = 0;
while ( lByteCount < lMessageLength ) {
lWordCount = (lByteCount-(lByteCount % 4))/4;
lBytePosition = (lByteCount % 4)*8;
lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount)<<lBytePosition));
lByteCount++;
}
lWordCount = (lByteCount-(lByteCount % 4))/4;
lBytePosition = (lByteCount % 4)*8;
lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80<<lBytePosition);
lWordArray[lNumberOfWords-2] = lMessageLength<<3;
lWordArray[lNumberOfWords-1] = lMessageLength>>>29;
return lWordArray;
};
function WordToHex(lValue) {
var WordToHexValue="",WordToHexValue_temp="",lByte,lCount;
for (lCount = 0;lCount<=3;lCount++) {
lByte = (lValue>>>(lCount*8)) & 255;
WordToHexValue_temp = "0" + lByte.toString(16);
WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length-2,2);
}
return WordToHexValue;
};
function Utf8Encode(string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
}
else if((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
};
var x=Array();
var k,AA,BB,CC,DD,a,b,c,d;
var S11=7, S12=12, S13=17, S14=22;
var S21=5, S22=9 , S23=14, S24=20;
var S31=4, S32=11, S33=16, S34=23;
var S41=6, S42=10, S43=15, S44=21;
string = Utf8Encode(string);
x = ConvertToWordArray(string);
a = 0x67452301; b = 0xEFCDAB89; c = 0x98BADCFE; d = 0x10325476;
for (k=0;k<x.length;k+=16) {
AA=a; BB=b; CC=c; DD=d;
a=FF(a,b,c,d,x[k+0], S11,0xD76AA478);
d=FF(d,a,b,c,x[k+1], S12,0xE8C7B756);
c=FF(c,d,a,b,x[k+2], S13,0x242070DB);
b=FF(b,c,d,a,x[k+3], S14,0xC1BDCEEE);
a=FF(a,b,c,d,x[k+4], S11,0xF57C0FAF);
d=FF(d,a,b,c,x[k+5], S12,0x4787C62A);
c=FF(c,d,a,b,x[k+6], S13,0xA8304613);
b=FF(b,c,d,a,x[k+7], S14,0xFD469501);
a=FF(a,b,c,d,x[k+8], S11,0x698098D8);
d=FF(d,a,b,c,x[k+9], S12,0x8B44F7AF);
c=FF(c,d,a,b,x[k+10],S13,0xFFFF5BB1);
b=FF(b,c,d,a,x[k+11],S14,0x895CD7BE);
a=FF(a,b,c,d,x[k+12],S11,0x6B901122);
d=FF(d,a,b,c,x[k+13],S12,0xFD987193);
c=FF(c,d,a,b,x[k+14],S13,0xA679438E);
b=FF(b,c,d,a,x[k+15],S14,0x49B40821);
a=GG(a,b,c,d,x[k+1], S21,0xF61E2562);
d=GG(d,a,b,c,x[k+6], S22,0xC040B340);
c=GG(c,d,a,b,x[k+11],S23,0x265E5A51);
b=GG(b,c,d,a,x[k+0], S24,0xE9B6C7AA);
a=GG(a,b,c,d,x[k+5], S21,0xD62F105D);
d=GG(d,a,b,c,x[k+10],S22,0x2441453);
c=GG(c,d,a,b,x[k+15],S23,0xD8A1E681);
b=GG(b,c,d,a,x[k+4], S24,0xE7D3FBC8);
a=GG(a,b,c,d,x[k+9], S21,0x21E1CDE6);
d=GG(d,a,b,c,x[k+14],S22,0xC33707D6);
c=GG(c,d,a,b,x[k+3], S23,0xF4D50D87);
b=GG(b,c,d,a,x[k+8], S24,0x455A14ED);
a=GG(a,b,c,d,x[k+13],S21,0xA9E3E905);
d=GG(d,a,b,c,x[k+2], S22,0xFCEFA3F8);
c=GG(c,d,a,b,x[k+7], S23,0x676F02D9);
b=GG(b,c,d,a,x[k+12],S24,0x8D2A4C8A);
a=HH(a,b,c,d,x[k+5], S31,0xFFFA3942);
d=HH(d,a,b,c,x[k+8], S32,0x8771F681);
c=HH(c,d,a,b,x[k+11],S33,0x6D9D6122);
b=HH(b,c,d,a,x[k+14],S34,0xFDE5380C);
a=HH(a,b,c,d,x[k+1], S31,0xA4BEEA44);
d=HH(d,a,b,c,x[k+4], S32,0x4BDECFA9);
c=HH(c,d,a,b,x[k+7], S33,0xF6BB4B60);
b=HH(b,c,d,a,x[k+10],S34,0xBEBFBC70);
a=HH(a,b,c,d,x[k+13],S31,0x289B7EC6);
d=HH(d,a,b,c,x[k+0], S32,0xEAA127FA);
c=HH(c,d,a,b,x[k+3], S33,0xD4EF3085);
b=HH(b,c,d,a,x[k+6], S34,0x4881D05);
a=HH(a,b,c,d,x[k+9], S31,0xD9D4D039);
d=HH(d,a,b,c,x[k+12],S32,0xE6DB99E5);
c=HH(c,d,a,b,x[k+15],S33,0x1FA27CF8);
b=HH(b,c,d,a,x[k+2], S34,0xC4AC5665);
a=II(a,b,c,d,x[k+0], S41,0xF4292244);
d=II(d,a,b,c,x[k+7], S42,0x432AFF97);
c=II(c,d,a,b,x[k+14],S43,0xAB9423A7);
b=II(b,c,d,a,x[k+5], S44,0xFC93A039);
a=II(a,b,c,d,x[k+12],S41,0x655B59C3);
d=II(d,a,b,c,x[k+3], S42,0x8F0CCC92);
c=II(c,d,a,b,x[k+10],S43,0xFFEFF47D);
b=II(b,c,d,a,x[k+1], S44,0x85845DD1);
a=II(a,b,c,d,x[k+8], S41,0x6FA87E4F);
d=II(d,a,b,c,x[k+15],S42,0xFE2CE6E0);
c=II(c,d,a,b,x[k+6], S43,0xA3014314);
b=II(b,c,d,a,x[k+13],S44,0x4E0811A1);
a=II(a,b,c,d,x[k+4], S41,0xF7537E82);
d=II(d,a,b,c,x[k+11],S42,0xBD3AF235);
c=II(c,d,a,b,x[k+2], S43,0x2AD7D2BB);
b=II(b,c,d,a,x[k+9], S44,0xEB86D391);
a=AddUnsigned(a,AA);
b=AddUnsigned(b,BB);
c=AddUnsigned(c,CC);
d=AddUnsigned(d,DD);
}
var temp = WordToHex(a)+WordToHex(b)+WordToHex(c)+WordToHex(d);
return temp.toLowerCase();
}MD5("whatever");Like possibly snagging a Gravatar.
by Unknown in javascript , Tutorial 0
Javascript objects are really nice, but sometimes they are missing some useful little functions/methods. The example above is with Arrays. It's really nice to know whether or not an item is contained within your array. Well you can write a function that takes the array and the item you're checking for, but it's much cleaner to add the contains( item ) method to the Array object.
/**
* Array.prototype.[method name] allows you to define/overwrite an objects method
* needle is the item you are searching for
* this is a special variable that refers to "this" instance of an Array.
* returns true if needle is in the array, and false otherwise
*/
Array.prototype.contains = function ( needle ) {
for (i in this) {
if (this[i] == needle) return true;
}
return false;
}// Now you can do things like:
var x = Array();
if (x.contains('foo')) {
// do something special
}by Unknown in javascript , Tutorial 0
You don't need to create the variable, but it's a good practice as you can use that variable with clearInterval to stop the currently running interval.
var int = setInterval("doSomething()", 5000 ); /* 5 seconds */
var int = setInterval(doSomething, 5000 ); /* same thing, no quotes, no parens */If you need to pass parameters to the doSomething function, you can pass them as additional parameters beyond the first two to setInterval.
setInterval, as above, will run every 5 seconds (or whatever you set it to) no matter what. Even if the function doSomething takes long than 5 seconds to run. That can create issues. If you just want to make sure there is that pause in between runnings of doSomething, you can do this:
(function(){
doSomething();
setTimeout(arguments.callee, 5000);
})()by Unknown in javascript , Tutorial 0
This replicates the functionality of the standard embeddable Google Search fields. They have an image in the background and when the input is clicked into, the image disappears.
<form name="searchform" id="search-form">
<div>
<b>Search</b>
<input type="text" name="txtInput" title="Enter the terms you wish to search for." />
<input type="submit" value="GO!" class="submit" style="cursor: pointer;" />
</div>
</form>JavaScript underneath form markup:
<script type="text/javascript" language="javascript">
(function() {
var id = document.getElementById('search-form');
if (id && id.txtInput) {
var name = id.txtInput;
var unclicked = function() {
if (name.value == '') {
name.style.background = '#FFFFFF url(images/googbg.png) left no-repeat';
}
};
var clicked = function() {
name.style.background = '#ffffff';
};
name.onfocus = clicked;
name.onblur = unclicked;
unclicked();
}
})();
</script>by Unknown in javascript , Tutorial 0
If you need to change the style of an element with JavaScript, it's typically better to change a class name and have the CSS already on the page take effect and change the style. However, there are exceptions to every rule. For instance, you might want to programmatically change the a pseudo class (e.g. :hover). You can't do that through JavaScript for the same reason inline style="" attributes can't change pseudo classes.
You'll need to inject a new <style> element onto the page with the correct styles in it. Best to inject it at the bottom of the page so it overrides your CSS above it. Easy with jQuery:
function injectStyles(rule) {
var div = $("<div />", {
html: '­<style>' + rule + '</style>'
}).appendTo("body");
}injectStyles('a:hover { color: red; }');by Unknown in javascript , Tutorial 0
htmlentities() is a PHP function which converts special characters (like <) into their escaped/encoded values (like <). This allows you to show to display the string without the browser reading it as HTML.
JavaScript doesn't have a native version of it. If you just need the very basics to so that the browser won't interpret as HTML, this should work fine (via James Padolsey and I got a a similar idea from David Walsh).
function htmlEntities(str) {
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}The PHP.js project, which is a project to port over all of PHP's native functions to JavaScript, contains an example as well. I tried it and it works, but I've been warned much of the code from that project is poorly written, so I've kept it simple and used the above.
by Unknown in javascript , Tutorial 0
Declare variable outside of the function...
var oneVariable;
function setVariable(){
oneVariable = "Variable set from within a function!";
}
function getVariable(){
alert(oneVariable); // Outputs "Variable set from within a function!"
}Or... attach it to the window object
function setValue() {
window.myValue = "test";
}
function getValue() {
alert(window.myValue); // "test" (assuming setValue has run)
}by Unknown in javascript , Tutorial 0
// Example link:
// <a id="myLink" href="http://www.youtube.com/watch?v=cyRqR56aCKc&feature=PlayList&p=00000000000&index=0&playnext=1">Youtube link</a>
var youtubeLink = document.getElementById('myLink').href;
var youtubeVideoKey = youtubeLink.substr(youtubeLink.lastIndexOf("v=") + 2, 11);
// youtubeVideoKey will return "cyRqR56aCKc"by Unknown in javascript , Tutorial 0
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}Example URL:
http://www.example.com/index.php?id=1&image=awesome.jpg
Calling getQueryVariable("id") - would return "1".
Calling getQueryVariable("image") - would return "awesome.jpg".
by Unknown in javascript , Tutorial 0
JavaScript can access the current URL in parts. For this URL:
http://css-tricks.com/example/index.html
window.location.protocol = "http" window.location.host = "css-tricks.com" window.location.pathname = "example/index.html"So to get the full URL path in JavaScript:
var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;If you need to breath up the pathname, for example a URL like http://css-tricks.com/blah/blah/blah/index.html, you can split the string on "/" characters
var pathArray = window.location.pathname.split( '/' );Then access the different parts by the parts of the array, like
var secondLevelLocation = pathArray[0];To put that pathname back together, you can stitch together the array and put the "/"'s back in:
var newPathname = "";
for ( i = 0; i < pathArray.length; i++ ) {
newPathname += "/";
newPathname += pathArray[i];
}by Unknown in javascript , Tutorial 0
As in, the number of keys.
function objectSize(the_object) {
/* function to validate the existence of each key in the object to get the number of valid keys. */
var object_size = 0;
for (key in the_object){
if (the_object.hasOwnProperty(key)) {
object_size++;
}
}
return object_size;
}// Arbitrary object
var something = {
dog: "cat",
cat: "dog"
}
console.log(objectSize(something));
// Logs: 2by Unknown in javascript , Tutorial 0
You can get an array of all the events that start with "on" (e.g. onclick) by running this in the Console of Firefox.
[i for(i in document)].filter(function(i){return i.substring(0,2)=='on'&&(document[i]==null||typeof document[i]=='function');})You'll get an array like this (Firefox 23):
["onreadystatechange", "onmouseenter", "onmouseleave", "onwheel", "oncopy", "oncut", "onpaste", "onbeforescriptexecute", "onafterscriptexecute", "onabort", "oncanplay", "oncanplaythrough", "onchange", "onclick", "oncontextmenu", "ondblclick", "ondrag", "ondragend", "ondragenter", "ondragleave", "ondragover", "ondragstart", "ondrop", "ondurationchange", "onemptied", "onended", "oninput", "oninvalid", "onkeydown", "onkeypress", "onkeyup", "onloadeddata", "onloadedmetadata", "onloadstart", "onmousedown", "onmousemove", "onmouseout", "onmouseover", "onmouseup", "onpause", "onplay", "onplaying", "onprogress", "onratechange", "onreset", "onseeked", "onseeking", "onselect", "onshow", "onstalled", "onsubmit", "onsuspend", "ontimeupdate", "onvolumechange", "onwaiting", "onmozfullscreenchange", "onmozfullscreenerror", "onmozpointerlockchange", "onmozpointerlockerror", "onblur", "onerror", "onfocus", "onload", "onscroll"]Firefox, because it supports array comprehension which that little snippet uses.
by Unknown in javascript , Tutorial 0
This function will round numbers to two decimal places, and ensure that the returned value has two decimal places. For example 12.006 will return 12.01, .3 will return 0.30, and 5 will return 5.00
function CurrencyFormatted(amount) {
var i = parseFloat(amount);
if(isNaN(i)) { i = 0.00; }
var minus = '';
if(i < 0) { minus = '-'; }
i = Math.abs(i);
i = parseInt((i + .005) * 100);
i = i / 100;
s = new String(i);
if(s.indexOf('.') < 0) { s += '.00'; }
if(s.indexOf('.') == (s.length - 2)) { s += '0'; }
s = minus + s;
return s;
}by Unknown in javascript , Tutorial 0
(function() {
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode("@-ms-viewport{width:auto!important}")
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
})();For IE 10 (desktop) to work in it's new "snap mode" you need to use this:
@-ms-viewport {
width: device-width;
}But that screws up some Windows Phone 8 phones, overriding the meta viewport tag and rendering as far too large on small screens. So the answer, for now, is this gnarly device detection/injection script.
by Unknown in javascript , Tutorial 0
var Fb = {}; //An empty object literal for holding the function
Fb.log = function(obj, consoleMethod) {
if (window.console && window.console.firebug && window.console.firebug.replace(/^\s\s*/, '').replace(/\s\s*$/, '') !== '') {
if (typeof consoleMethod === "string" && typeof console[consoleMethod] === "function") {
console[consoleMethod](obj);
} else {
console.log(obj);
}
}
}If you leave console.log, console.info, etc messages in your JavaScript code and open the page in browser like IE then it may halt the page loading completely saying that 'console not defined' especially if your user uses a non IE8 browser.
This code snippet will allow you to leave the logging message as such in your code if you wish and your page will render properly in IE or any other browser that does not support the console messages.
Fb.log("This will be logged");
Fb.log("This will be displayed in console as info", "info");The FB.log function accepts two parameters the first one is the "item" that you want to display in the firebug console and the second one is the firebug method that you want to use for the logging, like info, error, etc. If you omit the second parameter the result will be equivalent to console.log()
function ltc(what) {
try {
console.log(what);
}
catch (e) {}
finally {
return;
}
}ltc("message");by Unknown in javascript , Tutorial 0
This is one of the fastest and easiest ways of emptying an array. Of course there are may other ways, but those usually include creation of a new array. This way you reuse the same array.
var myArray = ["one", "two", "three"];
// console.log( myArray ) => ["one", "two", "three"]
myArray.length = 0;
// console.log( myArray ) => []by Unknown in javascript , Tutorial 0
<script type="text/javascript">
<!--
dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
dayNumber = new Date().getDay();
document.writeln('<link rel="stylesheet" type="text/css" href="' + dayNames[dayNumber] + '.css">');
//-->
</script>
<noscript>
<link rel="stylesheet" type="text/css" href="default.css">
</noscript>Name your css files accordingly: Saturday.css, Friday.css, Sunday.css, etc...
If JavaScript is disabled in the browser, it will revert back to the default.css file.
by Unknown in javascript , Tutorial 0
<script>
<!--
function getStylesheet() {
var currentTime = new Date().getHours();
if (0 <= currentTime&¤tTime < 5) {
document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
}
if (5 <= currentTime&¤tTime < 11) {
document.write("<link rel='stylesheet' href='morning.css' type='text/css'>");
}
if (11 <= currentTime&¤tTime < 16) {
document.write("<link rel='stylesheet' href='day.css' type='text/css'>");
}
if (16 <= currentTime&¤tTime < 22) {
document.write("<link rel='stylesheet' href='evening.css' type='text/css'>");
}
if (22 <= currentTime&¤tTime <= 24) {
document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
}
}
getStylesheet();
-->
</script>
<noscript><link href="main.css" rel="stylesheet"></noscript>Name your css files accordingly: night.css, day.css, etc... One cool bonus is that since JavaScript gets the time from the local machine instead of from the server, users will be served the time-based stylesheet based on their time, not the server's, which may be in a completely different timezone.
If JavaScript is disabled in the browser, it will default to the main.css stylesheet.
by Unknown in javascript , Tutorial 0
<script type="text/javascript">
document.write("Welcome, you have Javascript on.")
</script>
<noscript>JavaScript is off. Please enable to view full site.</noscript>If JavaScript is on the user gets a welcome message. If off, the user is instructed to turn it on.
by Unknown in javascript , Tutorial 0
<script type="text/javascript">
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { //test for MSIE x.x;
var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
if (ieversion>=8)
document.write("You're using IE8 or above")
else if (ieversion>=7)
document.write("You're using IE7.x")
else if (ieversion>=6)
document.write("You're using IE6.x")
else if (ieversion>=5)
document.write("You're using IE5.x")
}
else
document.write("n/a")
</script>by Unknown in javascript , Tutorial 0
// Combiner of passed arguments and defaults (usable with any function)
Object.prototype.combine = function(_args){
for(var i in this) {
if(typeof _args[i] == "undefined") {
_args[i] = this[i];
}
}
};
// Specific example function with defaults
function feedTheCat(args){
var defaults = {
'morning' : "nothing",
'noon' : "pork",
'nite' : "mouse"
};
defaults.combine(args);
}
// USAGE: only passing 2 of 3 arguments
feedTheCat({
'morning': "milk",
'nite': "kitekat"
});
// Values would be: milk | pork | kitekatby Unknown in javascript , Tutorial 0
This is like a replacement for PHP's SCRIPT_NAME with JavaScript.
location.href.split('/').pop();For example with this URL:
http://css-tricks.com/examples/ScriptName/index.php
This code:
document.write( location.href.split('/').pop() );Would write to the page: "index.php"
by Unknown in javascript , Tutorial 0
document.documentElement.className = "js"This adds a class to the root <html>, so you could (for example) do something like hide a <div> only when JavaScript is enabled.
.js div#id { display: none; }by Unknown in javascript , Tutorial 0
/**
* Gets or sets cookies
* @param name
* @param value (null to delete or undefined to get)
* @param options (domain, expire (in days))
* @return value or true
*/
_.cookie = function(name, value, options)
{
if (typeof value === "undefined") {
var n, v,
cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
n = $.trim(cookies[i].substr(0,cookies[i].indexOf("=")));
v = cookies[i].substr(cookies[i].indexOf("=")+1);
if (n === name){
return unescape(v);
}
}
} else {
options = options || {};
if (!value) {
value = "";
options.expires = -365;
} else {
value = escape(value);
}
if (options.expires) {
var d = new Date();
d.setDate(d.getDate() + options.expires);
value += "; expires=" + d.toUTCString();
}
if (options.domain) {
value += "; domain=" + options.domain;
}
if (options.path) {
value += "; path=" + options.path;
}
document.cookie = name + "=" + value;
}
};by Unknown in javascript , Tutorial 0
function doSomething() {
/*
This code by Chris Coyier
*/
var i = 0; // counter to be used later;
}Comments in JavaScript can be between /* */ markings (useful for multiple line comments) or after // markings (for single lines only).
by Unknown in javascript , Tutorial 0
<input type="text" onfocus="if(this.value == 'value') { this.value = ''; }" value="value" />Replace "value" with the default value. If the field is selected, the default value will go away. If the user has previously changed the field value, it'll be left alone.
Alternatively, use onfocus="this.value='';" to always clear the field.
by Unknown in javascript , Tutorial 0
function isEven(value) {
if (value%2 == 0)
return true;
else
return false;
}by Unknown in javascript , Tutorial 0
When using scripts that are shared between different areas of a site, there may be cases where a function is called that doesn't exist. It makes sense on one page (the dependency is there) but not another. The difference is too slight to warrant forking the file into different versions. Instead, you can just check if the function exists before calling it to avoid the error:
if (typeof yourFunctionName == 'function') {
yourFunctionName();
}by Unknown in javascript , Tutorial 0
function checkFont(strFamily) {
var objDiv = document.createElement('div');
objDiv.style.fontFamily = strFamily;
objDiv.appendChild(document.createTextNode('FONT TEST'));
if (window.getComputedStyle) {
return window.getComputedStyle(objDiv, null).getPropertyValue('font-family') === strFamily;
}
return objDiv.currentStyle.fontFamily === strFamily;
}Usage
var iconFontHonored = checkFont('icomoon');by Unknown in javascript , Tutorial 0
function randRange(data) {
var newTime = data[Math.floor(data.length * Math.random())];
return newTime;
}
function toggleSomething() {
var timeArray = new Array(200, 300, 150, 250, 2000, 3000, 1000, 1500);
// do stuff, happens to use jQuery here (nothing else does)
$("#box").toggleClass("visible");
clearInterval(timer);
timer = setInterval(toggleSomething, randRange(timeArray));
}
var timer = setInterval(toggleSomething, 1000);
// 1000 = Initial timer when the page is first loadedby Unknown in javascript , Tutorial 0
if (top.location!= self.location) {
top.location = self.location.href;
}That will generally work, but there is a small chance of failure in the case that window is overridden. Here's a couple of clever alternatives from Nathan Smith:
<script>
// Break out of an iframe, if someone shoves your site
// into one of those silly top-bar URL shortener things.
//
// Passing `this` and re-aliasing as `window` ensures
// that the window object hasn't been overwritten.
//
// Example:
// var window = 'haha, punked!';
//
// Note: Probably unnecessary, but just for kicks.
(function(window) {
if (window.location !== window.top.location) {
window.top.location = window.location;
}
})(this);
</script><script>
// A more cryptic one-liner, to awe & impress.
//
// No need to protect `window` since `this` is
// immutable, and at the topmost level means
// `window` anyways. Here, we compare locations
// on the left side of the "&&" and execute the
// code in parenthesis if that condition is
// true (top location isn't iframe location).
//
// Otherwise, nothing happens. It's basically an
// if statement without wrapping curly brackets.
//
// Weird, I know. But pretty cool, right? :)
this.top.location !== this.location && (this.top.location = this.location);
</script>by Unknown in javascript , Tutorial 0
<script type="text/javascript">
alert('ALERT!')
</script>by Unknown in javascript , Tutorial 0
<textarea rows="10" cols="50" readonly="readonly">
example text
</textarea>by Unknown in javascript , Tutorial 0
Some of these services already (smartly) provide their scripts in an async fashion, this just combines them into more efficient, organized, and understandable code.
(function(doc, script) {
var js,
fjs = doc.getElementsByTagName(script)[0],
frag = doc.createDocumentFragment(),
add = function(url, id) {
if (doc.getElementById(id)) {return;}
js = doc.createElement(script);
js.src = url;
id && (js.id = id);
frag.appendChild( js );
};
// Google+ button
add('http://apis.google.com/js/plusone.js');
// Facebook SDK
add('//connect.facebook.net/en_US/all.js#xfbml=1&appId=200103733347528', 'facebook-jssdk');
// Twitter SDK
add('//platform.twitter.com/widgets.js');
fjs.parentNode.insertBefore(frag, fjs);
}(document, 'script'));I found it going through some site code and I forget exactly who originally did it but it seems like a Nicolas Gallagher or Mathias Bynes kind of thing. Correct me if I'm wrong.
You'll need the HTML in place for the scripts to put their stuff:
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
<div class="g-plusone" data-size="medium" data-count="true"></div>
<div id="fb-root"></div>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="1" data-show-faces="false" data-action="recommend"></div>by Unknown in javascript , Tutorial 0
var Loader = function () { }
Loader.prototype = {
require: function (scripts, callback) {
this.loadCount = 0;
this.totalRequired = scripts.length;
this.callback = callback;
for (var i = 0; i < scripts.length; i++) {
this.writeScript(scripts[i]);
}
},
loaded: function (evt) {
this.loadCount++;
if (this.loadCount == this.totalRequired && typeof this.callback == 'function') this.callback.call();
},
writeScript: function (src) {
var self = this;
var s = document.createElement('script');
s.type = "text/javascript";
s.async = true;
s.src = src;
s.addEventListener('load', function (e) { self.loaded(e); }, false);
var head = document.getElementsByTagName('head')[0];
head.appendChild(s);
}
}var l = new Loader();
l.require([
"example-script-1.js",
"example-script-2.js"],
function() {
// Callback
console.log('All Scripts Loaded');
});by Unknown in javascript , Tutorial 0
var country_list = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Cape Verde","Cayman Islands","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cruise Ship","Cuba","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kuwait","Kyrgyz Republic","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Mauritania","Mauritius","Mexico","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Namibia","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","Norway","Oman","Pakistan","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Satellite","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","South Africa","South Korea","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","St. Lucia","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Uganda","Ukraine","United Arab Emirates","United Kingdom","Uruguay","Uzbekistan","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];by Unknown in javascript , Tutorial 0
// addEventListener polyfill 1.0 / Eirik Backer / MIT Licence
(function(win, doc){
if(win.addEventListener)return; //No need to polyfill
function docHijack(p){var old = doc[p];doc[p] = function(v){return addListen(old(v))}}
function addEvent(on, fn, self){
return (self = this).attachEvent('on' + on, function(e){
var e = e || win.event;
e.preventDefault = e.preventDefault || function(){e.returnValue = false}
e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true}
fn.call(self, e);
});
}
function addListen(obj, i){
if(i = obj.length)while(i--)obj[i].addEventListener = addEvent;
else obj.addEventListener = addEvent;
return obj;
}
addListen([doc, win]);
if('Element' in win)win.Element.prototype.addEventListener = addEvent; //IE8
else{ //IE < 8
doc.attachEvent('onreadystatechange', function(){addListen(doc.all)}); //Make sure we also init at domReady
docHijack('getElementsByTagName');
docHijack('getElementById');
docHijack('createElement');
addListen(doc.all);
}
})(window, document);by Unknown in javascript , Tutorial 0
If you are going library-free, you might need to roll your own function like this.
function addClass(id,new_class){
var i,n=0;
new_class=new_class.split(",");
for(i=0;i<new_class.length;i++){
if((" "+document.getElementById(id).className+" ").indexOf(" "+new_class[i]+" ")==-1){
document.getElementById(id).className+=" "+new_class[i];
n++;
}
}
return n;
}<div id="changeme" class="big red"></div>
<button >Add a class</button>by Unknown in javascript , Tutorial 0
<a href="http://site.com" >Add Favorite and Go-To-There</a>The first param to AddFavorite is the URL, the second the text to offer up for saving. So this inline JavaScript is reusable in the sense that it will pull those values dynamically from the anchor link itself.
by Unknown in javascript , Tutorial 0
var b = document.documentElement;
b.className = b.className.replace('no-js','js');
b.setAttribute("data-useragent", navigator.userAgent);
b.setAttribute("data-platform", navigator.platform );Which results in data attributes being added to the html element like:
<html
data-useragent="Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)"
data-platform="Win32">
...Which allows you to be able to target very specific browsers on very specific platforms with CSS:
html[data-useragent*="Chrome/13.0"][data-platform="Win32"] {
...
}by Unknown in javascript , Tutorial 0
The days of 800x600 screens are all but over, but most of us still try to accommodate 1024px wide screens. Hence the popularity of "960" width sites. This bookmarklet will resize the current browser window to that width and height. You know, so us web designers with giant monitors can see what it's like to be slummin' with a 1024 screen. Also, to see "the fold", if such a concept even matters anymore.
javascript:resizeTo(1024,768)1024x768 < Drag to bookmarks bar
There is some kind of way to do it, since I still regularly see resized popups, so feel free to chime in the comments if you know more.
by Unknown in javascript , Tutorial 0
Browsers already have "back" buttons, so you'd better have a darn good reason for needing to put one on your page!
<input type="button" value="Go Back From Whence You Came!" />This is totally obtrusive, but you could fix that by only appending this button through JavaScript.
If JavaScript isn't a possibility, you could use the HTTP_REFERER, sanitize it, and echo it out via PHP.
<?php
$url = htmlspecialchars($_SERVER['HTTP_REFERER']);
echo "<a href='$url'>back</a>";
?>
function getZeroPaddedNumber($value, $padding) {
return str_pad($value, $padding, "0", STR_PAD_LEFT);
}echo getZeroPaddedNumber(123, 4);
// outputs "0123"