JS
x$('').xhrjson('xhrTarget.json', {map:{'name':'#tName', 'colour':'#tColour', 'age':'#tAge'}});
//<3XUI src http://www.schrodinger.net/PhoneGapWebTest/xui/index.html
x$('').xhrjson('xhrTarget.json', {map:{'name':'#tName', 'colour':'#tColour', 'age':'#tAge'}});
//<3XUI src http://www.schrodinger.net/PhoneGapWebTest/xui/index.html
document.body.onorientationchange = (function(){
document.body.className =
orientation % 180 == 0 ? 'vertical' : 'horizontal';
return arguments.callee;
})(); //Adds class .vertical and .horizontal :) src ?
var $ = function(el) {
return document.querySelectorAll(el);
};
// Usage = $('.box');
var back = document.querySelector("#button");
back.ontouchstart = function( event ) {
event.target.classList.toggle('active');
} //Toggle button's class on touchStart && touchEnd
back.ontouchend = function( event ) {
event.target.classList.toggle('active');
}
/* You can't transition from height: 0; to height: auto; but you can transition&&transform from scaleY(0) to scaleY(1); transform-origin: top; src https://twitter.com/#!/estellevw/status/165182202378846209 */
div {-webkit-transform : translateZ(0,0,0);}
/*Fool the browser into thinking it's rendering in 3D by setting the z position to 0 using translateZ*/
html { /* +ie9 */
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;}
function StartTransition(el, name) {
var current = el.className;
if (current.indexOf(name)<0) {
if (current.length > 0)
current += " ";
current += name;
}
else {
// Remove the class name for the element
current = current.replace(name, "");
}
el.className = current;
} // src mobileapplab.se
<div class="text" onclick="StartTransition(this, 'rotate');">Touch me to start the transition.</div>
div.rotate {
-webkit-transition: -webkit-transform 2s ease-in;
-webkit-transform: rotate(-20deg);
}
box-shadow:inset 0 1px rgba(255,255,255,.3); /* The subtle inset shadow you can see around the code */