Complete reorganisation of the directory so that making new demos appears, visually, more consistent. I'd like a better way to credit other people if they start contributing demos - but for now, no one has ;-)
This commit is contained in:
Remy Sharp
parent
a3b18476f4
commit
ad614eef1b
|
|
@ -15,6 +15,8 @@ RewriteCond %{REQUEST_FILENAME} -f
|
|||
RewriteRule .* - [L]
|
||||
|
||||
RewriteCond %{REQUEST_FILENAME}.html -f
|
||||
RewriteRule (.*) $1.html [L]
|
||||
RewriteRule (.*) $1.html [QSA,L]
|
||||
|
||||
RewriteRule ^(.*)$ page.php [QSA,L]
|
||||
|
||||
</IfModule>
|
||||
|
|
|
|||
|
|
@ -62,5 +62,16 @@ if (canvas.getContext('2d')) {
|
|||
};
|
||||
}
|
||||
</script>
|
||||
<a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
|
||||
<script>
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script>
|
||||
try {
|
||||
var pageTracker = _gat._getTracker("UA-1656750-18");
|
||||
pageTracker._trackPageview();
|
||||
} catch(err) {}</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
143
canvas.html
143
canvas.html
|
|
@ -1,143 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<title>HTML5 Demo: canvas</title>
|
||||
<style>
|
||||
body {
|
||||
font: normal 16px/20px Helvetica, sans-serif;
|
||||
background: rgb(237, 237, 236);
|
||||
margin: 0;
|
||||
margin-top: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
article, section, header, footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #fff url(images/shade.jpg) repeat-x center bottom;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
border-top: 1px solid #fff;
|
||||
padding-bottom: 76px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 100%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
header,
|
||||
article > *,
|
||||
footer a,
|
||||
footer p {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
footer > * {
|
||||
margin: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
article {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
|
||||
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while (i--){document.createElement(e[i])}})()
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<section id="wrapper">
|
||||
<header>
|
||||
<h1>Canvas</h1>
|
||||
</header>
|
||||
<article></article>
|
||||
<footer><a href="/">HTML5 demo</a></footer>
|
||||
</section>
|
||||
<script src="h5utils.js"></script>
|
||||
<script>
|
||||
|
||||
buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });
|
||||
|
||||
function buildSpinner(data) {
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.height = 100;
|
||||
canvas.width = 300;
|
||||
document.getElementsByTagName('article')[0].appendChild(canvas);
|
||||
var ctx = canvas.getContext("2d"),
|
||||
i = 0, degrees = data.degrees, loops = 0, degreesList = [];
|
||||
|
||||
for (i = 0; i < degrees; i++) {
|
||||
degreesList.push(i);
|
||||
}
|
||||
|
||||
// reset
|
||||
i = 0;
|
||||
|
||||
// so I can kill it later
|
||||
window.canvasTimer = setInterval(draw, 1000/degrees);
|
||||
|
||||
function reset() {
|
||||
ctx.clearRect(0,0,100,100); // clear canvas
|
||||
|
||||
var left = degreesList.slice(0, 1);
|
||||
var right = degreesList.slice(1, degreesList.length);
|
||||
degreesList = right.concat(left);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
var c, s, e;
|
||||
|
||||
var d = 0;
|
||||
|
||||
if (i == 0) {
|
||||
reset();
|
||||
}
|
||||
|
||||
ctx.save();
|
||||
|
||||
d = degreesList[i];
|
||||
c = Math.floor(255/degrees*i);
|
||||
ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
|
||||
ctx.lineWidth = data.size;
|
||||
ctx.beginPath();
|
||||
s = Math.floor(360/degrees*(d));
|
||||
e = Math.floor(360/degrees*(d+1)) - 1;
|
||||
|
||||
ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.restore();
|
||||
|
||||
i++;
|
||||
if (i >= degrees) {
|
||||
i = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<script>
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script>
|
||||
try {
|
||||
var pageTracker = _gat._getTracker("UA-1656750-18");
|
||||
pageTracker._trackPageview();
|
||||
} catch(err) {}</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<title>HTML5 Demo: contenteditable</title>
|
||||
<style>
|
||||
body {
|
||||
font: normal 16px/20px Helvetica, sans-serif;
|
||||
background: rgb(237, 237, 236);
|
||||
margin: 0;
|
||||
margin-top: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
section, header, footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #fff url(images/shade.jpg) repeat-x center bottom;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
border-top: 1px solid #fff;
|
||||
padding-bottom: 76px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 100%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#wrapper > * > * {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
padding: 3px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
footer > * {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
article div {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
label {
|
||||
float: left;
|
||||
display: block;
|
||||
width: 125px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
[contenteditable]:hover {
|
||||
outline: 1px dotted #ccc;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script src="h5utils.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
<article>
|
||||
<section>
|
||||
<header>
|
||||
<h1>ContentEditable</h1>
|
||||
</header>
|
||||
<p>Any elements with the <code>contenteditable</code> attribute set will have a grey outline as you hover over. Feel free to edit and change their contents. I'm using local storage to maintain your changes.</p>
|
||||
<p><small>Note that since Opera doesn't support storage, the changes won't save.</small></p>
|
||||
</section>
|
||||
<section id="editable" contenteditable="true">
|
||||
<h2>Go ahead, edit away!</h2>
|
||||
<p>Here's a typical paragraph element</p>
|
||||
<ol>
|
||||
<li>and now a list</li>
|
||||
<li>with only</li>
|
||||
<li>three items</li>
|
||||
</ol>
|
||||
</section>
|
||||
<div>
|
||||
<input type="button" id="clear" value="Clear changes" />
|
||||
</div>
|
||||
</article>
|
||||
<footer><a href="/">HTML5 demo</a></footer>
|
||||
</div>
|
||||
<script>
|
||||
var editable = document.getElementById('editable');
|
||||
|
||||
addEvent(editable, 'blur', function () {
|
||||
// lame that we're hooking the blur event
|
||||
localStorage.setItem('contenteditable', this.innerHTML);
|
||||
document.designMode = 'off';
|
||||
});
|
||||
|
||||
addEvent(editable, 'focus', function () {
|
||||
document.designMode = 'on';
|
||||
});
|
||||
|
||||
addEvent(document.getElementById('clear'), 'click', function () {
|
||||
localStorage.clear();
|
||||
window.location = window.location; // refresh
|
||||
});
|
||||
|
||||
if (localStorage.getItem('contenteditable')) {
|
||||
editable.innerHTML = localStorage.getItem('contenteditable');
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<script>
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script>
|
||||
try {
|
||||
var pageTracker = _gat._getTracker("UA-1656750-18");
|
||||
pageTracker._trackPageview();
|
||||
} catch(err) {}</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
body {
|
||||
font: normal 16px/20px Helvetica, sans-serif;
|
||||
background: rgb(237, 237, 236);
|
||||
margin: 0;
|
||||
margin-top: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
section, header, footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #fff url(/images/shade.jpg) repeat-x center bottom;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
border-top: 1px solid #fff;
|
||||
padding-bottom: 76px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 100%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
header,
|
||||
article > *,
|
||||
footer > * {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
footer > * {
|
||||
margin: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#status {
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
#status.fail {
|
||||
background: #c00;
|
||||
}
|
||||
|
||||
#status.success {
|
||||
background: #0c0;
|
||||
}
|
||||
|
||||
#status.offline {
|
||||
background: #c00;
|
||||
}
|
||||
|
||||
#status.online {
|
||||
background: #0c0;
|
||||
}
|
||||
|
||||
footer #built:hover:after {
|
||||
content: '...quickly';
|
||||
}
|
||||
|
||||
[contenteditable]:hover {
|
||||
outline: 1px dotted #ccc;
|
||||
}
|
||||
|
||||
abbr {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted #ccc;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#ffad {
|
||||
font-size: 90%;
|
||||
border: 1px solid #ccc;
|
||||
background: #fcfcfc;
|
||||
display: block;
|
||||
-moz-border-radius-topleft: 25px;
|
||||
-webkit-border-top-left-radius: 25px;
|
||||
-moz-border-radius-bottomright: 25px;
|
||||
-webkit-border-bottom-right-radius: 25px;
|
||||
border-top-left-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#ffad:hover {
|
||||
border-color: #919191;
|
||||
}
|
||||
|
||||
#ffad section {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#ffad p {
|
||||
margin: 10px 10px 10px 100px;
|
||||
}
|
||||
|
||||
#ffad img {
|
||||
border: 0;
|
||||
float: left;
|
||||
display: block;
|
||||
margin: 14px 14px 0;
|
||||
}
|
||||
|
||||
#ffad .definition {
|
||||
font-style: italic;
|
||||
font-family: Georgia,Palatino,Palatino Linotype,Times,Times New Roman,serif;
|
||||
}
|
||||
|
||||
#ffad .url {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
padding: 3px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
153
database.html
153
database.html
|
|
@ -1,153 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<title>HTML5 Demo: Web Database</title>
|
||||
<style>
|
||||
body {
|
||||
font: normal 16px/20px Helvetica, sans-serif;
|
||||
background: rgb(237, 237, 236);
|
||||
margin: 0;
|
||||
margin-top: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
section, header, footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #fff url(images/shade.jpg) repeat-x center bottom;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
border-top: 1px solid #fff;
|
||||
padding-bottom: 76px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 100%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#wrapper > * > * {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
padding: 3px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
footer > * {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
article div {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
#status {
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
#status.error {
|
||||
background: #c00;
|
||||
}
|
||||
|
||||
#status.ok {
|
||||
background: #0c0;
|
||||
}
|
||||
|
||||
label {
|
||||
float: left;
|
||||
display: block;
|
||||
width: 125px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
#tweets {
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
border: 3px solid #ccc;
|
||||
}
|
||||
|
||||
#tweets ul {
|
||||
margin: 0;
|
||||
/* list-style: none;*/
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#tweets li {
|
||||
padding-bottom: 5px;
|
||||
padding-top: 5px;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
#tweets li:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
</style>
|
||||
<script src="h5utils.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
<article>
|
||||
<section>
|
||||
<header>
|
||||
<h1>Web Database</h1>
|
||||
</header>
|
||||
<p>We're using the Web Database API to store <a href="http://twitter.com/rem">my tweets</a>, so there's no Twitter API hit on load.</p>
|
||||
<p>In addition, I'm using the <code>since_id</code> when we make new requests, so I shouldn't be doubling up on tweets.</p>
|
||||
<p>Status: <span id="status" class="ok">ready</span></p>
|
||||
</section>
|
||||
<section id="tweets">
|
||||
<ol>
|
||||
<li>None loaded up yet :-(</li>
|
||||
</ol>
|
||||
</section>
|
||||
<div>
|
||||
<input type="button" id="clear" value="Reset database" />
|
||||
<input type="button" id="timeline" value="Timeline" />
|
||||
<input type="button" id="mentions" value="Mentions" />
|
||||
</div>
|
||||
</article>
|
||||
<footer><a href="/">HTML5 demo</a></footer>
|
||||
</div>
|
||||
<script src="tweets.js"></script>
|
||||
<script>
|
||||
// all contained in http://html5demos.com/tweets.js
|
||||
html5demoTweets.init();
|
||||
|
||||
addEvent(document.getElementById('clear'), 'click', function () {
|
||||
html5demoTweets.reset();
|
||||
});
|
||||
|
||||
addEvent(document.getElementById('timeline'), 'click', function () {
|
||||
html5demoTweets.timeline();
|
||||
});
|
||||
|
||||
addEvent(document.getElementById('mentions'), 'click', function () {
|
||||
html5demoTweets.mentions();
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script>
|
||||
try {
|
||||
var pageTracker = _gat._getTracker("UA-1656750-18");
|
||||
pageTracker._trackPageview();
|
||||
} catch(err) {}</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<title>Canvas</title>
|
||||
<article></article>
|
||||
<script>
|
||||
|
||||
buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });
|
||||
|
||||
function buildSpinner(data) {
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.height = 100;
|
||||
canvas.width = 300;
|
||||
document.getElementsByTagName('article')[0].appendChild(canvas);
|
||||
var ctx = canvas.getContext("2d"),
|
||||
i = 0, degrees = data.degrees, loops = 0, degreesList = [];
|
||||
|
||||
for (i = 0; i < degrees; i++) {
|
||||
degreesList.push(i);
|
||||
}
|
||||
|
||||
// reset
|
||||
i = 0;
|
||||
|
||||
// so I can kill it later
|
||||
window.canvasTimer = setInterval(draw, 1000/degrees);
|
||||
|
||||
function reset() {
|
||||
ctx.clearRect(0,0,100,100); // clear canvas
|
||||
|
||||
var left = degreesList.slice(0, 1);
|
||||
var right = degreesList.slice(1, degreesList.length);
|
||||
degreesList = right.concat(left);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
var c, s, e;
|
||||
|
||||
var d = 0;
|
||||
|
||||
if (i == 0) {
|
||||
reset();
|
||||
}
|
||||
|
||||
ctx.save();
|
||||
|
||||
d = degreesList[i];
|
||||
c = Math.floor(255/degrees*i);
|
||||
ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
|
||||
ctx.lineWidth = data.size;
|
||||
ctx.beginPath();
|
||||
s = Math.floor(360/degrees*(d));
|
||||
e = Math.floor(360/degrees*(d+1)) - 1;
|
||||
|
||||
ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.restore();
|
||||
|
||||
i++;
|
||||
if (i >= degrees) {
|
||||
i = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<title>ContentEditable</title>
|
||||
<article>
|
||||
<section>
|
||||
<p>Any elements with the <code>contenteditable</code> attribute set will have a grey outline as you hover over. Feel free to edit and change their contents. I'm using local storage to maintain your changes.</p>
|
||||
</section>
|
||||
<section id="editable" contenteditable="true">
|
||||
<h2>Go ahead, edit away!</h2>
|
||||
<p>Here's a typical paragraph element</p>
|
||||
<ol>
|
||||
<li>and now a list</li>
|
||||
<li>with only</li>
|
||||
<li>three items</li>
|
||||
</ol>
|
||||
</section>
|
||||
<div>
|
||||
<input type="button" id="clear" value="Clear changes" />
|
||||
</div>
|
||||
</article>
|
||||
<script>
|
||||
var editable = document.getElementById('editable');
|
||||
|
||||
addEvent(editable, 'blur', function () {
|
||||
// lame that we're hooking the blur event
|
||||
localStorage.setItem('contenteditable', this.innerHTML);
|
||||
document.designMode = 'off';
|
||||
});
|
||||
|
||||
addEvent(editable, 'focus', function () {
|
||||
document.designMode = 'on';
|
||||
});
|
||||
|
||||
addEvent(document.getElementById('clear'), 'click', function () {
|
||||
localStorage.clear();
|
||||
window.location = window.location; // refresh
|
||||
});
|
||||
|
||||
if (localStorage.getItem('contenteditable')) {
|
||||
editable.innerHTML = localStorage.getItem('contenteditable');
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -1,69 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<title>HTML5 Demo: Web Database</title>
|
||||
<title>Web SQL Database - rollback test</title>
|
||||
<style>
|
||||
body {
|
||||
font: normal 16px/20px Helvetica, sans-serif;
|
||||
background: rgb(237, 237, 236);
|
||||
margin: 0;
|
||||
margin-top: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
section, header, footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #fff url(images/shade.jpg) repeat-x center bottom;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
border-top: 1px solid #fff;
|
||||
padding-bottom: 76px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 100%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#wrapper > * > * {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
padding: 3px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
footer > * {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
article div {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
#status {
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
|
||||
#status.error {
|
||||
background: #c00;
|
||||
}
|
||||
|
||||
|
||||
#status.ok {
|
||||
background: #0c0;
|
||||
}
|
||||
|
|
@ -97,22 +43,13 @@ label {
|
|||
border-top: 0;
|
||||
}
|
||||
</style>
|
||||
<script src="h5utils.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
<article>
|
||||
<section>
|
||||
<header>
|
||||
<h1>Web SQL Database - rollback test</h1>
|
||||
</header>
|
||||
<p>This code creates a table called 'foo' and inserts a single row. In a separate transaction, it drops the table then tries to insert in to the table 'foo' - obviously failing. That failure should cause the transaction to rollback, and leave the table 'foo' intact. The next transaction tries to select a row from the 'foo' table. If the rollback succeeds, you should see the status change to 'found rows'.</p>
|
||||
<p>Status:</p>
|
||||
<section id="status" class="ok">ready</section>
|
||||
</section>
|
||||
</article>
|
||||
<footer><a href="/">HTML5 demo</a></footer>
|
||||
</div>
|
||||
<script>
|
||||
var db = openDatabase('foo', '1.0', 'foo', 2 * 1024);
|
||||
db.transaction(function (tx) {
|
||||
|
|
@ -138,15 +75,4 @@ db.transaction(function (tx) {
|
|||
document.querySelector('#status').className = 'error';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script>
|
||||
try {
|
||||
var pageTracker = _gat._getTracker("UA-1656750-18");
|
||||
pageTracker._trackPageview();
|
||||
} catch(err) {}</script>
|
||||
</body>
|
||||
</html>
|
||||
</script>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<title>Web Database</title>
|
||||
<style>
|
||||
#status {
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
#status.error {
|
||||
background: #c00;
|
||||
}
|
||||
|
||||
#status.ok {
|
||||
background: #0c0;
|
||||
}
|
||||
|
||||
label {
|
||||
float: left;
|
||||
display: block;
|
||||
width: 125px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
#tweets {
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
border: 3px solid #ccc;
|
||||
}
|
||||
|
||||
#tweets ul {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#tweets li {
|
||||
padding-bottom: 5px;
|
||||
padding-top: 5px;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
#tweets li:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
</style>
|
||||
<article>
|
||||
<section>
|
||||
<p>We're using the Web Database API to store <a href="http://twitter.com/rem">my tweets</a>, so there's no Twitter API hit on load.</p>
|
||||
<p>In addition, I'm using the <code>since_id</code> when we make new requests, so I shouldn't be doubling up on tweets.</p>
|
||||
<p>Status: <span id="status" class="ok">ready</span></p>
|
||||
</section>
|
||||
<section id="tweets">
|
||||
<ol>
|
||||
<li>None loaded up yet :-(</li>
|
||||
</ol>
|
||||
</section>
|
||||
<div>
|
||||
<input type="button" id="clear" value="Reset database" />
|
||||
<input type="button" id="timeline" value="Timeline" />
|
||||
<input type="button" id="mentions" value="Mentions" />
|
||||
</div>
|
||||
</article>
|
||||
<script src="/js/tweets.js"></script>
|
||||
<script>
|
||||
// all contained in http://html5demos.com/js/tweets.js
|
||||
html5demoTweets.init();
|
||||
|
||||
addEvent(document.getElementById('clear'), 'click', function () {
|
||||
html5demoTweets.reset();
|
||||
});
|
||||
|
||||
addEvent(document.getElementById('timeline'), 'click', function () {
|
||||
html5demoTweets.timeline();
|
||||
});
|
||||
|
||||
addEvent(document.getElementById('mentions'), 'click', function () {
|
||||
html5demoTweets.mentions();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,58 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset=utf-8 />
|
||||
<title>HTML5 Demo: Simple Drag and Drop</title>
|
||||
<title>Simple Drag and Drop</title>
|
||||
<style>
|
||||
body {
|
||||
font: normal 16px/20px Helvetica, sans-serif;
|
||||
background: rgb(237, 237, 236);
|
||||
margin: 0;
|
||||
margin-top: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
section, header, footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #fff url(images/shade.jpg) repeat-x center bottom;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
border-top: 1px solid #fff;
|
||||
padding-bottom: 76px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 100%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
header,
|
||||
article > *,
|
||||
footer > * {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
padding: 3px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
footer > * {
|
||||
margin: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
article div {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
|
@ -97,18 +44,12 @@ label {
|
|||
}
|
||||
|
||||
</style>
|
||||
<script src="h5utils.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<section id="wrapper">
|
||||
<header>
|
||||
<h1>Simple Drag and Drop</h1>
|
||||
</header>
|
||||
<article>
|
||||
<section>
|
||||
<p>Instructions: grab <em>anything</em> and drag it in to the drop zone below. I've included some text below, but you can drag urls, bookmarklets, files, <em>anything</em>.</p>
|
||||
<p>Check out the functionality in different browsers, because the same content appears differently when dropped. Something to watch out for in the future.</p>
|
||||
<p>Change the options below to see the difference between the default Text and sniffing for data (not supported in IE I'm affriad).</p>
|
||||
<p>Try also dropping a few files from your desktop on the drop zone and notice the content-type: text/uri-list</p>
|
||||
<div>
|
||||
<input type="radio" name="getDataType" value="text" id="text" checked="checked" /> <label for="text">getData('Text')</label>
|
||||
</div>
|
||||
|
|
@ -123,8 +64,6 @@ label {
|
|||
<p class="info">Drop here for info about the dragged item</p>
|
||||
</section>
|
||||
</article>
|
||||
<footer><a href="/">HTML5 demo</a></footer>
|
||||
</section>
|
||||
<script>
|
||||
|
||||
function cancel(e) {
|
||||
|
|
@ -157,9 +96,7 @@ addEvent(drop, 'drop', function (e) {
|
|||
// just rendering the text in to the list
|
||||
|
||||
// clear out the original text
|
||||
if (drop.innerHTML.match(/Drop here/i)) {
|
||||
drop.innerHTML = '<ul></ul>';
|
||||
}
|
||||
drop.innerHTML = '<ul></ul>';
|
||||
|
||||
var li = document.createElement('li');
|
||||
|
||||
|
|
@ -186,15 +123,4 @@ addEvent(drop, 'drop', function (e) {
|
|||
|
||||
return false;
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script>
|
||||
try {
|
||||
var pageTracker = _gat._getTracker("UA-1656750-18");
|
||||
pageTracker._trackPageview();
|
||||
} catch(err) {}</script>
|
||||
</body>
|
||||
</html>
|
||||
</script>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<meta name="viewport" content="width=620" />
|
||||
<title>geolocation</title>
|
||||
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
|
||||
<article>
|
||||
<p>Finding your location: <span id="status">checking...</span></p>
|
||||
</article>
|
||||
<script>
|
||||
function success(position) {
|
||||
var s = document.querySelector('#status');
|
||||
|
||||
if (s.className == 'success') {
|
||||
// not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back
|
||||
return;
|
||||
}
|
||||
|
||||
s.innerHTML = "found you!";
|
||||
s.className = 'success';
|
||||
|
||||
var mapcanvas = document.createElement('div');
|
||||
mapcanvas.id = 'mapcanvas';
|
||||
mapcanvas.style.height = '400px';
|
||||
mapcanvas.style.width = '560px';
|
||||
|
||||
document.querySelector('article').appendChild(mapcanvas);
|
||||
|
||||
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
|
||||
var myOptions = {
|
||||
zoom: 15,
|
||||
center: latlng,
|
||||
mapTypeControl: false,
|
||||
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||||
};
|
||||
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
|
||||
|
||||
var marker = new google.maps.Marker({
|
||||
position: latlng,
|
||||
map: map,
|
||||
title:"You are here!"
|
||||
});
|
||||
}
|
||||
|
||||
function error(msg) {
|
||||
var s = document.querySelector('#status');
|
||||
s.innerHTML = typeof msg == 'string' ? msg : "failed";
|
||||
s.className = 'fail';
|
||||
|
||||
// console.log(arguments);
|
||||
}
|
||||
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(success, error);
|
||||
} else {
|
||||
error('not supported');
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -1,72 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<title>HTML5 Demo: worker reference point</title>
|
||||
<style>
|
||||
body {
|
||||
font: normal 16px/20px Helvetica, sans-serif;
|
||||
background: rgb(237, 237, 236);
|
||||
margin: 0;
|
||||
margin-top: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
article, section, header, footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #fff url(images/shade.jpg) repeat-x center bottom;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
border-top: 1px solid #fff;
|
||||
padding-bottom: 76px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 100%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
header,
|
||||
article > *,
|
||||
footer a,
|
||||
footer p {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
footer > * {
|
||||
margin: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
article {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section id="wrapper">
|
||||
<header>
|
||||
<h1>Non Worker (for reference)</h1>
|
||||
</header>
|
||||
<title>Non Worker</title>
|
||||
<article>
|
||||
<p>Canvas is running whilst an prime number finder runs - this will cause your browser to hang</p>
|
||||
<p>Prime found: <span id="status">0</span></p>
|
||||
<div><input type="button" value="start worker" id="toggleWorker" /></div>
|
||||
</article>
|
||||
<footer><a href="/">HTML5 demo</a></footer>
|
||||
</section>
|
||||
<script src="h5utils.js"></script>
|
||||
<script>
|
||||
|
||||
buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });
|
||||
|
|
@ -157,14 +94,3 @@ function buildSpinner(data) {
|
|||
|
||||
|
||||
</script>
|
||||
<script>
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script>
|
||||
try {
|
||||
var pageTracker = _gat._getTracker("UA-1656750-18");
|
||||
pageTracker._trackPageview();
|
||||
} catch(err) {}</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<title>Online connectivity monitoring</title>
|
||||
<article>
|
||||
<p>Current network status: <span id="status">checking...</span></p>
|
||||
</article>
|
||||
<script>
|
||||
function online() {
|
||||
var status = document.querySelector('#status');
|
||||
if (status) {
|
||||
status.className = navigator.onLine ? 'online' : 'offline';
|
||||
status.innerHTML = navigator.onLine ? 'online' : 'offline';
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', online, true);
|
||||
window.addEventListener('online', online, true);
|
||||
window.addEventListener('offline', online, true);
|
||||
|
||||
</script>
|
||||
|
|
@ -1,79 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" manifest="html5demo.manifest">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<meta name="viewport" content="width=620" />
|
||||
<title>HTML5 Demo: offline app (v15)</title>
|
||||
<style>
|
||||
body {
|
||||
font: normal 16px/20px Helvetica, sans-serif;
|
||||
background: rgb(237, 237, 236);
|
||||
margin: 0;
|
||||
margin-top: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
section, header, footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #fff url(images/shade.jpg) repeat-x center bottom;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
border-top: 1px solid #fff;
|
||||
padding-bottom: 76px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 100%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
header,
|
||||
article > p,
|
||||
article > h3,
|
||||
article > code,
|
||||
footer a,
|
||||
footer p {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
footer > * {
|
||||
margin: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#status {
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
#status.fail {
|
||||
background: #c00;
|
||||
}
|
||||
|
||||
#status.success {
|
||||
background: #0c0;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<script src="h5utils-offline.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<section id="wrapper">
|
||||
<header>
|
||||
<h1>Offline Application: using manifest</h1>
|
||||
</header>
|
||||
<title>Offline Application: using manifest</title>
|
||||
<script src="/js/h5utils-offline.js"></script>
|
||||
<article>
|
||||
<p>A good working example is to load this demo up, then disconnection your web connection - the page will still reload. In addition, try this on an iPhone, then set your iPhone to flight mode, and refresh: the page loads.</p>
|
||||
<p>Status of cache: </p>
|
||||
|
|
@ -81,8 +8,6 @@ footer > * {
|
|||
<p><input type="button" id="update" value="Update cache status" /></p>
|
||||
<p><input type="button" id="swap" value="Update cache to latest" /></p>
|
||||
</article>
|
||||
<footer><a href="/">HTML5 demo</a></footer>
|
||||
</section>
|
||||
<script>
|
||||
|
||||
var cacheStates = ["UNCACHED (numeric value 0) -- The ApplicationCache object's cache host is not associated with an application cache at this time.",
|
||||
|
|
@ -112,14 +37,3 @@ while (i--) {
|
|||
}
|
||||
|
||||
</script>
|
||||
<script>
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script>
|
||||
try {
|
||||
var pageTracker = _gat._getTracker("UA-1656750-18");
|
||||
pageTracker._trackPageview();
|
||||
} catch(err) {}</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<title>postMessage (same domain)</title>
|
||||
<style>
|
||||
iframe {
|
||||
width: 100%;
|
||||
border: 2px solid #ccc;
|
||||
}
|
||||
</style>
|
||||
<article>
|
||||
<form>
|
||||
<p><label for="message">Message</label> <input type="text" name="message" value="my message" id="message" /> <input type="submit" />
|
||||
</p>
|
||||
<h2>Target iframe:</h2>
|
||||
<iframe id="iframe" src="postmessage-target.html"></iframe>
|
||||
</form>
|
||||
</article>
|
||||
<script>
|
||||
var win = document.getElementById("iframe").contentWindow;
|
||||
|
||||
addEvent(document.getElementsByTagName('form')[0], 'submit', function (e) {
|
||||
if (e.preventDefault)
|
||||
e.preventDefault();
|
||||
|
||||
win.postMessage(
|
||||
document.getElementById("message").value,
|
||||
"http://html5demos.com"
|
||||
);
|
||||
|
||||
// otherwise set the returnValue property of the original event to false (IE)
|
||||
e.returnValue = false;
|
||||
return false;
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<title>postMessage (cross domain)</title>
|
||||
<style>
|
||||
iframe {
|
||||
width: 100%;
|
||||
border: 2px solid #ccc;
|
||||
}
|
||||
</style>
|
||||
<article>
|
||||
<form>
|
||||
<p><label for="message">Message</label><input type="text" name="message" value="my message" id="message" /> <input type="submit" />
|
||||
</p>
|
||||
<h2>Target iframe:</h2>
|
||||
<iframe id="iframe" src="http://jsbin.com/uderi"></iframe>
|
||||
</form>
|
||||
</article>
|
||||
<script>
|
||||
var win = document.getElementById("iframe").contentWindow;
|
||||
|
||||
addEvent(document.querySelector('form'), 'submit', function (e) {
|
||||
win.postMessage(
|
||||
document.getElementById("message").value,
|
||||
"http://jsbin.com"
|
||||
);
|
||||
|
||||
if (e.preventDefault)
|
||||
e.preventDefault();
|
||||
// otherwise set the returnValue property of the original event to false (IE)
|
||||
e.returnValue = false;
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<title>Storage</title>
|
||||
<style>
|
||||
article div {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
label {
|
||||
float: left;
|
||||
display: block;
|
||||
width: 125px;
|
||||
line-height: 32px;
|
||||
}
|
||||
</style>
|
||||
<article>
|
||||
<section>
|
||||
<p>Values are stored on <code>keyup</code></p>
|
||||
<p>Content loaded from previous sessions:</p>
|
||||
<ul id="previous"></ul>
|
||||
</section>
|
||||
<section>
|
||||
<div>
|
||||
<label for="session">sessionStorage:</label>
|
||||
<input type="text" name="session" value="" id="session" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="local">localStorage:</label>
|
||||
<input type="text" name="local" value="" id="local" />
|
||||
</div>
|
||||
<input type="button" id="clear" value="Clear storage" />
|
||||
</section>
|
||||
</article>
|
||||
<script>
|
||||
|
||||
function getStorage(type) {
|
||||
var storage = window[type + 'Storage'],
|
||||
delta = 0,
|
||||
li = document.createElement('li');
|
||||
|
||||
if (!window[type + 'Storage']) return;
|
||||
|
||||
if (storage.getItem('value')) {
|
||||
delta = ((new Date()).getTime() - (new Date()).setTime(storage.getItem('timestamp'))) / 1000;
|
||||
|
||||
li.innerHTML = type + 'Storage: ' + storage.getItem('value') + ' (last updated: ' + delta + 's ago)';
|
||||
} else {
|
||||
li.innerHTML = type + 'Storage is empty';
|
||||
}
|
||||
|
||||
document.querySelector('#previous').appendChild(li);
|
||||
}
|
||||
|
||||
getStorage('session');
|
||||
getStorage('local');
|
||||
|
||||
addEvent(document.querySelector('#session'), 'keyup', function () {
|
||||
sessionStorage.setItem('value', this.value);
|
||||
sessionStorage.setItem('timestamp', (new Date()).getTime());
|
||||
});
|
||||
|
||||
addEvent(document.querySelector('#local'), 'keyup', function () {
|
||||
localStorage.setItem('value', this.value);
|
||||
localStorage.setItem('timestamp', (new Date()).getTime());
|
||||
});
|
||||
|
||||
addEvent(document.querySelector('#clear'), 'click', function () {
|
||||
sessionStorage.clear();
|
||||
localStorage.clear();
|
||||
|
||||
document.querySelector('#previous').innerHTML = '';
|
||||
getStorage('local');
|
||||
getStorage('session');
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<title>Video</title>
|
||||
<article>
|
||||
<video>
|
||||
<source src="dizzy.mp4" />
|
||||
<source src="dizzy.ogv" />
|
||||
</video>
|
||||
<p id="controls">
|
||||
<input type="button" id="play" value="play">
|
||||
<span id="position">00:00</span> / <span id="duration">loading...</span>
|
||||
</p>
|
||||
<p>Note that (at time of writing) <a href="http://webkit.org/" title="The WebKit Open Source Project">Webkit nightly</a> supports full screen mode, which will add a button above.</p>
|
||||
</article>
|
||||
<script>
|
||||
var video = document.querySelector('video'),
|
||||
togglePlay = document.querySelector('#play'),
|
||||
position = document.querySelector('#position'),
|
||||
ready = false,
|
||||
controls = document.querySelector('#controls'),
|
||||
fullscreen = null;
|
||||
|
||||
addEvent(togglePlay, 'click', function () {
|
||||
if (ready) {
|
||||
video.playbackRate = 0.5;
|
||||
if (video.paused) {
|
||||
if (video.ended) video.currentTime = 0;
|
||||
video.play();
|
||||
this.value = "pause";
|
||||
} else {
|
||||
video.pause();
|
||||
this.value = "play";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
addEvent(video, 'timeupdate', function () {
|
||||
position.innerHTML = asTime(this.currentTime);
|
||||
});
|
||||
|
||||
addEvent(video, 'ended', function () {
|
||||
togglePlay.value = "play";
|
||||
});
|
||||
|
||||
addEvent(video, 'canplay', function () {
|
||||
video.muted = true;
|
||||
ready = true;
|
||||
document.querySelector('#duration').innerHTML = asTime(this.duration);
|
||||
|
||||
// note: .webkitSupportsFullscreen is false while the video is loading, so we bind in to the canplay event
|
||||
if (video.webkitSupportsFullscreen) {
|
||||
fullscreen = document.createElement('input');
|
||||
fullscreen.setAttribute('type', 'button');
|
||||
fullscreen.setAttribute('value', 'fullscreen');
|
||||
controls.insertBefore(fullscreen, controls.firstChild);
|
||||
addEvent(fullscreen, 'click', function () {
|
||||
video.webkitEnterFullScreen();
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function asTime(t) {
|
||||
t = Math.round(t);
|
||||
var s = t % 60;
|
||||
var m = Math.round(t / 60);
|
||||
|
||||
return two(m) + ':' + two(s);
|
||||
}
|
||||
|
||||
function two(s) {
|
||||
s += "";
|
||||
if (s.length < 2) s = "0" + s;
|
||||
return s;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,78 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta charset=utf-8 />
|
||||
<title>HTML5 Demo: Worker</title>
|
||||
<style>
|
||||
body {
|
||||
font: normal 16px/20px Helvetica, sans-serif;
|
||||
background: rgb(237, 237, 236);
|
||||
margin: 0;
|
||||
margin-top: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
article, section, header, footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #fff url(images/shade.jpg) repeat-x center bottom;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
border-top: 1px solid #fff;
|
||||
padding-bottom: 76px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 100%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
header,
|
||||
article > *,
|
||||
footer a,
|
||||
footer p {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
footer > * {
|
||||
margin: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
article {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section id="wrapper">
|
||||
<header>
|
||||
<h1>Worker</h1>
|
||||
</header>
|
||||
<title>Worker</title>
|
||||
<article>
|
||||
<p>Canvas is running whilst an prime number finder runs in a worker</p>
|
||||
<p>Prime found: <span id="status">0</span></p>
|
||||
<div><input type="button" value="start worker" id="toggleWorker" /></div>
|
||||
</article>
|
||||
<footer><a href="/">HTML5 demo</a></footer>
|
||||
</section>
|
||||
<script src="h5utils.js"></script>
|
||||
<script>
|
||||
|
||||
buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });
|
||||
|
||||
var w = new Worker('cruncher.js');
|
||||
var w = new Worker('/js/cruncher.js');
|
||||
|
||||
addEvent(document.getElementById('toggleWorker'), 'click', function () {
|
||||
w.postMessage('');
|
||||
|
|
@ -143,17 +79,4 @@ function buildSpinner(data) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<script>
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script>
|
||||
try {
|
||||
var pageTracker = _gat._getTracker("UA-1656750-18");
|
||||
pageTracker._trackPageview();
|
||||
} catch(err) {}</script>
|
||||
</body>
|
||||
</html>
|
||||
25
drag.html
25
drag.html
|
|
@ -1,8 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
|
||||
<title>HTML5 Drag and drop demonstration</title>
|
||||
<meta charset=UTF-8 />
|
||||
<title>Drag and drop</title>
|
||||
<style type="text/css">
|
||||
* {
|
||||
margin: 0;
|
||||
|
|
@ -73,6 +73,7 @@ li.over {
|
|||
}
|
||||
|
||||
</style>
|
||||
<script src="/js/h5utils.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="bin"></div>
|
||||
|
|
@ -152,14 +153,14 @@ li.over {
|
|||
});
|
||||
|
||||
</script>
|
||||
<script>
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script>
|
||||
try {
|
||||
var pageTracker = _gat._getTracker("UA-1656750-18");
|
||||
pageTracker._trackPageview();
|
||||
} catch(err) {}</script>
|
||||
<script>
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script>
|
||||
try {
|
||||
var pageTracker = _gat._getTracker("UA-1656750-18");
|
||||
pageTracker._trackPageview();
|
||||
} catch(err) {}</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
142
geo.html
142
geo.html
|
|
@ -1,142 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<meta name="viewport" content="width=620" />
|
||||
<title>HTML5 Demo: geolocation</title>
|
||||
<style>
|
||||
body {
|
||||
font: normal 16px/20px Helvetica, sans-serif;
|
||||
background: rgb(237, 237, 236);
|
||||
margin: 0;
|
||||
margin-top: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
section, header, footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #fff url(images/shade.jpg) repeat-x center bottom;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
border-top: 1px solid #fff;
|
||||
padding-bottom: 76px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 100%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
header,
|
||||
article > *,
|
||||
footer > * {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
footer > * {
|
||||
margin: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#status {
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
#status.fail {
|
||||
background: #c00;
|
||||
}
|
||||
|
||||
#status.success {
|
||||
background: #0c0;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<script src="h5utils.js"></script>
|
||||
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
|
||||
</head>
|
||||
<body>
|
||||
<section id="wrapper">
|
||||
<header>
|
||||
<h1>Geolocation</h1>
|
||||
</header>
|
||||
<article>
|
||||
<p>Finding your location: <span id="status">checking...</span></p>
|
||||
</article>
|
||||
<footer><a href="/">HTML5 demo</a></footer>
|
||||
</section>
|
||||
<script>
|
||||
function success(position) {
|
||||
var s = document.querySelector('#status');
|
||||
|
||||
if (s.className == 'success') {
|
||||
// not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back
|
||||
return;
|
||||
}
|
||||
|
||||
s.innerHTML = "found you!";
|
||||
s.className = 'success';
|
||||
|
||||
var mapcanvas = document.createElement('div');
|
||||
mapcanvas.id = 'mapcanvas';
|
||||
mapcanvas.style.height = '400px';
|
||||
mapcanvas.style.width = '100%';
|
||||
|
||||
document.querySelector('article').appendChild(mapcanvas);
|
||||
|
||||
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
|
||||
var myOptions = {
|
||||
zoom: 15,
|
||||
center: latlng,
|
||||
mapTypeControl: false,
|
||||
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||||
};
|
||||
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
|
||||
|
||||
var marker = new google.maps.Marker({
|
||||
position: latlng,
|
||||
map: map,
|
||||
title:"You are here!"
|
||||
});
|
||||
}
|
||||
|
||||
function error(msg) {
|
||||
var s = document.querySelector('#status');
|
||||
s.innerHTML = typeof msg == 'string' ? msg : "failed";
|
||||
s.className = 'fail';
|
||||
|
||||
// console.log(arguments);
|
||||
}
|
||||
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(success, error);
|
||||
} else {
|
||||
error('not supported');
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<script>
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script>
|
||||
try {
|
||||
var pageTracker = _gat._getTracker("UA-1656750-18");
|
||||
pageTracker._trackPageview();
|
||||
} catch(err) {}</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,4 +5,4 @@ CACHE MANIFEST
|
|||
CACHE:
|
||||
images/shade.jpg
|
||||
images/bin.jpg
|
||||
h5utils-offline.js
|
||||
/js/h5utils-offline.js
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a></footer>
|
||||
</section>
|
||||
<a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
|
||||
<script>
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script>
|
||||
try {
|
||||
var pageTracker = _gat._getTracker("UA-1656750-18");
|
||||
pageTracker._trackPageview();
|
||||
} catch(err) {}</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en"<?=$manifest?>>
|
||||
<head>
|
||||
<meta charset=utf-8 />
|
||||
<title>HTML5 Demo: <?=$title?></title>
|
||||
<link rel="stylesheet" href="/css/html5demos.css" type="text/css" />
|
||||
<?php if (!$manifest) : ?><script src="/js/h5utils.js"></script><?php endif ?>
|
||||
</head>
|
||||
<body>
|
||||
<section id="wrapper">
|
||||
<header>
|
||||
<h1><?=$title?></h1>
|
||||
</header>
|
||||
120
index.html
120
index.html
|
|
@ -3,124 +3,8 @@
|
|||
<head>
|
||||
<meta charset=utf-8 />
|
||||
<meta name="viewport" content="width=620" />
|
||||
<title>HTML 5 Demos and Examples</title>
|
||||
<style>
|
||||
body {
|
||||
font: normal 16px/20px Helvetica, sans-serif;
|
||||
background: rgb(237, 237, 236);
|
||||
margin: 0;
|
||||
margin-top: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
section, header, footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #fff url(images/shade.jpg) repeat-x center bottom;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
border-top: 1px solid #fff;
|
||||
padding-bottom: 76px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 100%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
header,
|
||||
article > *,
|
||||
footer > * {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
footer > * {
|
||||
margin: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#status {
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
#status.fail {
|
||||
background: #c00;
|
||||
}
|
||||
|
||||
#status.success {
|
||||
background: #0c0;
|
||||
}
|
||||
|
||||
footer #built:hover:after {
|
||||
content: '...quickly';
|
||||
}
|
||||
|
||||
abbr {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted #ccc;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#ffad {
|
||||
font-size: 90%;
|
||||
border: 1px solid #ccc;
|
||||
background: #fcfcfc;
|
||||
display: block;
|
||||
-moz-border-radius-topleft: 25px;
|
||||
-webkit-border-top-left-radius: 25px;
|
||||
-moz-border-radius-bottomright: 25px;
|
||||
-webkit-border-bottom-right-radius: 25px;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#ffad:hover {
|
||||
border-color: #919191;
|
||||
}
|
||||
|
||||
#ffad section {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#ffad p {
|
||||
margin: 10px 10px 10px 100px;
|
||||
}
|
||||
|
||||
#ffad img {
|
||||
border: 0;
|
||||
float: left;
|
||||
display: block;
|
||||
margin: 14px 14px 0;
|
||||
}
|
||||
|
||||
#ffad .definition {
|
||||
font-style: italic;
|
||||
font-family: Georgia,Palatino,Palatino Linotype,Times,Times New Roman,serif;
|
||||
}
|
||||
|
||||
#ffad .url {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script src="h5utils.js"></script>
|
||||
<title>HTML5 Demos and Examples</title>
|
||||
<link rel="stylesheet" href="/css/html5demos.css" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<section id="wrapper">
|
||||
|
|
|
|||
107
offline.html
107
offline.html
|
|
@ -1,107 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<title>HTML5 Demo: online connectivity monitoring</title>
|
||||
<style>
|
||||
body {
|
||||
font: normal 16px/20px Helvetica, sans-serif;
|
||||
background: rgb(237, 237, 236);
|
||||
margin: 0;
|
||||
margin-top: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
section, header, footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #fff url(images/shade.jpg) repeat-x center bottom;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
border-top: 1px solid #fff;
|
||||
padding-bottom: 76px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 100%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
header,
|
||||
article > p,
|
||||
article > h3,
|
||||
article > code,
|
||||
footer a,
|
||||
footer p {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
footer > * {
|
||||
margin: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#status {
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
#status.offline {
|
||||
background: #c00;
|
||||
}
|
||||
|
||||
#status.online {
|
||||
background: #0c0;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script>
|
||||
// For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
|
||||
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while (i--){document.createElement(e[i])}})()
|
||||
</script>
|
||||
<script>
|
||||
function online() {
|
||||
var status = document.querySelector('#status');
|
||||
if (status) {
|
||||
status.className = navigator.onLine ? 'online' : 'offline';
|
||||
status.innerHTML = navigator.onLine ? 'online' : 'offline';
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', online, true);
|
||||
window.addEventListener('online', online, true);
|
||||
window.addEventListener('offline', online, true);
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<section id="wrapper">
|
||||
<header>
|
||||
<h1>Connectivity Monitoring</h1>
|
||||
</header>
|
||||
<article>
|
||||
<p>Current network status: <span id="status">checking...</span></p>
|
||||
</article>
|
||||
<footer><a href="/">HTML5 demo</a></footer>
|
||||
</section>
|
||||
<script>
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script>
|
||||
try {
|
||||
var pageTracker = _gat._getTracker("UA-1656750-18");
|
||||
pageTracker._trackPageview();
|
||||
} catch(err) {}</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<?php
|
||||
$request = preg_replace('/[^0-9a-z-_]/', '', preg_replace('/^\//', '', preg_replace('/\/$/', '', preg_replace('/\?.*$/', '', $_SERVER['REQUEST_URI']))));
|
||||
if (file_exists('demos/' . $request . '.html')) {
|
||||
$file = file_get_contents('demos/' . $request . '.html');
|
||||
preg_match('/<title>(.*)<\/title>/', $file, $matches);
|
||||
$file = preg_replace('/<title>(.*?)<\/title>/', '', $file);
|
||||
$title = $matches[1];
|
||||
|
||||
$manifest = '';
|
||||
if ($request == 'offlineapp') { // specific change to support <html manifest=xyz>
|
||||
$manifest = ' manifest="html5demo.manifest"';
|
||||
}
|
||||
|
||||
include('includes/header.php');
|
||||
echo $file;
|
||||
include('includes/footer.php');
|
||||
} else {
|
||||
header("HTTP/1.0 404 Not Found");
|
||||
echo 'File not found';
|
||||
}
|
||||
|
||||
?>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>.postMessage target</title>
|
||||
<title>postMessage target</title>
|
||||
<style>
|
||||
body {
|
||||
font: normal 16px/20px Helvetica, sans-serif;
|
||||
|
|
@ -13,7 +13,7 @@ body {
|
|||
<body>
|
||||
<strong>This iframe is located on the same domain</strong>
|
||||
<p id="test">Send me a message!</p>
|
||||
<script src="/h5utils.js"></script>
|
||||
<script src="/js/h5utils.js"></script>
|
||||
<script>
|
||||
addEvent(window, "message", function(e){
|
||||
if ( e.origin !== "http://html5demos.com" ) {
|
||||
|
|
|
|||
118
postmessage.html
118
postmessage.html
|
|
@ -1,118 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<title>HTML5 Demo: postMessage (same domain)</title>
|
||||
<style>
|
||||
body {
|
||||
font: normal 16px/20px Helvetica, sans-serif;
|
||||
background: rgb(237, 237, 236);
|
||||
margin: 0;
|
||||
margin-top: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
font: normal 16px/20px Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
section, header, footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #fff url(images/shade.jpg) repeat-x center bottom;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
border-top: 1px solid #fff;
|
||||
padding-bottom: 76px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 100%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
header,
|
||||
article > *,
|
||||
footer > * {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
footer > * {
|
||||
margin: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#status {
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
#status.offline {
|
||||
background: #c00;
|
||||
}
|
||||
|
||||
#status.online {
|
||||
background: #0c0;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
border: 2px solid #ccc;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script src="h5utils.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<section id="wrapper">
|
||||
<header>
|
||||
<h1>Same Domain postMessage</h1>
|
||||
</header>
|
||||
<article>
|
||||
<form>
|
||||
<p><label for="message">Message</label> <input type="text" name="message" value="my message" id="message" /> <input type="submit" />
|
||||
</p>
|
||||
<h2>Target iframe:</h2>
|
||||
<iframe id="iframe" src="postmessage-target.html"></iframe>
|
||||
</form>
|
||||
</article>
|
||||
<footer><a href="/">HTML5 demo</a></footer>
|
||||
</section>
|
||||
<script>
|
||||
var win = document.getElementById("iframe").contentWindow;
|
||||
|
||||
addEvent(document.getElementsByTagName('form')[0], 'submit', function (e) {
|
||||
if (e.preventDefault)
|
||||
e.preventDefault();
|
||||
|
||||
win.postMessage(
|
||||
document.getElementById("message").value,
|
||||
"http://html5demos.com"
|
||||
);
|
||||
|
||||
// otherwise set the returnValue property of the original event to false (IE)
|
||||
e.returnValue = false;
|
||||
return false;
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script>
|
||||
try {
|
||||
var pageTracker = _gat._getTracker("UA-1656750-18");
|
||||
pageTracker._trackPageview();
|
||||
} catch(err) {}</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<title>HTML5 Demo: postMessage (cross domain)</title>
|
||||
<style>
|
||||
body {
|
||||
font: normal 16px/20px Helvetica, sans-serif;
|
||||
background: rgb(237, 237, 236);
|
||||
margin: 0;
|
||||
margin-top: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
font: normal 16px/20px Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
section, header, footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #fff url(images/shade.jpg) repeat-x center bottom;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
border-top: 1px solid #fff;
|
||||
padding-bottom: 76px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 100%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
header,
|
||||
article > *,
|
||||
footer > * {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
footer > * {
|
||||
margin: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#status {
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
#status.offline {
|
||||
background: #c00;
|
||||
}
|
||||
|
||||
#status.online {
|
||||
background: #0c0;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
border: 2px solid #ccc;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script src="h5utils.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<section id="wrapper">
|
||||
<header>
|
||||
<h1>Cross Domain postMessage</h1>
|
||||
</header>
|
||||
<article>
|
||||
<form>
|
||||
<p><label for="message">Message</label><input type="text" name="message" value="my message" id="message" /> <input type="submit" />
|
||||
</p>
|
||||
<h2>Target iframe:</h2>
|
||||
<iframe id="iframe" src="http://jsbin.com/uderi"></iframe>
|
||||
</form>
|
||||
</article>
|
||||
<footer><a href="/">HTML5 demo</a></footer>
|
||||
</section>
|
||||
<script>
|
||||
var win = document.getElementById("iframe").contentWindow;
|
||||
|
||||
addEvent(document.querySelector('form'), 'submit', function (e) {
|
||||
win.postMessage(
|
||||
document.getElementById("message").value,
|
||||
"http://jsbin.com"
|
||||
);
|
||||
|
||||
if (e.preventDefault)
|
||||
e.preventDefault();
|
||||
// otherwise set the returnValue property of the original event to false (IE)
|
||||
e.returnValue = false;
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script>
|
||||
try {
|
||||
var pageTracker = _gat._getTracker("UA-1656750-18");
|
||||
pageTracker._trackPageview();
|
||||
} catch(err) {}</script>
|
||||
</body>
|
||||
</html>
|
||||
148
storage.html
148
storage.html
|
|
@ -1,148 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<title>HTML5 Demo: storage</title>
|
||||
<style>
|
||||
body {
|
||||
font: normal 16px/20px Helvetica, sans-serif;
|
||||
background: rgb(237, 237, 236);
|
||||
margin: 0;
|
||||
margin-top: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
section, header, footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #fff url(images/shade.jpg) repeat-x center bottom;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
border-top: 1px solid #fff;
|
||||
padding-bottom: 76px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 100%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
header,
|
||||
article > *,
|
||||
footer > * {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
padding: 3px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
footer > * {
|
||||
margin: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
article div {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
label {
|
||||
float: left;
|
||||
display: block;
|
||||
width: 125px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script src="h5utils.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<section id="wrapper">
|
||||
<header>
|
||||
<h1>Storage</h1>
|
||||
</header>
|
||||
<article>
|
||||
<section>
|
||||
<p>Values are stored on <code>keyup</code></p>
|
||||
<p>Content loaded from previous sessions:</p>
|
||||
<ul id="previous"></ul>
|
||||
</section>
|
||||
<section>
|
||||
<div>
|
||||
<label for="session">sessionStorage:</label>
|
||||
<input type="text" name="session" value="" id="session" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="local">localStorage:</label>
|
||||
<input type="text" name="local" value="" id="local" />
|
||||
</div>
|
||||
<input type="button" id="clear" value="Clear storage" />
|
||||
</section>
|
||||
</article>
|
||||
<footer><a href="/">HTML5 demo</a></footer>
|
||||
</section>
|
||||
<script>
|
||||
|
||||
function getStorage(type) {
|
||||
var storage = window[type + 'Storage'],
|
||||
delta = 0,
|
||||
li = document.createElement('li');
|
||||
|
||||
if (!window[type + 'Storage']) return;
|
||||
|
||||
if (storage.getItem('value')) {
|
||||
delta = ((new Date()).getTime() - (new Date()).setTime(storage.getItem('timestamp'))) / 1000;
|
||||
|
||||
li.innerHTML = type + 'Storage: ' + storage.getItem('value') + ' (last updated: ' + delta + 's ago)';
|
||||
} else {
|
||||
li.innerHTML = type + 'Storage is empty';
|
||||
}
|
||||
|
||||
document.querySelector('#previous').appendChild(li);
|
||||
}
|
||||
|
||||
getStorage('session');
|
||||
getStorage('local');
|
||||
|
||||
addEvent(document.querySelector('#session'), 'keyup', function () {
|
||||
sessionStorage.setItem('value', this.value);
|
||||
sessionStorage.setItem('timestamp', (new Date()).getTime());
|
||||
});
|
||||
|
||||
addEvent(document.querySelector('#local'), 'keyup', function () {
|
||||
localStorage.setItem('value', this.value);
|
||||
localStorage.setItem('timestamp', (new Date()).getTime());
|
||||
});
|
||||
|
||||
addEvent(document.querySelector('#clear'), 'click', function () {
|
||||
sessionStorage.clear();
|
||||
localStorage.clear();
|
||||
|
||||
document.querySelector('#previous').innerHTML = '';
|
||||
getStorage('local');
|
||||
getStorage('session');
|
||||
});
|
||||
|
||||
</script>
|
||||
<script>
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script>
|
||||
try {
|
||||
var pageTracker = _gat._getTracker("UA-1656750-18");
|
||||
pageTracker._trackPageview();
|
||||
} catch(err) {}</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -20,7 +20,7 @@ p { margin-top: 20px;}
|
|||
<input type="button" id="play" value="play">
|
||||
<span id="position">00:00</span> / <span id="duration"></span>
|
||||
</p>
|
||||
<script src="h5utils.js"></script>
|
||||
<script src="/js/h5utils.js"></script>
|
||||
<script>
|
||||
var video = document.querySelector('video');
|
||||
var togglePlay = document.querySelector('#play');
|
||||
|
|
|
|||
149
video.html
149
video.html
|
|
@ -1,149 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta charset=utf-8 />
|
||||
<title>HTML5 Demo: video</title>
|
||||
<style>
|
||||
body {
|
||||
font: normal 16px/20px Helvetica, sans-serif;
|
||||
background: rgb(237, 237, 236);
|
||||
margin: 0;
|
||||
margin-top: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
article, section, header, footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
background: #fff url(images/shade.jpg) repeat-x center bottom;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
border-top: 1px solid #fff;
|
||||
padding-bottom: 76px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 100%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
header,
|
||||
article > *,
|
||||
footer a,
|
||||
footer p {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
footer > * {
|
||||
margin: 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
article {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section id="wrapper">
|
||||
<header>
|
||||
<h1>Video</h1>
|
||||
</header>
|
||||
<article>
|
||||
<video>
|
||||
<source src="dizzy.mp4" />
|
||||
<source src="dizzy.ogv" />
|
||||
</video>
|
||||
<p id="controls">
|
||||
<input type="button" id="play" value="play">
|
||||
<span id="position">00:00</span> / <span id="duration">loading...</span>
|
||||
</p>
|
||||
<p>Note that (at time of writing) <a href="http://webkit.org/" title="The WebKit Open Source Project">Webkit nightly</a> supports full screen mode, which will add a button above.</p>
|
||||
</article>
|
||||
<footer><a href="/">HTML5 demo</a></footer>
|
||||
</section>
|
||||
<script src="h5utils.js"></script>
|
||||
<script>
|
||||
var video = document.querySelector('video'),
|
||||
togglePlay = document.querySelector('#play'),
|
||||
position = document.querySelector('#position'),
|
||||
ready = false,
|
||||
controls = document.querySelector('#controls'),
|
||||
fullscreen = null;
|
||||
|
||||
addEvent(togglePlay, 'click', function () {
|
||||
if (ready) {
|
||||
video.playbackRate = 0.5;
|
||||
if (video.paused) {
|
||||
if (video.ended) video.currentTime = 0;
|
||||
video.play();
|
||||
this.value = "pause";
|
||||
} else {
|
||||
video.pause();
|
||||
this.value = "play";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
addEvent(video, 'timeupdate', function () {
|
||||
position.innerHTML = asTime(this.currentTime);
|
||||
});
|
||||
|
||||
addEvent(video, 'ended', function () {
|
||||
togglePlay.value = "play";
|
||||
});
|
||||
|
||||
addEvent(video, 'canplay', function () {
|
||||
video.muted = true;
|
||||
ready = true;
|
||||
document.querySelector('#duration').innerHTML = asTime(this.duration);
|
||||
|
||||
// note: .webkitSupportsFullscreen is false while the video is loading, so we bind in to the canplay event
|
||||
if (video.webkitSupportsFullscreen) {
|
||||
fullscreen = document.createElement('input');
|
||||
fullscreen.setAttribute('type', 'button');
|
||||
fullscreen.setAttribute('value', 'fullscreen');
|
||||
controls.insertBefore(fullscreen, controls.firstChild);
|
||||
addEvent(fullscreen, 'click', function () {
|
||||
video.webkitEnterFullScreen();
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function asTime(t) {
|
||||
t = Math.round(t);
|
||||
var s = t % 60;
|
||||
var m = Math.round(t / 60);
|
||||
|
||||
return two(m) + ':' + two(s);
|
||||
}
|
||||
|
||||
function two(s) {
|
||||
s += "";
|
||||
if (s.length < 2) s = "0" + s;
|
||||
return s;
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
|
||||
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
|
||||
</script>
|
||||
<script>
|
||||
try {
|
||||
var pageTracker = _gat._getTracker("UA-1656750-18");
|
||||
pageTracker._trackPageview();
|
||||
} catch(err) {}</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue