TouchSwipe Test
Attempt to disable user interaction while animation is running from another event.
by metalhaze
HTML
<link rel="stylesheet" href="https://dl.dropbox.com/u/22224/jsfiddle/swipingRegions.css">
<link rel="stylesheet" href="https://dl.dropbox.com/u/22224/jsfiddle/main.css">
<script src="https://dl.dropbox.com/u/22224/jsfiddle/jquery.touchSwipe126.js"></script>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess
http://blog.chromium.org/2010/09/google-chrome-frame-stable-and-speedy.html-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- Place favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="favicon.ico">
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For first-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!--Configuring the viewport - http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<!--Allows webpage to run as a fullscreen webapp-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--The style of the status bar on the iPad. Possible options include default, black, and black-translucent, which overlays the black strip on top of your content.-->
<meta...
JavaScript
$(document).ready(function() {
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
var resizeWindows = { // Create a parent object to refer to. Stop using unnamed functions. Name and call functions within the object.
init: function() { // Method used to put things in motion.
this.width = $(window).width(),
this.height = $(window).height(),
this.allWindows = $('#orderingContainer, #docContainer, #summaryContainer, #conditionContainer'),
this.miniEHR = $('#miniEHR')
resizeWindows.miniEHR.height(resizeWindows.height-52)
resizeWindows.allWindows.css({
height: resizeWindows.height - 104,
width: resizeWindows.width*.75
});
}
};
resizeWindows.init();
function resizeStuff() {
resizeWindows.init();
}
var TO = false;
$(window).resize(function(){
if(TO !== false)
clearTimeout(TO);
TO = setTimeout(resizeStuff, 100); //200 is time in miliseconds
});
var swipeRegions = {
ordering: "<div id='orderingContainer' class='animated swipingRegion'><div class='shadowWrapper'><div class='sectionHeader'><div class='sectionTitle'>Orders</div></div></div><div class='swipedLoadedData'>This is some text</div></div>",
documentation: "<div id='docContainer' class='animated swipingRegion'><div class='shadowWrapper'><div class='sectionHeader'><div class='sectionTitle'>Documentation</div></div></div><div class='swipedLoadedData'>This is some text</div></div>",
summary: "<div id='summaryContainer' class='animated swipingRegion'><div class='shadowWrapper'><div class='sectionHeader'><div class='sectionTitle'>Summary</div></div></div><div class='swipedLoadedData'>This is some text</div></div>",
conditionMgmt:...