Permalink
Browse files

streamlining of demos, new fancy multi-pointer drawing demo (swipey.h…

…tml)
  • Loading branch information...
1 parent 6959ed5 commit 0c7efc5cd558a517dce712e3f95f5ac5ebac9cd1 @pbakaus committed Mar 16, 2012
View
@@ -0,0 +1,17 @@
+var log = function() {
+ $("#viewporter").append("<p>"+Array.prototype.slice.call(arguments).join(' ')+"</p>");
+};
+
+var debug = function() {
+
+ log('landscape:', viewporter.isLandscape(), '('+window.orientation+')');
+
+ $('#viewporter-debug-width').text(window.innerWidth);
+ $('#viewporter-debug-height').text(window.innerHeight);
+ $('#viewporter-debug-useragent').text(navigator.userAgent);
+
+};
+
+$(window).bind(viewporter.ACTIVE ? 'viewportready viewportchange' : 'load', function() {
+ debug();
+});
@@ -5,6 +5,7 @@ html, body {
font-size: 12px;
color: white;
background: green;
+ -webkit-text-size-adjust: none; /* important, or your text resizes randomly on rotation! */
}
p {
@@ -42,8 +43,24 @@ p {
right: 0;
background: #333;
color: #fff;
+ text-shadow: 1px 1px 0px #000;
font-size: 2em;
- padding: 1em;
- padding-top: 3em;
+ text-align: center;
display: none;
+}
+
+#orientationlock p {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ width: 100%;
+ margin-top: -2em;
+ padding: 0;
+}
+
+canvas {
+ background: #eee;
+ position: absolute;
+ top: 0;
+ left: 0;
}
@@ -11,32 +11,14 @@
<!-- This exact meta viewport is required for Viewporter for work properly -->
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0" />
- <link rel="stylesheet" href="style.css" type="text/css" media="screen">
-
- <script src="../src/viewporter.js"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
-
- <script type="text/javascript">
+ <link rel="stylesheet" href="common/style.css" type="text/css" media="screen">
- var log = function() {
- $("#viewporter").append("<p>"+Array.prototype.slice.call(arguments).join(' ')+"</p>");
- };
-
- var debug = function() {
-
- log('landscape:', viewporter.isLandscape(), '('+window.orientation+')');
-
- $('#viewporter-debug-width').text(window.innerWidth);
- $('#viewporter-debug-height').text(window.innerHeight);
- $('#viewporter-debug-useragent').text(navigator.userAgent);
-
- };
-
- $(window).bind(viewporter.ACTIVE ? 'viewportready viewportchange' : 'load', function() {
- debug();
- });
+ <!-- important files (non-optional) -->
+ <script src="../src/viewporter.js"></script>
- </script>
+ <!-- the following two are optional, and just for this demo -->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="common/debug.js"></script>
</head>
<body>
View
@@ -8,53 +8,22 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
- <script src="../src/viewporter.js"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
- <script type="text/javascript">
-
- viewporter.forceDetection = true;
-
- (function() {
-
- var scale = 1;
+ <!-- There's no meta viewport here as the native helper writes it into the <head> -->
- if(navigator.userAgent.indexOf("iPhone") > -1 && window.devicePixelRatio > 1) {
- scale /= window.devicePixelRatio;
- }
- document.write('<meta name="viewport" content="' + (navigator.userAgent.indexOf("Android") > -1 ? 'target-densitydpi=device-dpi,' : '') + 'initial-scale=' + scale + ',maximum-scale=' + scale + '" />');
+ <link rel="stylesheet" href="common/style.css" type="text/css" media="screen">
- })();
-
- </script>
-
- <link rel="stylesheet" href="style.css" type="text/css" media="screen">
-
- <script type="text/javascript">
-
- var log = function() {
- $("#viewporter").append("<p>"+Array.prototype.slice.call(arguments).join(' ')+"</p>");
- };
-
- var debug = function() {
-
- log('landscape:', viewporter.isLandscape(), '('+window.orientation+')');
-
- $('#viewporter-debug-width').text(window.innerWidth);
- $('#viewporter-debug-height').text(window.innerHeight);
- $('#viewporter-debug-useragent').text(navigator.userAgent);
-
- };
-
- $(window).bind(viewporter.ACTIVE ? 'viewportready viewportchange' : 'load', function() {
- debug();
- });
+ <!-- important files (non-optional) -->
+ <script src="../src/viewporter.js"></script>
+ <script src="../src/viewporter.native.js"></script><!-- important: this has to be in the <head>! -->
- </script>
+ <!-- the following two are optional, and just for this demo -->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="common/debug.js"></script>
</head>
<body>
-<div id="viewporter"><!-- This wrapper element is also required -->
+<div id="viewporter"><!-- This wrapper element is required -->
<div id="checker-bl">
<p><strong>window width:</strong> <span id="viewporter-debug-width"></span></p>
@@ -11,30 +11,14 @@
<!-- This exact meta viewport is required for Viewporter for work properly -->
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0" />
- <link rel="stylesheet" href="style.css" type="text/css" media="screen">
-
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
- <script type="text/javascript">
-
- var log = function() {
- $("body").append("<p>"+Array.prototype.slice.call(arguments).join(' ')+"</p>");
- };
-
- var debug = function() {
-
- log('landscape:', '('+window.orientation+')');
-
- $('#viewporter-debug-width').text(window.innerWidth);
- $('#viewporter-debug-height').text(window.innerHeight);
- $('#viewporter-debug-useragent').text(navigator.userAgent);
-
- };
-
- $(window).bind('load', function() {
- debug();
- });
+ <link rel="stylesheet" href="common/style.css" type="text/css" media="screen">
+ <!-- the following two are optional, and just for this demo -->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+ <script>
+ var viewporter = { isLandscape: function() {} }; // so the debug.js doesn't break
</script>
+ <script src="common/debug.js"></script>
</head>
<body>
@@ -11,43 +11,27 @@
<!-- This exact meta viewport is required for Viewporter for work properly -->
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0" />
- <link rel="stylesheet" href="style.css" type="text/css" media="screen">
+ <link rel="stylesheet" href="common/style.css" type="text/css" media="screen">
+ <!-- important files (non-optional) -->
<script src="../src/viewporter.js"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
-
- <script type="text/javascript">
- var log = function() {
- $("#viewporter").append("<p>"+Array.prototype.slice.call(arguments).join(' ')+"</p>");
- };
-
- var debug = function() {
-
- log('landscape:', viewporter.isLandscape(), '('+window.orientation+')');
+ <!-- the following two are optional, and just for this demo -->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="common/debug.js"></script>
- $('#viewporter-debug-width').text(window.innerWidth);
- $('#viewporter-debug-height').text(window.innerHeight);
- $('#viewporter-debug-useragent').text(navigator.userAgent);
-
- };
-
- $(window).bind(viewporter.ACTIVE ? 'viewportready viewportchange' : 'load', function() {
- debug();
- });
-
+ <script>
// orientation locking
$(window).bind('viewportready viewportchange', function() {
- $('#orientationlock').toggle(viewporter.isLandscape());
+ $('#orientationlock').toggle(!viewporter.isLandscape());
});
-
</script>
</head>
<body>
<div id="viewporter">
- <div id="orientationlock">Please rotate your device to use this demo application.</div>
+ <div id="orientationlock"><p>Please rotate your device to use this demo application.</p></div>
<div id="checker-bl">
<p><strong>window width:</strong> <span id="viewporter-debug-width"></span></p>
Oops, something went wrong.

1 comment on commit 0c7efc5

Contributor

jzaefferer commented on 0c7efc5 Mar 28, 2012

You should give the new interaction widget a try for that swipey demo: https://github.com/jquery/jquery-ui/blob/interactions/ui/jquery.ui.interaction.js - abstracts mouse, touch and MSPointer events.

Please sign in to comment.