Last night a snippet saved my life

JS

x$('').xhrjson('xhrTarget.json', {map:{'name':'#tName', 'colour':'#tColour', 'age':'#tAge'}});

<3 XUI: http://www.schrodinger.net/PhoneGapWebTest/xui/index.html

JS

function live(selector, eventType, callback) { document.addEventListener(eventType, function (e) { if (e.target.webkitMatchesSelector(selector)) { callback.call(e.target, e); } }, false);} live('.link', 'click', function(e) {     e.preventDefault(); //do something cool });

Event delegation: http://www.sitepoint.com/forums/showthread.php?786594-Vanilla-Js-version-of-.live()

JS

window.history.back(); window.history.go(-2); //go to nearest scriptogram.com page history.go(“scriptogram.com”);

JS

(function(d, c) { d[c] = d[c].replace(/\bno-js\b/, "js"); })(document.documentElement, "className"); <html class="no-js"> //Becomes <html class="js">

JS

document.body.addEventListener('touchmove', function(event) { event.preventDefault();}, false);

Add a bit of native flair

JS

if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { location.replace("http://url-to-send-them/iphone.html");}

Hack, look away

JS

if (window.devicePixelRatio == 2) {// code }

Dirty quick little hack for targeting highdpi devices

JS

window.addEventListener('load', function(e) { setTimeout(function() { window.scrollTo(0, 1); }, 1); }, false);

Hides mobile browser's address bar when page is done loading

JS

document.body.onorientationchange = (function(){ document.body.className = orientation % 180 == 0 ? 'vertical' : 'horizontal'; return arguments.callee; })();

Adds class .vertical and .horizontal :)

CSS

media only screen and (device-width: 768px) and (orientation: landscape) { #wrap{opacity:0;}#mensaje {opacity:1;} } #mensaje {opacity:0;-webkit-transition: opacity .8s ease; transition: opacity .8s ease;} #wrap{opacity:1; -webkit-transition: opacity .1s ease; transition: opacity .1s ease;}

Deal with portrait/landscape issues with mediaqueries if previous JS was too much