Loading existing examples from html5demos.com
This commit is contained in:
Remy Sharp
parent
f41d8e9503
commit
ed0bded6fb
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset=utf-8 />
|
||||
<title>Canvas Gradient</title>
|
||||
<style>
|
||||
body {
|
||||
background: #000;
|
||||
}
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas height="600" width="600"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementsByTagName('canvas')[0],
|
||||
ctx = null,
|
||||
grad = null,
|
||||
body = document.getElementsByTagName('body')[0],
|
||||
color = 255;
|
||||
|
||||
if (canvas.getContext('2d')) {
|
||||
ctx = canvas.getContext('2d');
|
||||
ctx.clearRect(0, 0, 600, 600);
|
||||
ctx.save();
|
||||
// Create radial gradient
|
||||
grad = ctx.createRadialGradient(0,0,0,0,0,600);
|
||||
grad.addColorStop(0, '#000');
|
||||
grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
|
||||
|
||||
// assign gradients to fill
|
||||
ctx.fillStyle = grad;
|
||||
|
||||
// draw 600x600 fill
|
||||
ctx.fillRect(0,0,600,600);
|
||||
ctx.save();
|
||||
|
||||
body.onmousemove = function (event) {
|
||||
var width = window.innerWidth,
|
||||
height = window.innerHeight,
|
||||
x = event.clientX,
|
||||
y = event.clientY,
|
||||
rx = 600 * x / width,
|
||||
ry = 600 * y / width;
|
||||
|
||||
var xc = ~~(256 * x / width);
|
||||
var yc = ~~(256 * y / height);
|
||||
|
||||
grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600);
|
||||
grad.addColorStop(0, '#000');
|
||||
grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
|
||||
// ctx.restore();
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fillRect(0,0,600,600);
|
||||
// ctx.save();
|
||||
};
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<!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-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>
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<!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-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,24 @@
|
|||
var running = false;
|
||||
|
||||
onmessage = function (event) {
|
||||
// doesn't matter what the message is, just toggle the worker
|
||||
if (running == false) {
|
||||
running = true;
|
||||
run();
|
||||
} else {
|
||||
running = false;
|
||||
}
|
||||
};
|
||||
|
||||
function run() {
|
||||
var n = 1;
|
||||
search: while (running) {
|
||||
n += 1;
|
||||
for (var i = 2; i <= Math.sqrt(n); i += 1)
|
||||
if (n % i == 0)
|
||||
continue search;
|
||||
// found a prime!
|
||||
postMessage(n);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
<!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-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,194 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset=utf-8 />
|
||||
<title>HTML5 Demo: 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-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 {
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
/* for safari */
|
||||
*[draggable=true] {
|
||||
-khtml-user-drag: element;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
#drop {
|
||||
border: 3px dashed #ccc;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
min-height: 200px;
|
||||
/* overflow-y: auto;*/
|
||||
}
|
||||
|
||||
#drop .info {
|
||||
color: #999;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#drop ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#drop li {
|
||||
border-top: 2px solid #ccc;
|
||||
list-style: none;
|
||||
padding: 5px;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
#drop li:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
</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>
|
||||
<div>
|
||||
<input type="radio" name="getDataType" value="text" id="text" checked="checked" /> <label for="text">getData('Text')</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="getDataType" value="type" id="type" /> <label for="type">getData(e.dataTransfer.types[0]) based on detected content type</label>
|
||||
</div>
|
||||
</section>
|
||||
<section id="drag">
|
||||
<p><img class="photo" src="http://twivatar.org/rem" alt="Remy Sharp" style="float: left; margin: 3px 10px 10px 0;" /> My name is <a class="fn n url" rel="me" href="http://remysharp.com">Remy Sharp</a> (<a href="http://twitter.com/rem">@rem on Twitter</a> and <a href="http://remysharp.com">my blog</a>). <span class="adr">I run a small <abbr class="type" title="Work">business</abbr> in <a href="http://www.flickr.com/places/United+Kingdom/England/Brighton"><span class="region">Brighton</span>, <abbr class="country-name" title="United Kingdom">UK</abbr></a> called <a class="org url" rel="me" href="http://leftlogic.com">Left Logic</a> and am running the <a href="http://full-frontal.org">Full Frontal JavaScript Conference</a> and I specialise in <em>bespoke</em> front-end development & backend.</span></p>
|
||||
</section>
|
||||
<section id="drop">
|
||||
<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) {
|
||||
if (e.preventDefault) e.preventDefault(); // required by FF + Safari
|
||||
return false; // required by IE
|
||||
}
|
||||
|
||||
function entities(s) {
|
||||
var e = {
|
||||
'"' : '"',
|
||||
'&' : '&',
|
||||
'<' : '<',
|
||||
'>' : '>'
|
||||
};
|
||||
return s.replace(/["&<>]/g, function (m) {
|
||||
return e[m];
|
||||
});
|
||||
}
|
||||
|
||||
var getDataType = document.querySelector('#text');
|
||||
var drop = document.querySelector('#drop');
|
||||
|
||||
// Tells the browser that we *can* drop on this target
|
||||
addEvent(drop, 'dragover', cancel);
|
||||
addEvent(drop, 'dragenter', cancel);
|
||||
|
||||
addEvent(drop, 'drop', function (e) {
|
||||
if (e.preventDefault) e.preventDefault(); // stops the browser from redirecting off to the text.
|
||||
|
||||
// just rendering the text in to the list
|
||||
|
||||
// clear out the original text
|
||||
if (drop.innerHTML.match(/Drop here/i)) {
|
||||
drop.innerHTML = '<ul></ul>';
|
||||
}
|
||||
|
||||
var li = document.createElement('li');
|
||||
|
||||
/** THIS IS THE MAGIC: we read from getData based on the content type - so it grabs the item matching that format **/
|
||||
if (getDataType.checked == false && e.dataTransfer.types) {
|
||||
li.innerHTML = entities(e.dataTransfer.getData(e.dataTransfer.types[0]) + ' (content-type: ' + e.dataTransfer.types[0] + ')');
|
||||
} else {
|
||||
// ... however, if we're IE, we don't have the .types property, so we'll just get the Text value
|
||||
li.innerHTML = e.dataTransfer.getData('Text');
|
||||
}
|
||||
|
||||
var ul = drop.querySelector('ul');
|
||||
|
||||
if (ul.firstChild) {
|
||||
ul.insertBefore(li, ul.firstChild);
|
||||
} else {
|
||||
ul.appendChild(li);
|
||||
}
|
||||
|
||||
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>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
|
||||
<title>HTML5 Drag and drop demonstration</title>
|
||||
<style type="text/css">
|
||||
#boxA, #boxB, #boxC {
|
||||
float:left; width:200px; height:200px; padding:10px; margin:10px;
|
||||
}
|
||||
|
||||
#boxA { background-color: blue; }
|
||||
#boxB { background-color: green; }
|
||||
#boxC { background-color: yellow; }
|
||||
|
||||
#drag, #drag2, #drag3 {
|
||||
width:50px; height:50px; padding:5px; margin:5px;
|
||||
-moz-user-select:none;
|
||||
}
|
||||
#drag { background-color: red;}
|
||||
#drag2 { background-color: orange;}
|
||||
#drag3 { background-color: purple; border:3px brown solid;}
|
||||
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function dragStart(ev) {
|
||||
ev.dataTransfer.effectAllowed='move';
|
||||
//ev.dataTransfer.dropEffect='move';
|
||||
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
|
||||
ev.dataTransfer.setDragImage(ev.target,0,0);
|
||||
return true;
|
||||
}
|
||||
|
||||
function dragEnd(ev) {
|
||||
ev.dataTransfer.clearData("Text");
|
||||
return true
|
||||
}
|
||||
|
||||
|
||||
function dragEnter(ev) {
|
||||
var idelt = ev.dataTransfer.getData("Text");
|
||||
return true;
|
||||
}
|
||||
|
||||
function dragOver(ev) {
|
||||
var idelt = ev.dataTransfer.getData("Text");
|
||||
var id = ev.target.getAttribute('id');
|
||||
|
||||
return false;
|
||||
|
||||
if( (id =='boxB' || id =='boxA') && (idelt == 'drag' || idelt=='drag2'))
|
||||
return false;
|
||||
else if( id =='boxC' && idelt == 'drag3')
|
||||
return false;
|
||||
else
|
||||
return true;
|
||||
}
|
||||
|
||||
function dragDrop(ev) {
|
||||
console.log('drop');
|
||||
var idelt = ev.dataTransfer.getData("Text");
|
||||
ev.target.appendChild(document.getElementById(idelt));
|
||||
ev.stopPropagation();
|
||||
return false; // return false so the event will not be propagated to the browser
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Drag and drop demo in a HTML document, using the HTML5 drag and drop API</h1>
|
||||
<div> The red box and the orange box can be dragged and dropped between
|
||||
the blue and the green boxes.
|
||||
The purple box can be dragged and dropped only to the yellow box.
|
||||
</div>
|
||||
|
||||
<div id="boxA"
|
||||
ondragenter="return dragEnter(event)"
|
||||
ondrop="return dragDrop(event)"
|
||||
ondragover="return dragOver(event)">
|
||||
|
||||
<div id="drag" draggable="true"
|
||||
ondragstart="return dragStart(event)"
|
||||
ondragend="return dragEnd(event)">drag me</div>
|
||||
|
||||
<div id="drag2" draggable="true"
|
||||
ondragstart="return dragStart(event)"
|
||||
ondragend="return dragEnd(event)">drag me</div>
|
||||
|
||||
<div id="drag3" draggable="true"
|
||||
ondragstart="return dragStart(event)"
|
||||
ondragend="return dragEnd(event)">drag me</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="boxB"
|
||||
ondragenter="return dragEnter(event)"
|
||||
ondrop="return dragDrop(event)"
|
||||
ondragover="return dragOver(event)">
|
||||
</div>
|
||||
|
||||
<div id="boxC"
|
||||
ondragenter="return dragEnter(event)"
|
||||
ondrop="return dragDrop(event)"
|
||||
ondragover="return dragOver(event)">
|
||||
</div>
|
||||
<div style="clear:both">Example created by <a href="http://ljouanneau.com/blog/">Laurent Jouanneau</a>.</div>
|
||||
<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,165 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
|
||||
<title>HTML5 Drag and drop demonstration</title>
|
||||
<style type="text/css">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 50px;
|
||||
font-family: helvetica, arial;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
margin: 10px;
|
||||
width: 150px;
|
||||
border: 3px dashed #999;
|
||||
background: #eee;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
*[draggable=true] {
|
||||
-moz-user-select:none;
|
||||
-khtml-user-drag: element;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
*:-khtml-drag {
|
||||
background-color: rgba(238,238,238, 0.5);
|
||||
}
|
||||
|
||||
a:hover:after {
|
||||
content: ' (drag me)';
|
||||
}
|
||||
|
||||
li.over {
|
||||
border-color: #333;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
#bin {
|
||||
background: url(images/bin.jpg) top right no-repeat;
|
||||
height: 250px;
|
||||
width: 166px;
|
||||
float: right;
|
||||
border: 5px solid #000;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#bin.over {
|
||||
background: url(images/bin.jpg) top left no-repeat;
|
||||
}
|
||||
|
||||
#bin p {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
width: 166px;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
text-shadow: #000 2px 2px 2px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="bin"></div>
|
||||
<ul>
|
||||
<li><a id="one" href="#">one</a></li>
|
||||
<li><a href="#" id="two">two</a></li>
|
||||
<li><a href="#" id="three">three</a></li>
|
||||
<li><a href="#" id="four">four</a></li>
|
||||
<li><a href="#" id="five">five</a></li>
|
||||
</ul>
|
||||
<script src="h5utils.js"></script>
|
||||
<script>
|
||||
|
||||
var eat = ['yum!', 'gulp', 'burp!', 'nom'];
|
||||
var yum = document.createElement('p');
|
||||
var msie = /*@cc_on!@*/0;
|
||||
yum.style.opacity = 1;
|
||||
|
||||
var links = document.querySelectorAll('li > a'), el = null;
|
||||
for (var i = 0; i < links.length; i++) {
|
||||
el = links[i];
|
||||
|
||||
el.setAttribute('draggable', 'true');
|
||||
|
||||
addEvent(el, 'dragstart', function (e) {
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work
|
||||
});
|
||||
}
|
||||
|
||||
var bin = document.querySelector('#bin');
|
||||
|
||||
addEvent(bin, 'dragover', function (e) {
|
||||
if (e.preventDefault) e.preventDefault(); // allows us to drop
|
||||
this.className = 'over';
|
||||
return false;
|
||||
});
|
||||
|
||||
// to get IE to work
|
||||
addEvent(bin, 'dragenter', function (e) {
|
||||
this.className = 'over';
|
||||
return false;
|
||||
});
|
||||
|
||||
addEvent(bin, 'dragleave', function () {
|
||||
this.className = '';
|
||||
});
|
||||
|
||||
addEvent(bin, 'drop', function (e) {
|
||||
if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why???
|
||||
|
||||
var el = document.getElementById(e.dataTransfer.getData('Text'));
|
||||
|
||||
el.parentNode.removeChild(el);
|
||||
|
||||
// stupid nom text + fade effect
|
||||
bin.className = '';
|
||||
yum.innerHTML = eat[parseInt(Math.random() * eat.length)];
|
||||
|
||||
var y = yum.cloneNode(true);
|
||||
bin.appendChild(y);
|
||||
|
||||
setTimeout(function () {
|
||||
var t = setInterval(function () {
|
||||
if (y.style.opacity <= 0) {
|
||||
if (msie) { // don't bother with the animation
|
||||
y.style.display = 'none';
|
||||
}
|
||||
clearInterval(t);
|
||||
} else {
|
||||
y.style.opacity -= 0.1;
|
||||
}
|
||||
}, 50);
|
||||
}, 250);
|
||||
|
||||
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>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
|
||||
<title>HTML5 Drag and drop demonstration</title>
|
||||
<style type="text/css">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 50px;
|
||||
font-family: helvetica, arial;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
/* padding: 10px;*/
|
||||
}
|
||||
|
||||
li a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
margin: 10px;
|
||||
width: 150px;
|
||||
border: 3px dashed #999;
|
||||
background: #eee;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
-moz-user-select:none;
|
||||
/* -webkit-user-drag: element;*/
|
||||
-khtml-user-drag: element;
|
||||
display: block;
|
||||
}
|
||||
|
||||
*:-khtml-drag {
|
||||
background-color: rgba(238,238,238, 0.5);
|
||||
}
|
||||
|
||||
a:hover:after {
|
||||
content: ' (drag me)';
|
||||
}
|
||||
|
||||
li.over {
|
||||
border-color: #333;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
#bin {
|
||||
background: url(images/bin.jpg) top right no-repeat;
|
||||
height: 250px;
|
||||
width: 166px;
|
||||
float: right;
|
||||
border: 5px solid #000;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#bin.over {
|
||||
background: url(images/bin.jpg) top left no-repeat;
|
||||
}
|
||||
|
||||
#bin p {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
width: 166px;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
text-shadow: #000 2px 2px 2px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="bin"></div>
|
||||
<ul>
|
||||
<li><a id="one" href="#">one</a></li>
|
||||
<li><a href="#" id="two">two</a></li>
|
||||
<li><a href="#" id="three">three</a></li>
|
||||
<li><a href="#" id="four">four</a></li>
|
||||
<li><a href="#" id="five">five</a></li>
|
||||
</ul>
|
||||
<script src="h5utils.js"></script>
|
||||
<script>
|
||||
|
||||
var eat = ['yum!', 'gulp', 'burp!', 'nom'];
|
||||
var yum = document.createElement('p');
|
||||
var msie = /*@cc_on!@*/0;
|
||||
yum.style.opacity = 1;
|
||||
|
||||
var links = document.querySelectorAll('li > a'), el = null;
|
||||
for (var i = 0; i < links.length; i++) {
|
||||
el = links[i];
|
||||
|
||||
// even required? Spec says yes, browsers say no.
|
||||
el.setAttribute('draggable', 'true');
|
||||
|
||||
addEvent(el, 'dragstart', function (e) {
|
||||
e.dataTransfer.setData('Text', this.id); // set *something* required otherwise doesn't work
|
||||
});
|
||||
}
|
||||
|
||||
var bin = document.querySelector('#bin');
|
||||
|
||||
addEvent(bin, 'dragover', function (e) {
|
||||
if (e.preventDefault) e.preventDefault(); // allows us to drop
|
||||
this.className = 'over';
|
||||
return false;
|
||||
});
|
||||
|
||||
addEvent(bin, 'dragleave', function () {
|
||||
this.className = '';
|
||||
});
|
||||
|
||||
addEvent(bin, 'drop', function (e) {
|
||||
if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why???
|
||||
|
||||
var el = document.getElementById(e.dataTransfer.getData('Text'));
|
||||
|
||||
el.parentNode.removeChild(el);
|
||||
|
||||
// stupid nom text + fade effect
|
||||
bin.className = '';
|
||||
yum.innerHTML = eat[parseInt(Math.random() * eat.length)];
|
||||
|
||||
var y = yum.cloneNode(true);
|
||||
bin.appendChild(y);
|
||||
|
||||
setTimeout(function () {
|
||||
var t = setInterval(function () {
|
||||
if (y.style.opacity <= 0) {
|
||||
if (msie) { // don't bother with the animation
|
||||
y.style.display = 'none';
|
||||
}
|
||||
clearInterval(t);
|
||||
} else {
|
||||
y.style.opacity -= 0.1;
|
||||
}
|
||||
}, 50);
|
||||
}, 250);
|
||||
|
||||
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>
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
<!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-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>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
// 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,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while (i--){document.createElement(e[i])}})();
|
||||
|
||||
var addEvent = (function () {
|
||||
if (document.addEventListener) {
|
||||
return function (el, type, fn) {
|
||||
if (el.length) {
|
||||
for (var i = 0; i < el.length; i++) {
|
||||
addEvent(el[i], type, fn);
|
||||
}
|
||||
} else {
|
||||
el.addEventListener(type, fn, false);
|
||||
}
|
||||
};
|
||||
} else {
|
||||
return function (el, type, fn) {
|
||||
if (el.length) {
|
||||
for (var i = 0; i < el.length; i++) {
|
||||
addEvent(el[i], type, fn);
|
||||
}
|
||||
} else {
|
||||
el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
|
||||
}
|
||||
};
|
||||
}
|
||||
})();
|
||||
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
// 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,canvas,datalist,details,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while (i--){document.createElement(e[i])}})();
|
||||
|
||||
var addEvent = (function () {
|
||||
if (document.addEventListener) {
|
||||
return function (el, type, fn) {
|
||||
if (el && el.nodeName) {
|
||||
el.addEventListener(type, fn, false);
|
||||
} else if (el && el.length) {
|
||||
for (var i = 0; i < el.length; i++) {
|
||||
addEvent(el[i], type, fn);
|
||||
}
|
||||
}
|
||||
};
|
||||
} else {
|
||||
return function (el, type, fn) {
|
||||
if (el && el.nodeName) {
|
||||
el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
|
||||
} else if (el && el.length) {
|
||||
for (var i = 0; i < el.length; i++) {
|
||||
addEvent(el[i], type, fn);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
})();
|
||||
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
CACHE MANIFEST
|
||||
|
||||
# version 15
|
||||
|
||||
CACHE:
|
||||
images/shade.jpg
|
||||
images/bin.jpg
|
||||
h5utils-offline.js
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
|
|
@ -0,0 +1,173 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<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-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>
|
||||
</head>
|
||||
<body>
|
||||
<section id="wrapper">
|
||||
<header>
|
||||
<h1><abbr>HTML</abbr> 5 Demos and Examples</h1>
|
||||
</header>
|
||||
<article>
|
||||
<p><abbr>HTML</abbr> 5 experimentation and demos I've hacked together:</p>
|
||||
<h2>Working</h2>
|
||||
<ul>
|
||||
<li><a href="canvas-grad">Interactive canvas gradients</a> (Safari, Firefox)</li>
|
||||
<li><a href="video-canvas">Canvas & Video</a> (Safari, Firefox)</li>
|
||||
<li><a href="video">Video</a> (Safari, Firefox)</li>
|
||||
<!--<li><a href="http://people.opera.com/brucel/demo/html5-forms-demo.html">Web Forms 2.0</a> (Opera 9+, very partial Safari support)</li>-->
|
||||
<li><a href="canvas">Canvas</a> (all bar IE)</li>
|
||||
<li><a href="contenteditable">Content Editable</a> (all latest browsers)</li>
|
||||
<li><a href="geo">Geolocation</a> (FF3.5, iPhone OS 3)</li>
|
||||
<li><a href="postmessage">postMessage</a> (same domain) (all latest browsers)</li>
|
||||
<li><a href="postmessage2">postMessage</a> (cross domain) (all latest browsers)</li>
|
||||
<li><a href="drag">drag and drop</a> (IE, Safari 4, FF3.5)</li>
|
||||
<li><a href="drag-anything">drag <em>anything</em></a> (IE, Safari 4, FF3.5)</li>
|
||||
<li><a href="offline">offline detection</a> (FF3.5, iPhone OS 3)</li>
|
||||
<li><a href="offlineapp">offline application using the manifest</a> (Safari 4, FF3.5.3) (<em>Note: pre-FF3.5.3 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=501422">has a bug</a></em>)</li>
|
||||
<li><a href="storage">Storage</a> (all bar Opera)</li>
|
||||
<li><a href="database">Web Database Storage</a> (Safari, iPhone OS 3)</li>
|
||||
<li><a href="worker">Web Workers</a> (watch out - uses a <em>lot</em> of CPU! <a href="non-worker">example without - will hang your browser</a>)</li>
|
||||
</ul>
|
||||
|
||||
<!-- <section>
|
||||
<a href="http://full-frontal.org" id="ffad" title="JavaScript Conference: Full Frontal, 20th November">
|
||||
<img src="http://2009.full-frontal.org/images/ff.gif" alt="Full Frontal Logo" width="70" />
|
||||
<p><b>Want to learn more about JavaScript?</b></p>
|
||||
<p>Full Frontal is a <strong>JavaScript conference</strong>, <em>run by</em> front end developers <em>for</em> front end developers, held in the UK on 20th November.</p>
|
||||
<p>Early bird tickets start at £100. Find out more: <em class="url">http://full-frontal.org</em></p>
|
||||
</a>
|
||||
</section> -->
|
||||
<p>All content, code, video and audio is <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/uk/">Creative Commons Share Alike 2.0</a></p>
|
||||
</article>
|
||||
<footer><a id="built" href="http://twitter.com/rem">@rem built this</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>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,169 @@
|
|||
<!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-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>
|
||||
<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 });
|
||||
|
||||
var running = false;
|
||||
var ctr = 0;
|
||||
|
||||
addEvent(document.getElementById('toggleWorker'), 'click', function (event) {
|
||||
// doesn't matter what the message is, just toggle the worker
|
||||
if (running == false) {
|
||||
running = true;
|
||||
run();
|
||||
} else {
|
||||
running = false;
|
||||
}
|
||||
});
|
||||
|
||||
function run() {
|
||||
var n = 1;
|
||||
search: while (running) {
|
||||
n += 1;
|
||||
for (var i = 2; i <= Math.sqrt(n); i += 1)
|
||||
if (n % i == 0)
|
||||
continue search;
|
||||
// found a prime!
|
||||
document.querySelector('#status').innerHTML = n;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function buildSpinner(data) {
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.height = 200;
|
||||
canvas.width = 300;
|
||||
document.querySelector('article').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>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!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-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,124 @@
|
|||
<!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-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>
|
||||
<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>
|
||||
<p id="status">checking...</p>
|
||||
<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.",
|
||||
"IDLE (numeric value 1) -- The ApplicationCache object's cache host is associated with an application cache whose application cache group's update status is idle, and that application cache is the newest cache in its application cache group, and the application cache group is not marked as obsolete.",
|
||||
"CHECKING (numeric value 2) -- The ApplicationCache object's cache host is associated with an application cache whose application cache group's update status is checking.",
|
||||
"DOWNLOADING (numeric value 3) -- The ApplicationCache object's cache host is associated with an application cache whose application cache group's update status is downloading.",
|
||||
"UPDATEREADY (numeric value 4) -- The ApplicationCache object's cache host is associated with an application cache whose application cache group's update status is idle, and whose application cache group is not marked as obsolete, but that application cache is not the newest cache in its group.",
|
||||
"OBSOLETE (numeric value 5) -- The ApplicationCache object's cache host is associated with an application cache whose application cache group is marked as obsolete."];
|
||||
|
||||
function updateCacheStatus() {
|
||||
document.querySelector('#status').innerHTML = cacheStates[window.applicationCache.status];
|
||||
}
|
||||
|
||||
addEvent(document.querySelector('#update'), 'click', function () {
|
||||
window.applicationCache.update();
|
||||
});
|
||||
|
||||
addEvent(document.querySelector('#swap'), 'click', function () {
|
||||
window.applicationCache.swapCache();
|
||||
});
|
||||
|
||||
var events = "checking,error,noupdate,downloading,progress,updateready,cached,obsolete".split(',');
|
||||
var i = events.length;
|
||||
|
||||
while (i--) {
|
||||
addEvent(window.applicationCache, events[i], updateCacheStatus);
|
||||
}
|
||||
|
||||
</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,21 @@
|
|||
<!DOCTYPE html>
|
||||
<title>.postMessage target</title>
|
||||
<style>
|
||||
body {
|
||||
font: normal 16px/20px Helvetica, sans-serif;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
<strong>This iframe is located on the same domain</strong>
|
||||
<p id="test">Send me a message!</p>
|
||||
<script src="h5utils.js"></script>
|
||||
<script>
|
||||
addEvent(window, "message", function(e){
|
||||
if ( e.origin !== "http://html5demos.com" ) {
|
||||
document.getElementById("test").innerHTML = 'Ignoring message from ' + e.origin;
|
||||
} else {
|
||||
document.getElementById("test").innerHTML = e.origin + " said: " + e.data;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<!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-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.querySelector('form'), '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>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!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-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>
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
<!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-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>
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
var html5demoTweets = (function (user, elm, status) {
|
||||
var elm = document.querySelector(elm),
|
||||
status = document.querySelector(status),
|
||||
db = null,
|
||||
showingTimeline = true,
|
||||
latest = 0;
|
||||
|
||||
function initDb() {
|
||||
status.innerHTML = 'initialising database';
|
||||
try {
|
||||
if (window.openDatabase) {
|
||||
db = openDatabase("html5demos", "1.0", "HTML 5 Database API example", 200000);
|
||||
if (db) {
|
||||
db.transaction(function(tx) {
|
||||
tx.executeSql("CREATE TABLE IF NOT EXISTS tweets (id REAL UNIQUE, text TEXT, created_at TEXT, screen_name TEXT, mention BOOLEAN)", [], function (tx, result) {
|
||||
clear();
|
||||
html5demoTweets.timeline();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
status.innerHTML = 'error occurred trying to open DB';
|
||||
}
|
||||
} else {
|
||||
status.innerHTML = 'Web Databases not supported';
|
||||
}
|
||||
} catch (e) {
|
||||
status.innerHTML = 'error occurred during DB init, Web Database supported?';
|
||||
}
|
||||
}
|
||||
|
||||
function load(mention, url) {
|
||||
db.transaction(function (tx) {
|
||||
tx.executeSql('SELECT * FROM tweets WHERE mention = ? AND id > ? ORDER BY id DESC', [mention, latest], function (tx, results) {
|
||||
var tweets = [], i, since_id = 0, script;
|
||||
|
||||
if (results.rows && results.rows.length) {
|
||||
status.innerHTML = 'loading ' + (showingTimeline ? 'timeline' : 'mentions') + ' from DB';
|
||||
for (i = 0; i < results.rows.length; i++) {
|
||||
if (since_id == 0) {
|
||||
since_id = results.rows.item(i).id;
|
||||
}
|
||||
tweets.push(results.rows.item(i));
|
||||
}
|
||||
|
||||
show(tweets);
|
||||
} else if (latest) {
|
||||
since_id = latest;
|
||||
}
|
||||
|
||||
if (since_id) {
|
||||
url += '&since_id=' + since_id;
|
||||
}
|
||||
|
||||
url += '&_cb=' + Math.random();
|
||||
|
||||
script = document.createElement('script');
|
||||
script.src = url;
|
||||
script.id = "twitterJSON";
|
||||
document.body.appendChild(script);
|
||||
}, function (tx) {
|
||||
status.innerHTML = 'error occurred, please reset DB';
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function show(tweets) {
|
||||
if (tweets.length) {
|
||||
// status.innerHTML = 'showing ' + tweets.length + ' tweets';
|
||||
tweets = tweets.reverse();
|
||||
var html = '', li;
|
||||
for (var i = 0; i < tweets.length; i++) {
|
||||
li = document.createElement('li');
|
||||
li.innerHTML = ify.clean(tweets[i].text) + ' (<a href="http://twitter.com/' + tweets[i].screen_name + '/status/' + tweets[i].id + '">' + tweets[i].created_at + '</a>)';
|
||||
if (elm.firstChild) {
|
||||
elm.insertBefore(li, elm.firstChild);
|
||||
} else {
|
||||
elm.appendChild(li);
|
||||
}
|
||||
|
||||
latest = tweets[i].id;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function clear() {
|
||||
latest = 0;
|
||||
elm.innerHTML = '';
|
||||
}
|
||||
|
||||
return {
|
||||
latest: function () {
|
||||
return latest;
|
||||
},
|
||||
|
||||
init: initDb,
|
||||
|
||||
timeline: function () {
|
||||
status.innerHTML = 'loading timeline';
|
||||
if (!showingTimeline) {
|
||||
clear();
|
||||
}
|
||||
|
||||
showingTimeline = true;
|
||||
|
||||
var url = 'http://twitter.com/statuses/user_timeline/' + encodeURIComponent(user) + '.json?callback=html5demoTweets.loadTweets';
|
||||
load(false, url);
|
||||
},
|
||||
|
||||
mentions: function () {
|
||||
status.innerHTML = 'loading mentions';
|
||||
if (showingTimeline) {
|
||||
clear();
|
||||
}
|
||||
|
||||
showingTimeline = false;
|
||||
|
||||
var url = 'http://search.twitter.com/search.json?rpp=20&callback=html5demoTweets.loadTweets&q=' + encodeURIComponent('@' + user);
|
||||
load(true, url);
|
||||
},
|
||||
|
||||
reset: function () {
|
||||
status.innerHTML = 'resetting database';
|
||||
|
||||
db.transaction(function (tx) {
|
||||
tx.executeSql('DROP TABLE IF EXISTS tweets', [], function () {
|
||||
status.innerHTML = 'database has been cleared - please reload';
|
||||
clear();
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// public so the JSONP callback can hit it
|
||||
loadTweets: function (tweets) {
|
||||
var search = false;
|
||||
|
||||
document.body.removeChild(document.getElementById('twitterJSON'));
|
||||
|
||||
if (typeof tweets == 'string') {
|
||||
// error occurred
|
||||
return;
|
||||
}
|
||||
|
||||
if (tweets.results) {
|
||||
tweets = tweets.results;
|
||||
search = true;
|
||||
}
|
||||
|
||||
if (tweets.length) {
|
||||
status.innerHTML = tweets.length + ' new tweets loaded';
|
||||
|
||||
db.transaction(function (tx) {
|
||||
var i;
|
||||
for (i = 0; i < tweets.length; i++) {
|
||||
if (search) {
|
||||
tweets[i].screen_name = tweets[i].from_user;
|
||||
} else {
|
||||
tweets[i].screen_name = tweets[i].user.screen_name;
|
||||
}
|
||||
tx.executeSql('INSERT INTO tweets (id, text, created_at, screen_name, mention) values (?, ?, ?, ?, ?)', [tweets[i].id, tweets[i].text, tweets[i].created_at, tweets[i].screen_name, search]);
|
||||
}
|
||||
|
||||
show(tweets);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
})('rem', '#tweets ol', '#status');
|
||||
// twitter username, element with the list of tweets, status field
|
||||
|
||||
|
||||
var ify = function() {
|
||||
var entities = {
|
||||
'"' : '"',
|
||||
'&' : '&',
|
||||
'<' : '<',
|
||||
'>' : '>'
|
||||
};
|
||||
|
||||
return {
|
||||
"link": function(t) {
|
||||
return t.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+[^\.,\)\s*$]/g, function(m) {
|
||||
return '<a href="' + m + '">' + ((m.length > 25) ? m.substr(0, 24) + '...' : m) + '</a>';
|
||||
});
|
||||
},
|
||||
"at": function(t) {
|
||||
return t.replace(/(^|[^\w]+)\@([a-zA-Z0-9_]{1,15})/g, function(m, m1, m2) {
|
||||
return m1 + '@<a href="http://twitter.com/' + m2 + '">' + m2 + '</a>';
|
||||
});
|
||||
},
|
||||
"hash": function(t) {
|
||||
return t.replace(/(^|[^\w]+)\#([a-zA-Z0-9_]+)/g, function(m, m1, m2) {
|
||||
return m1 + '#<a href="http://search.twitter.com/search?q=%23' + m2 + '">' + m2 + '</a>';
|
||||
});
|
||||
},
|
||||
"clean": function(tweet) {
|
||||
return this.hash(this.at(this.link(tweet)));
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Dizzy</title>
|
||||
<style>
|
||||
* { margin: 0;}
|
||||
body { font-family: helvetica; padding: 10px; }
|
||||
input { width: 50px; }
|
||||
/*video, canvas { display: block; }*/
|
||||
p { margin-top: 20px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<video height="360" width="480">
|
||||
<source src="dizzy.mp4" />
|
||||
<source src="dizzy.ogv" />
|
||||
</video><canvas></canvas>
|
||||
<p>
|
||||
<input type="button" id="play" value="play">
|
||||
<span id="position">00:00</span> / <span id="duration"></span>
|
||||
</p>
|
||||
<script src="h5utils.js"></script>
|
||||
<script>
|
||||
var video = document.querySelector('video');
|
||||
var togglePlay = document.querySelector('#play');
|
||||
var position = document.querySelector('#position');
|
||||
var canvas = document.querySelector('canvas');
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
addEvent(togglePlay, 'click', function () {
|
||||
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);
|
||||
|
||||
// ctx.restore();
|
||||
ctx.drawImage(video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height);
|
||||
});
|
||||
|
||||
addEvent(video, 'ended', function () {
|
||||
togglePlay.value = "play";
|
||||
});
|
||||
|
||||
addEvent(video, 'canplay', function () {
|
||||
video.muted = true;
|
||||
document.querySelector('#duration').innerHTML = asTime(this.duration);
|
||||
startCanvas();
|
||||
});
|
||||
|
||||
|
||||
function startCanvas() {
|
||||
canvas.setAttribute('height', Math.floor(video.height));
|
||||
canvas.setAttribute('width', Math.floor(video.width));
|
||||
|
||||
ctx.translate(canvas.width/2, canvas.height/2);
|
||||
ctx.scale(-1, 1);
|
||||
ctx.translate(-canvas.width/2, -canvas.height/2);
|
||||
ctx.drawImage(video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
// var mirror = canvas.height * 0.6;
|
||||
// var grad = ctx.createLinearGradient(0, 0, 0, mirror);
|
||||
// grad.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
|
||||
// grad.addColorStop(1, 'rgba(0, 0, 0, 1)');
|
||||
// ctx.fillStyle = grad;
|
||||
// ctx.rect(0, 0, canvas.width, mirror);
|
||||
// ctx.fill();
|
||||
// ctx.save();
|
||||
}
|
||||
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<!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-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>
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<!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-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>
|
||||
<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');
|
||||
|
||||
addEvent(document.getElementById('toggleWorker'), 'click', function () {
|
||||
w.postMessage('');
|
||||
});
|
||||
|
||||
w.onmessage = function (event) {
|
||||
if (event.data && (event.data+"").match(/^log:/i)) {
|
||||
console.log(event.data.match(/^log:\s*(.*)/)[1]);
|
||||
} else {
|
||||
document.querySelector('#status').innerHTML = event.data;
|
||||
}
|
||||
}
|
||||
|
||||
function buildSpinner(data) {
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.height = 100;
|
||||
canvas.width = 300;
|
||||
document.querySelector('article').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>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
var running = false;
|
||||
var ctr = 0;
|
||||
|
||||
function log(s) {
|
||||
postMessage('log:' + s);
|
||||
}
|
||||
|
||||
onmessage = function (event) {
|
||||
// doesn't matter what the message is, just toggle the worker
|
||||
if (running == false) {
|
||||
running = true;
|
||||
run();
|
||||
} else {
|
||||
running = false;
|
||||
}
|
||||
};
|
||||
|
||||
function run() {
|
||||
while (running) {
|
||||
postMessage(ctr);
|
||||
ctr++;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue