├── .gitignore ├── .gitmodules ├── .htaccess ├── MIT-LICENSE.TXT ├── README.markdown ├── assets ├── dizzy.mp4 ├── dizzy.ogv ├── dizzy.webm ├── remy-and-ellis2.mp4 └── remy-and-ellis2.webm ├── canvas-grad.html ├── composer.json ├── css └── html5demos.css ├── demos.json ├── demos ├── canvas.html ├── classlist.html ├── contenteditable.html ├── database-rollback.html ├── database.html ├── dataset.html ├── dnd-upload.html ├── drag-anything.html ├── drag.html ├── file-api-simple.html ├── file-api.html ├── geo.html ├── gum-canvas.html ├── gum.html ├── hidden.html ├── history.html ├── nav-online.html ├── non-worker.html ├── offline-events.html ├── offline.html ├── offlineapp.html ├── postmessage.html ├── postmessage2.html ├── storage-events.html ├── storage.html ├── svg-clock.html ├── template.html ├── two-videos.html ├── video.html ├── web-socket.html └── worker.html ├── devnull.php ├── drag-orig.html ├── drag2.html ├── html5demo.appcache ├── images ├── bin.jpg ├── browsers.gif ├── ih5.jpg ├── learn-js.jpg ├── shade.jpg ├── terminal-training.png └── yourbrowser.gif ├── includes ├── footer.php └── header.php ├── index.php ├── js ├── gum.js ├── h5utils-offline.js ├── h5utils.js ├── jquery.js ├── modernizr.custom.js ├── prettify.packed.js ├── tweets.js ├── worker-cruncher.js └── worker-main.js ├── page.php ├── postmessage-target.html ├── server └── custom-echo.js ├── video-canvas.html └── www ├── assets ├── dizzy.mp4 ├── dizzy.ogv ├── dizzy.webm ├── remy-and-ellis2.mp4 └── remy-and-ellis2.webm ├── canvas-grad └── index.html ├── canvas └── index.html ├── classlist └── index.html ├── contenteditable └── index.html ├── css └── html5demos.css ├── database-rollback └── index.html ├── database └── index.html ├── dataset └── index.html ├── demos ├── canvas.html ├── classlist.html ├── contenteditable.html ├── database-rollback.html ├── database.html ├── dataset.html ├── dnd-upload.html ├── drag-anything.html ├── drag.html ├── file-api-simple.html ├── file-api.html ├── geo.html ├── gum-canvas.html ├── gum.html ├── hidden.html ├── history.html ├── nav-online.html ├── non-worker.html ├── offline-events.html ├── offline.html ├── offlineapp.html ├── postmessage.html ├── postmessage2.html ├── storage-events.html ├── storage.html ├── svg-clock.html ├── template.html ├── two-videos.html ├── video.html ├── web-socket.html └── worker.html ├── dnd-upload └── index.html ├── drag-anything └── index.html ├── drag └── index.html ├── file-api-simple └── index.html ├── file-api └── index.html ├── geo └── index.html ├── gum-canvas └── index.html ├── gum └── index.html ├── hidden └── index.html ├── history └── index.html ├── images ├── bin.jpg ├── browsers.gif ├── ih5.jpg ├── learn-js.jpg ├── shade.jpg ├── terminal-training.png └── yourbrowser.gif ├── index.html ├── js ├── gum.js ├── h5utils-offline.js ├── h5utils.js ├── modernizr.custom.js ├── prettify.packed.js ├── tweets.js └── worker-main.js ├── nav-online └── index.html ├── non-worker └── index.html ├── offline-events └── index.html ├── offline └── index.html ├── offlineapp └── index.html ├── postmessage-target.html └── index.html ├── postmessage └── index.html ├── postmessage2 └── index.html ├── storage-events └── index.html ├── storage └── index.html ├── svg-clock └── index.html ├── two-videos └── index.html ├── video-canvas └── index.html ├── video └── index.html ├── web-socket └── index.html └── worker └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | logs/* 2 | s3_website.yml 3 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "server/node-websocket-server"] 2 | path = server/node-websocket-server 3 | url = http://github.com/miksago/node-websocket-server.git 4 | -------------------------------------------------------------------------------- /.htaccess: -------------------------------------------------------------------------------- 1 | 2 | Options +FollowSymLinks +ExecCGI 3 | RewriteEngine On 4 | RewriteBase / 5 | 6 | # no-www.org 7 | RewriteCond %{HTTP_HOST} ^www\.html5demos\.com$ [NC,OR] 8 | RewriteCond %{HTTP_HOST} ^www\.html5demo\.com$ [NC,OR] 9 | RewriteCond %{HTTP_HOST} ^html5demo\.com$ [NC] 10 | RewriteRule ^(.*)$ http://html5demos.com/$1 [R=301,L] 11 | 12 | # RewriteCond %{HTTP_REFERER} ^$ [OR] 13 | # RewriteCond %{HTTP_REFERER} !^http://(www\.|offline\.)?html5demos.com/.*$ 14 | # RewriteRule \.(gif|jpg|swf|flv|png|ogv|mp4|webm|js)$ [R=404,L] 15 | 16 | # if the file or directory does exist 17 | RewriteCond %{REQUEST_FILENAME} -d [OR] 18 | RewriteCond %{REQUEST_FILENAME} -f 19 | RewriteRule .* - [L] 20 | 21 | RewriteCond %{REQUEST_FILENAME}.html -f 22 | RewriteRule (.*) $1.html [QSA,L] 23 | 24 | RewriteRule ^(.*)$ page.php [QSA,L] 25 | 26 | 27 | -------------------------------------------------------------------------------- /MIT-LICENSE.TXT: -------------------------------------------------------------------------------- 1 | Copyright (c) 2010 Remy Sharp, http://html5demos.com 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.markdown: -------------------------------------------------------------------------------- 1 | # HTML5 Demos and Examples 2 | 3 | A collection of HTML5 experiments I've created, now open source and on GitHub, so please go ahead and help me hack this resource in to a wealth of demos that other authors can learn from. 4 | 5 | **🚨 THIS PROJECT IS NOW RETIRED - YOU WILL FIND WORKING CODE, BUT IT IS NO LONGER LIVE OR MAINTAINED 🚨** 6 | 7 | ## Aim 8 | 9 | * If a user can hit view source on the demo, then we've done our job 10 | * Where possible browser support should be named (FF3.5, etc) 11 | * All content is open source and content is [Creative Commons Share Alike 2.0](http://creativecommons.org/licenses/by-sa/2.0/uk/) 12 | * Individual demos, if authored by someone other than [@rem](http://twitter.com) can be credited as appropriate 13 | 14 | # Creating new demos 15 | 16 | If the demo should take the default style - currently grey and dull - but it keeps the focus on the code ;) then follow these instructions. Otherwise, simply create the file in the root directory calling it [yourdemo].html and include it in the index.php. 17 | 18 | Instructions to creating a new demo: 19 | 20 | * Create a .html in the /demos directory 21 | * Use the following template (also a sample in /demos/template.html): 22 | 23 |
<title><!-- Title of your demo, note this appears in the document title prefixed with "HTML5 Demo:" --></title>
24 | <style>/** any custom styles live here **/</style>
25 | <article><!-- any demo markup here --></article>
26 | <script>
27 | // your JavaScript
28 | </script>
29 | 30 | * When requesting the demo, use html5demos.com/[yourdemo] and page.php will top and tail your page 31 | * Any additional JavaScript libraries should be stored in the /js directory, assets, such as video and audio live in the /assets directory. 32 | 33 | That should be it. 34 | 35 | By submitting any code, you're also agreeing that your code is covered by the MIT-LICENSE that this project is covered by, and all content is covered by Creative Commons Share Alike 2.0 - as is all of this project: it's all about sharing baby! 36 | 37 | # TODO 38 | 39 | ## Demos Required 40 | 41 | * Microdata 42 | * SVG 43 | * More audio and video demos 44 | * More introductions to canvas 45 | * More event based stuff 46 | * WebSockets (@rem - have a demo ready, but not the server side) 47 | 48 | ## Misc 49 | 50 | * Clearer versioning on the demos, rather than "All bar Opera", should include last version to support feature, i.e. Opera 10.10b, Chrome 4 dev, Safari 4.0, etc. 51 | -------------------------------------------------------------------------------- /assets/dizzy.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/assets/dizzy.mp4 -------------------------------------------------------------------------------- /assets/dizzy.ogv: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/assets/dizzy.ogv -------------------------------------------------------------------------------- /assets/dizzy.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/assets/dizzy.webm -------------------------------------------------------------------------------- /assets/remy-and-ellis2.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/assets/remy-and-ellis2.mp4 -------------------------------------------------------------------------------- /assets/remy-and-ellis2.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/assets/remy-and-ellis2.webm -------------------------------------------------------------------------------- /canvas-grad.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Canvas Gradient 6 | 18 | 19 | 20 | 21 | 65 | Fork me on GitHub 66 | 70 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /demos/canvas.html: -------------------------------------------------------------------------------- 1 | Canvas 2 |
3 | -------------------------------------------------------------------------------- /demos/classlist.html: -------------------------------------------------------------------------------- 1 | Simple classList manipulation 2 | 28 |
29 |

Clicking the buttons below will toggle the class on the bacon ipsum text below, assigning the class with the same name (styles seen below). This is done using the new classList API.

30 |

Not supported :(

31 |
<style> 
32 |   .big { font-size: 30px; }
33 |   .bold { font-weight: bold; }
34 |   .pink { background: #FF5E99; color: #fff; }
35 | </style>
36 |

Bacon ipsum dolor sit amet pancetta bresaola tenderloin, swine meatball tongue ham boudin t-bone ribeye jerky sausage. Pork loin cow shankle drumstick tri-tip, chicken venison strip steak.

37 |

Toggle a class: 38 | 39 | 40 | 41 |

42 |
43 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /demos/contenteditable.html: -------------------------------------------------------------------------------- 1 | ContentEditable 2 |
3 |
4 |

Any elements with the contenteditable 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.

5 |
6 |
7 |

Go ahead, edit away!

8 |

Here's a typical paragraph element

9 |
    10 |
  1. and now a list
  2. 11 |
  3. with only
  4. 12 |
  5. three items
  6. 13 |
14 |
15 |
16 | 17 |
18 |
19 | -------------------------------------------------------------------------------- /demos/database-rollback.html: -------------------------------------------------------------------------------- 1 | Web SQL Database - rollback test 2 | 46 |
47 |
48 |

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'.

49 |

Status:

50 |
ready
51 |
52 |
53 | -------------------------------------------------------------------------------- /demos/database.html: -------------------------------------------------------------------------------- 1 | Web Database 2 | 45 |
46 |
47 |

We're using the Web Database API to store my tweets, so there's no Twitter API hit on load.

48 |

In addition, I'm using the since_id when we make new requests, so I shouldn't be doubling up on tweets.

49 |

Status: ready

50 |
51 |
52 |
    53 |
  1. None loaded up yet :-(
  2. 54 |
55 |
56 |
57 | 58 | 59 | 60 |
61 |
62 | 63 | -------------------------------------------------------------------------------- /demos/dataset.html: -------------------------------------------------------------------------------- 1 | 15 | data-* 16 |
17 |
18 |

The data-[name] attribute on elements can now be accessed directly via the DOM using element.dataset.[attr].

19 |

Try openning the Web Console and editing element.dataset directly:
element.dataset.foo = 'bar';

20 |
21 |

Not connected

22 |
23 |
This element has data
24 | 25 | 26 | 27 |
28 |
[click buttons above to show element html]
29 |
30 | 74 | -------------------------------------------------------------------------------- /demos/drag.html: -------------------------------------------------------------------------------- 1 | Drag and drop 2 | 67 |
68 |

Drag the list items over the dustbin, and drop them to have the bin eat the item

69 |
70 | 77 |
78 | 147 | -------------------------------------------------------------------------------- /demos/file-api-simple.html: -------------------------------------------------------------------------------- 1 | File API (simple) 2 |
3 |

File API & FileReader API not supported

4 |

5 |

Select an image from your machine to read the contents of the file without using a server

6 |
7 |
8 | 40 | -------------------------------------------------------------------------------- /demos/file-api.html: -------------------------------------------------------------------------------- 1 | File API 2 | 6 |
7 |
8 |

File API & FileReader API not supported

9 |

Drag an image from your desktop on to the drop zone above to see the browser read the contents of the file and use it as the background - without uploading the file to any servers.

10 |
11 | 40 | -------------------------------------------------------------------------------- /demos/geo.html: -------------------------------------------------------------------------------- 1 | 2 | geolocation 3 | 4 |
5 |

Finding your location: checking...

6 |
7 | 58 | -------------------------------------------------------------------------------- /demos/gum.html: -------------------------------------------------------------------------------- 1 | getUserMedia streamed to a video element 2 | 24 |
25 | 29 |

getUserMeda either not supported or not allowed - so instead here's me and my son headbanging.

30 |
31 | 32 | 41 | -------------------------------------------------------------------------------- /demos/hidden.html: -------------------------------------------------------------------------------- 1 | Hidden 2 | 5 |
6 |

Welcome dear HTML5-er. You will be able to read this paragraph, but not the next. The next paragraph has the hidden property set on it. It's a boolean that uses the browsers own stylesheet to hide the element, which is nicer than having to dip in to the style properties in JavaScript.

7 |

Sadly, your browser doesn't support the hidden property. Useful when you want to quickly do element.hidden. Ah well, back to CSS.

8 |
9 | -------------------------------------------------------------------------------- /demos/history.html: -------------------------------------------------------------------------------- 1 | HTML5 History API 2 | 12 |
13 |

HTML5 History API not supported

14 |

Last event fired: (none)

15 |

To test the History API, click through the urls below. Note that none of these urls point to real pages. JavaScript will intercept these clicks, load data and the browser address bar will appear to change - but this is the History API in action!

16 |

Use the back and forward buttons in your browser to navigate the history.

17 | 23 |

Note: since these urls aren't real, refreshing the page will land on an invalid url.

24 |
25 |
26 | -------------------------------------------------------------------------------- /demos/nav-online.html: -------------------------------------------------------------------------------- 1 | navigator.onLine testing 2 |
3 |

Current network status: checking...

4 |

A timer is constantly polling the navigator.onLine property, which is typically switched via File -> Work Offline

5 |
6 | -------------------------------------------------------------------------------- /demos/non-worker.html: -------------------------------------------------------------------------------- 1 | Non Worker 2 |
3 |

Canvas is running whilst an prime number finder runs - this will cause your browser to hang

4 |

Prime found: 0

5 |
6 |
7 | 97 | -------------------------------------------------------------------------------- /demos/offline-events.html: -------------------------------------------------------------------------------- 1 | on/offline event capture 2 | 10 |
11 |

Test required here: File -> Work Offline - toggle the value and there should be three list items notifying of online and offline.

12 | 17 |

Note that the test shows that window.ononline and window.onoffline doesn't work (which I thought I had read in the specs somewhere...).

18 |
19 | -------------------------------------------------------------------------------- /demos/offline.html: -------------------------------------------------------------------------------- 1 | Online connectivity monitoring 2 |
3 |

Current network status: checking...

4 |
    5 |
    6 | -------------------------------------------------------------------------------- /demos/offlineapp.html: -------------------------------------------------------------------------------- 1 | 2 | Offline Application: using manifest 3 | 4 |
    5 |

    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.

    6 |

    Status of cache:

    7 |

    checking...

    8 |

    9 |

    10 |
    11 | 40 | -------------------------------------------------------------------------------- /demos/postmessage.html: -------------------------------------------------------------------------------- 1 | postMessage (same domain) 2 | 8 |
    9 |
    10 |

    11 |

    12 |

    Target iframe:

    13 | 14 |
    15 |
    16 | -------------------------------------------------------------------------------- /demos/postmessage2.html: -------------------------------------------------------------------------------- 1 | postMessage (cross domain) 2 | 8 |
    9 |
    10 |

    11 |

    12 |

    Target iframe:

    13 | 14 |
    15 |
    16 | 31 | -------------------------------------------------------------------------------- /demos/storage-events.html: -------------------------------------------------------------------------------- 1 | Storage Events 2 | 19 |
    20 |
    21 |

    Directions: open multiple windows or tabs with this demo and change the text below.

    22 |

    The storage event triggers on the "blurred" windows, giving us a way to communicate across windows using localStorage.

    23 |
    24 |

    (this is only echoed on other windows)

    25 |

    Waiting for data via storage event...

    26 |
    27 |
    28 |
    29 | 45 | -------------------------------------------------------------------------------- /demos/storage.html: -------------------------------------------------------------------------------- 1 | Storage 2 | 14 |
    15 |
    16 |

    Values are stored on keyup

    17 |

    Content loaded from previous sessions:

    18 | 19 |
    20 |
    21 |
    22 | 23 | 24 |
    25 |
    26 | 27 | 28 |
    29 | 30 |
    31 |
    32 | 75 | -------------------------------------------------------------------------------- /demos/template.html: -------------------------------------------------------------------------------- 1 | This is a template example 2 | 5 |
    6 |

    Instructions or related markup might should appear inside the <article> element, and code in the <script> below.

    7 |
    8 | -------------------------------------------------------------------------------- /demos/two-videos.html: -------------------------------------------------------------------------------- 1 | 11 | Two videos in sync 12 |
    13 | 17 | 21 |

    22 | 23 | 00:00 / loading... 24 | 25 |

    26 |

    This demo shows two videos running, which we're trying to run in sync. Moving the scrubber should scrub both videos.

    27 |
    28 | 104 | -------------------------------------------------------------------------------- /demos/video.html: -------------------------------------------------------------------------------- 1 | Video 2 |
    3 | 8 |

    9 | 10 | 00:00 / loading... 11 |

    12 |

    Video loaded: loading...

    13 |

    Note that (at time of writing) Webkit nightly supports full screen mode, which will add a button above.

    14 |
    15 | -------------------------------------------------------------------------------- /demos/web-socket.html: -------------------------------------------------------------------------------- 1 | Web Socket 2 | 21 |
    22 |
    23 | 24 |
    25 |

    Not connected

    26 |

    Users connected: 0

    27 |

    To test, open two windows with Web Socket support, type a message above and press return.

    28 |

    The server side code is available here: node-web-socket & server (note that it runs on nodejs)

    29 | 30 |
    31 | 104 | -------------------------------------------------------------------------------- /demos/worker.html: -------------------------------------------------------------------------------- 1 | Web Worker 2 | 28 |
    29 |

    This demo shows how main window animation isn't interrupted by Web Workers. Note that the animation does not work in Opera (due to lack of requestAnimationFrame support).

    30 |

    Use arrow keys to change the direction of the animated square. The square is animated with requestAnimationFrame.

    31 |
    32 |
    33 |
    34 |

    Click the button below to start or stop the worker.

    35 |
    36 |

    Messages from Worker:

    37 |
    38 | 39 |
    -------------------------------------------------------------------------------- /devnull.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /drag-orig.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML5 Drag and drop demonstration 6 | 24 | 67 | 68 | 69 |

    Drag and drop demo in a HTML document, using the HTML5 drag and drop API

    70 |
    The red box and the orange box can be dragged and dropped between 71 | the blue and the green boxes. 72 | The purple box can be dragged and dropped only to the yellow box. 73 |
    74 | 75 |
    79 | 80 |
    drag me
    83 | 84 |
    drag me
    87 | 88 |
    drag me
    91 | 92 |
    93 | 94 |
    98 |
    99 | 100 |
    104 |
    105 |
    Example created by Laurent Jouanneau.
    106 | 110 | 115 | 116 | -------------------------------------------------------------------------------- /drag2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML5 Drag and drop demonstration 6 | 75 | 76 | 77 |
    78 | 85 | 86 | 148 | 152 | 157 | 158 | 159 | -------------------------------------------------------------------------------- /html5demo.appcache: -------------------------------------------------------------------------------- 1 | CACHE MANIFEST 2 | 3 | # Build 2011-05-17 4 | 5 | CACHE: 6 | /images/shade.jpg 7 | /images/bin.jpg 8 | /js/h5utils-offline.js 9 | /css/html5demos.css 10 | 11 | NETWORK: 12 | http://* 13 | https://* 14 | -------------------------------------------------------------------------------- /images/bin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/images/bin.jpg -------------------------------------------------------------------------------- /images/browsers.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/images/browsers.gif -------------------------------------------------------------------------------- /images/ih5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/images/ih5.jpg -------------------------------------------------------------------------------- /images/learn-js.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/images/learn-js.jpg -------------------------------------------------------------------------------- /images/shade.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/images/shade.jpg -------------------------------------------------------------------------------- /images/terminal-training.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/images/terminal-training.png -------------------------------------------------------------------------------- /images/yourbrowser.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/images/yourbrowser.gif -------------------------------------------------------------------------------- /includes/footer.php: -------------------------------------------------------------------------------- 1 | 2 | HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage 3 | 4 | 5 | 6 | Fork me on GitHub 7 | 8 | 12 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /includes/header.php: -------------------------------------------------------------------------------- 1 | 2 | > 3 | 4 | 5 | 6 | HTML5 Demo: <?=$title?> 7 | 8 | 9 | 10 | 11 |
    12 | 13 |
    14 |

    15 |
    16 | -------------------------------------------------------------------------------- /js/gum.js: -------------------------------------------------------------------------------- 1 | var video = document.querySelector('video'); 2 | 3 | function gumSuccess(stream) { 4 | // window.stream = stream; 5 | if ('mozSrcObject' in video) { 6 | video.mozSrcObject = stream; 7 | } else if (window.webkitURL) { 8 | video.src = window.webkitURL.createObjectURL(stream); 9 | } else { 10 | video.src = stream; 11 | } 12 | video.play(); 13 | } 14 | 15 | function gumError(error) { 16 | console.error('Error on getUserMedia', error); 17 | } 18 | 19 | function gumInit() { 20 | navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; 21 | 22 | if (navigator.getUserMedia) { 23 | navigator.getUserMedia({video: true }, gumSuccess, gumError); 24 | } 25 | } 26 | 27 | gumInit(); -------------------------------------------------------------------------------- /js/h5utils-offline.js: -------------------------------------------------------------------------------- 1 | // For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/ 2 | (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])}})(); 3 | 4 | var addEvent = (function () { 5 | if (document.addEventListener) { 6 | return function (el, type, fn) { 7 | if (el.length) { 8 | for (var i = 0; i < el.length; i++) { 9 | addEvent(el[i], type, fn); 10 | } 11 | } else { 12 | el.addEventListener(type, fn, false); 13 | } 14 | }; 15 | } else { 16 | return function (el, type, fn) { 17 | if (el.length) { 18 | for (var i = 0; i < el.length; i++) { 19 | addEvent(el[i], type, fn); 20 | } 21 | } else { 22 | el.attachEvent('on' + type, function () { return fn.call(el, window.event); }); 23 | } 24 | }; 25 | } 26 | })(); 27 | 28 | -------------------------------------------------------------------------------- /js/h5utils.js: -------------------------------------------------------------------------------- 1 | // For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/ 2 | /*@cc_on'abbr article aside audio canvas details figcaption figure footer header hgroup mark menu meter nav output progress section summary time video'.replace(/\w+/g,function(n){document.createElement(n)})@*/ 3 | 4 | var addEvent = (function () { 5 | if (document.addEventListener) { 6 | return function (el, type, fn) { 7 | if (el && el.nodeName || el === window) { 8 | el.addEventListener(type, fn, false); 9 | } else if (el && el.length) { 10 | for (var i = 0; i < el.length; i++) { 11 | addEvent(el[i], type, fn); 12 | } 13 | } 14 | }; 15 | } else { 16 | return function (el, type, fn) { 17 | if (el && el.nodeName || el === window) { 18 | el.attachEvent('on' + type, function () { return fn.call(el, window.event); }); 19 | } else if (el && el.length) { 20 | for (var i = 0; i < el.length; i++) { 21 | addEvent(el[i], type, fn); 22 | } 23 | } 24 | }; 25 | } 26 | })(); 27 | 28 | (function () { 29 | 30 | var pre = document.createElement('pre'); 31 | pre.id = "view-source" 32 | 33 | // private scope to avoid conflicts with demos 34 | addEvent(window, 'click', function (event) { 35 | if (event.target.hash == '#view-source') { 36 | // event.preventDefault(); 37 | if (!document.getElementById('view-source')) { 38 | // pre.innerHTML = ('\n\n' + document.documentElement.innerHTML + '\n').replace(/[<>]/g, function (m) { return {'<':'<','>':'>'}[m]}); 39 | var xhr = new XMLHttpRequest(); 40 | 41 | // original source - rather than rendered source 42 | xhr.onreadystatechange = function () { 43 | if (this.readyState == 4 && this.status == 200) { 44 | pre.innerHTML = this.responseText.replace(/[<>]/g, function (m) { return {'<':'<','>':'>'}[m]}); 45 | prettyPrint(); 46 | } 47 | }; 48 | 49 | document.body.appendChild(pre); 50 | // really need to be sync? - I like to think so 51 | xhr.open("GET", location.origin + '/demos' + window.location.pathname.replace(/\/$/, '') + '.html', true); 52 | xhr.send(); 53 | } 54 | document.body.className = 'view-source'; 55 | 56 | var sourceTimer = setInterval(function () { 57 | if (window.location.hash != '#view-source') { 58 | clearInterval(sourceTimer); 59 | document.body.className = ''; 60 | } 61 | }, 200); 62 | } 63 | }); 64 | 65 | })(); 66 | -------------------------------------------------------------------------------- /js/worker-cruncher.js: -------------------------------------------------------------------------------- 1 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50, browser: true */ 2 | /*global postMessage, addEventListener */ 3 | 4 | (function () { 5 | "use strict"; 6 | 7 | var WHEN_TO_STOP = 10000000; 8 | var COMPUTE_BLOCK_SIZE = 1000000; 9 | 10 | var running = false; 11 | var count = 0; 12 | 13 | // We have to compute in blocks of ~1 second of computation in order to make sure 14 | // that we read our message queue occasionally. Worker threads are not preemptive 15 | // (like all JS), so if we don't pause computation to read the message queue, we'll 16 | // be unresponsive to user requests. 17 | function compute(start) { 18 | var n = start; 19 | var i, hasDivisor; 20 | 21 | if (!running) { // got a message to stop before this call to compute 22 | postMessage("Stopped!"); 23 | } else { 24 | while (n < start + COMPUTE_BLOCK_SIZE) { 25 | hasDivisor = false; 26 | for (i = 2; i <= Math.sqrt(n); i += 1) { 27 | if (n % i === 0) { 28 | hasDivisor = true; 29 | break; 30 | } 31 | } 32 | if (!hasDivisor) { 33 | // found a prime! 34 | count++; 35 | } 36 | n += 1; 37 | } 38 | 39 | if (n < WHEN_TO_STOP) { 40 | // allow for event loop to actually forward messages to the worker 41 | setTimeout(function () { compute(n); }, 1); 42 | } else { 43 | // we reached the end 44 | running = false; 45 | postMessage("Done!"); 46 | } 47 | } 48 | 49 | // Finally, always report how many primes we've found so far 50 | postMessage("Found " + count + " primes between 2 and " + (n - 1)); 51 | 52 | } 53 | 54 | addEventListener('message', function (event) { 55 | // doesn't matter what the message is, just toggle the worker 56 | if (running === false) { 57 | postMessage("Starting..."); 58 | count = 0; 59 | running = true; 60 | compute(1); 61 | } else { 62 | postMessage("Stopping..."); 63 | running = false; 64 | } 65 | }); 66 | 67 | 68 | }()); -------------------------------------------------------------------------------- /js/worker-main.js: -------------------------------------------------------------------------------- 1 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50, browser: true */ 2 | /*global Worker */ 3 | 4 | (function () { 5 | "use strict"; 6 | 7 | var SQUARE_SIZE = 50; 8 | var MOVEMENT_STEP = 3; 9 | 10 | var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || 11 | window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 12 | 13 | 14 | // Set up the worker 15 | var running = false; 16 | var statusDiv = document.getElementById('status'); 17 | var button = document.getElementById('toggleWorker'); 18 | var worker = new Worker('../js/worker-cruncher.js'); // path is relative to the main HTML file 19 | worker.addEventListener('message', function (event) { 20 | var currentStatus = statusDiv.innerHTML; 21 | statusDiv.innerHTML = "

    " + event.data + "

    " + currentStatus; 22 | if (event.data === "Done!") { 23 | running = false; 24 | button.value = "start worker"; 25 | } 26 | }); 27 | 28 | button.onclick = function () { 29 | running = !running; 30 | if (running) { 31 | statusDiv.innerHTML = ""; 32 | button.value = "stop worker"; 33 | } else { 34 | button.value = "start worker"; 35 | } 36 | worker.postMessage(''); 37 | 38 | }; 39 | 40 | 41 | // Set up the animated square 42 | var square = document.getElementById('square'); 43 | var direction = 39; // right 44 | 45 | square.style.top = 0; 46 | square.style.left = '20px'; 47 | square.style.height = SQUARE_SIZE; 48 | square.style.width = SQUARE_SIZE; 49 | 50 | function moveSquare() { 51 | var left = parseInt(square.style.left, 10); 52 | var top = parseInt(square.style.top, 10); 53 | var right = left + SQUARE_SIZE; 54 | var bottom = top + SQUARE_SIZE; 55 | 56 | switch (direction) { 57 | case 37: // left 58 | if (left > 0) { 59 | square.style.left = left - MOVEMENT_STEP + 'px'; 60 | } 61 | break; 62 | case 38: // up 63 | if (top > 0) { 64 | square.style.top = top - MOVEMENT_STEP + 'px'; 65 | } 66 | break; 67 | case 39: //right 68 | if (right < document.documentElement.clientWidth) { 69 | square.style.left = left + MOVEMENT_STEP + 'px'; 70 | } 71 | break; 72 | case 40: // down 73 | if (bottom < document.documentElement.clientHeight) { 74 | square.style.top = top + MOVEMENT_STEP + 'px'; 75 | } 76 | break; 77 | default: 78 | break; 79 | } 80 | requestAnimationFrame(moveSquare); 81 | } 82 | 83 | window.onkeydown = function (event) { 84 | if (event.keyCode >= 37 && event.keyCode <= 40) { // is an arrow key 85 | direction = event.keyCode; 86 | } 87 | }; 88 | 89 | // start the square animating 90 | requestAnimationFrame(moveSquare); 91 | 92 | }()); 93 | -------------------------------------------------------------------------------- /page.php: -------------------------------------------------------------------------------- 1 | (.*)<\/title>/', $file, $matches); 6 | $file = preg_replace('/(.*?)<\/title>/', '', $file); 7 | $title = $matches[1]; 8 | 9 | $manifest = ''; 10 | if ($request == 'offlineapp') { // specific change to support <html manifest=xyz> 11 | $manifest = ' manifest="html5demo.appcache"'; 12 | } 13 | 14 | include('includes/header.php'); 15 | echo $file; 16 | include('includes/footer.php'); 17 | } else { 18 | header("HTTP/1.0 404 Not Found"); 19 | echo 'File not found'; 20 | } 21 | 22 | ?> 23 | -------------------------------------------------------------------------------- /postmessage-target.html: -------------------------------------------------------------------------------- 1 | <!DOCTYPE html> 2 | <html> 3 | <head> 4 | <title>postMessage target 5 | 12 | 13 | 14 | This iframe is located on the same domain 15 |

    Send me a message!

    16 | 17 | 26 | 27 | -------------------------------------------------------------------------------- /server/custom-echo.js: -------------------------------------------------------------------------------- 1 | // slightly modified version of echo-server.js for the web-sockets demo 2 | 3 | var sys = require("sys") 4 | , fs = require("fs") 5 | , path = require("path") 6 | , http = require("http") 7 | , ws = require(__dirname + '/node-websocket-server/lib/ws'); 8 | 9 | /*----------------------------------------------- 10 | logging: 11 | -----------------------------------------------*/ 12 | var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 13 | 14 | function pad(n) { 15 | return n < 10 ? '0' + n.toString(10) : n.toString(10); 16 | } 17 | 18 | function timestamp() { 19 | var d = new Date(); 20 | return [ 21 | d.getDate(), 22 | months[d.getMonth()], 23 | [ pad(d.getHours()) 24 | , pad(d.getMinutes()) 25 | , pad(d.getSeconds()) 26 | , (d.getTime() + "").substr( - 4, 4) 27 | ].join(':') 28 | ].join(' '); 29 | }; 30 | 31 | function log(msg) { 32 | sys.puts(timestamp() + ' - ' + msg.toString()); 33 | }; 34 | 35 | function serveFile(req, res){ 36 | if( req.url.indexOf("favicon") > -1 ){ 37 | log("HTTP: inbound request, served nothing, (favicon)"); 38 | 39 | res.writeHead(200, {'Content-Type': 'image/x-icon'}); 40 | res.end(""); 41 | } else { 42 | log("HTTP: inbound request, served client.html"); 43 | 44 | res.writeHead(200, {'Content-Type': 'text/html'}); 45 | fs.createReadStream( path.normalize(path.join(__dirname, "client.html")), { 46 | 'flags': 'r', 47 | 'encoding': 'binary', 48 | 'mode': 0666, 49 | 'bufferSize': 4 * 1024 50 | }).addListener("data", function(chunk){ 51 | res.write(chunk, 'binary'); 52 | }).addListener("close",function() { 53 | res.end(); 54 | }); 55 | } 56 | }; 57 | 58 | /*----------------------------------------------- 59 | Spin up our server: 60 | -----------------------------------------------*/ 61 | var httpServer = http.createServer(serveFile); 62 | 63 | 64 | var connected = 0; 65 | var server = ws.createServer({ 66 | debug: true 67 | }, httpServer); 68 | 69 | server.addListener("listening", function(){ 70 | log("Listening for connections on " + process.ARGV[2]); 71 | }); 72 | 73 | // Handle WebSocket Requests 74 | server.addListener("connection", function(conn){ 75 | log("opened connection: "+conn.id); 76 | 77 | connected++; 78 | server.send(conn.id, connected+''); 79 | conn.broadcast(connected+''); 80 | 81 | conn.addListener("message", function(message){ 82 | log("<"+conn.id+"> "+message); 83 | conn.broadcast(message); 84 | }); 85 | }); 86 | 87 | server.addListener("close", function(conn){ 88 | log("closed connection: "+conn.id); 89 | connected--; 90 | conn.broadcast(connected+''); 91 | }); 92 | 93 | server.listen(parseInt(process.ARGV[2]) || 8000); 94 | // Handle HTTP Requests: 95 | 96 | // This will hijack the http server, if the httpserver doesn't 97 | // already respond to http.Server#request 98 | 99 | // server.addListener("request", serveFile); 100 | -------------------------------------------------------------------------------- /video-canvas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dizzy 6 | 13 | 14 | 15 | 19 |

    20 | 21 | 00:00 / 22 |

    23 | 24 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /www/assets/dizzy.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/www/assets/dizzy.mp4 -------------------------------------------------------------------------------- /www/assets/dizzy.ogv: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/www/assets/dizzy.ogv -------------------------------------------------------------------------------- /www/assets/dizzy.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/www/assets/dizzy.webm -------------------------------------------------------------------------------- /www/assets/remy-and-ellis2.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/www/assets/remy-and-ellis2.mp4 -------------------------------------------------------------------------------- /www/assets/remy-and-ellis2.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/www/assets/remy-and-ellis2.webm -------------------------------------------------------------------------------- /www/canvas-grad/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Canvas Gradient 6 | 18 | 19 | 20 | 21 | 65 | Fork me on GitHub 66 | 70 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /www/canvas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 Demo: Canvas 7 | 8 | 9 | 10 |
    11 | 12 |
    13 |

    Canvas

    14 |
    15 | 16 |
    17 | 79 | HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage 80 | 81 | 82 |
    83 | Fork me on GitHub 84 | 85 | 89 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /www/classlist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 Demo: Simple classList manipulation 7 | 8 | 9 | 10 |
    11 | 12 |
    13 |

    Simple classList manipulation

    14 |
    15 | 16 | 42 |
    43 |

    Clicking the buttons below will toggle the class on the bacon ipsum text below, assigning the class with the same name (styles seen below). This is done using the new classList API.

    44 |

    Not supported :(

    45 |
    <style> 
     46 |   .big { font-size: 30px; }
     47 |   .bold { font-weight: bold; }
     48 |   .pink { background: #FF5E99; color: #fff; }
     49 | </style>
    50 |

    Bacon ipsum dolor sit amet pancetta bresaola tenderloin, swine meatball tongue ham boudin t-bone ribeye jerky sausage. Pork loin cow shankle drumstick tri-tip, chicken venison strip steak.

    51 |

    Toggle a class: 52 | 53 | 54 | 55 |

    56 |
    57 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage 92 | 93 | 94 |
    95 | Fork me on GitHub 96 | 97 | 101 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /www/contenteditable/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 Demo: ContentEditable 7 | 8 | 9 | 10 |
    11 | 12 |
    13 |

    ContentEditable

    14 |
    15 | 16 |
    17 |
    18 |

    Any elements with the contenteditable 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.

    19 |
    20 |
    21 |

    Go ahead, edit away!

    22 |

    Here's a typical paragraph element

    23 |
      24 |
    1. and now a list
    2. 25 |
    3. with only
    4. 26 |
    5. three items
    6. 27 |
    28 |
    29 |
    30 | 31 |
    32 |
    33 | 56 | HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage 57 | 58 | 59 |
    60 | Fork me on GitHub 61 | 62 | 66 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /www/database/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 Demo: Web Database 7 | 8 | 9 | 10 |
    11 | 12 |
    13 |

    Web Database

    14 |
    15 | 16 | 59 |
    60 |
    61 |

    We're using the Web Database API to store my tweets, so there's no Twitter API hit on load.

    62 |

    In addition, I'm using the since_id when we make new requests, so I shouldn't be doubling up on tweets.

    63 |

    Status: ready

    64 |
    65 |
    66 |
      67 |
    1. None loaded up yet :-(
    2. 68 |
    69 |
    70 |
    71 | 72 | 73 | 74 |
    75 |
    76 | 77 | 93 | HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage 94 | 95 | 96 |
    97 | Fork me on GitHub 98 | 99 | 103 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /www/dataset/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 Demo: data-* 7 | 8 | 9 | 10 |
    11 | 12 |
    13 |

    data-*

    14 |
    15 | 29 | 30 |
    31 |
    32 |

    The data-[name] attribute on elements can now be accessed directly via the DOM using element.dataset.[attr].

    33 |

    Try openning the Web Console and editing element.dataset directly:
    element.dataset.foo = 'bar';

    34 |
    35 |

    Not connected

    36 |
    37 |
    This element has data
    38 | 39 | 40 | 41 |
    42 |
    [click buttons above to show element html]
    43 |
    44 | 88 | 89 | HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage 90 | 91 | 92 |
    93 | Fork me on GitHub 94 | 95 | 99 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /www/demos/canvas.html: -------------------------------------------------------------------------------- 1 | Canvas 2 |
    3 | -------------------------------------------------------------------------------- /www/demos/classlist.html: -------------------------------------------------------------------------------- 1 | Simple classList manipulation 2 | 28 |
    29 |

    Clicking the buttons below will toggle the class on the bacon ipsum text below, assigning the class with the same name (styles seen below). This is done using the new classList API.

    30 |

    Not supported :(

    31 |
    <style> 
    32 |   .big { font-size: 30px; }
    33 |   .bold { font-weight: bold; }
    34 |   .pink { background: #FF5E99; color: #fff; }
    35 | </style>
    36 |

    Bacon ipsum dolor sit amet pancetta bresaola tenderloin, swine meatball tongue ham boudin t-bone ribeye jerky sausage. Pork loin cow shankle drumstick tri-tip, chicken venison strip steak.

    37 |

    Toggle a class: 38 | 39 | 40 | 41 |

    42 |
    43 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /www/demos/contenteditable.html: -------------------------------------------------------------------------------- 1 | ContentEditable 2 |
    3 |
    4 |

    Any elements with the contenteditable 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.

    5 |
    6 |
    7 |

    Go ahead, edit away!

    8 |

    Here's a typical paragraph element

    9 |
      10 |
    1. and now a list
    2. 11 |
    3. with only
    4. 12 |
    5. three items
    6. 13 |
    14 |
    15 |
    16 | 17 |
    18 |
    19 | -------------------------------------------------------------------------------- /www/demos/database-rollback.html: -------------------------------------------------------------------------------- 1 | Web SQL Database - rollback test 2 | 46 |
    47 |
    48 |

    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'.

    49 |

    Status:

    50 |
    ready
    51 |
    52 |
    53 | -------------------------------------------------------------------------------- /www/demos/database.html: -------------------------------------------------------------------------------- 1 | Web Database 2 | 45 |
    46 |
    47 |

    We're using the Web Database API to store my tweets, so there's no Twitter API hit on load.

    48 |

    In addition, I'm using the since_id when we make new requests, so I shouldn't be doubling up on tweets.

    49 |

    Status: ready

    50 |
    51 |
    52 |
      53 |
    1. None loaded up yet :-(
    2. 54 |
    55 |
    56 |
    57 | 58 | 59 | 60 |
    61 |
    62 | 63 | -------------------------------------------------------------------------------- /www/demos/dataset.html: -------------------------------------------------------------------------------- 1 | 15 | data-* 16 |
    17 |
    18 |

    The data-[name] attribute on elements can now be accessed directly via the DOM using element.dataset.[attr].

    19 |

    Try openning the Web Console and editing element.dataset directly:
    element.dataset.foo = 'bar';

    20 |
    21 |

    Not connected

    22 |
    23 |
    This element has data
    24 | 25 | 26 | 27 |
    28 |
    [click buttons above to show element html]
    29 |
    30 | 74 | -------------------------------------------------------------------------------- /www/demos/drag.html: -------------------------------------------------------------------------------- 1 | Drag and drop 2 | 67 |
    68 |

    Drag the list items over the dustbin, and drop them to have the bin eat the item

    69 |
    70 | 77 |
    78 | 147 | -------------------------------------------------------------------------------- /www/demos/file-api-simple.html: -------------------------------------------------------------------------------- 1 | File API (simple) 2 |
    3 |

    File API & FileReader API not supported

    4 |

    5 |

    Select an image from your machine to read the contents of the file without using a server

    6 |
    7 |
    8 | 40 | -------------------------------------------------------------------------------- /www/demos/file-api.html: -------------------------------------------------------------------------------- 1 | File API 2 | 6 |
    7 |
    8 |

    File API & FileReader API not supported

    9 |

    Drag an image from your desktop on to the drop zone above to see the browser read the contents of the file and use it as the background - without uploading the file to any servers.

    10 |
    11 | 40 | -------------------------------------------------------------------------------- /www/demos/geo.html: -------------------------------------------------------------------------------- 1 | 2 | geolocation 3 | 4 |
    5 |

    Finding your location: checking...

    6 |
    7 | 58 | -------------------------------------------------------------------------------- /www/demos/gum.html: -------------------------------------------------------------------------------- 1 | getUserMedia streamed to a video element 2 | 24 |
    25 | 29 |

    getUserMeda either not supported or not allowed - so instead here's me and my son headbanging.

    30 |
    31 | 32 | 41 | -------------------------------------------------------------------------------- /www/demos/hidden.html: -------------------------------------------------------------------------------- 1 | Hidden 2 | 5 |
    6 |

    Welcome dear HTML5-er. You will be able to read this paragraph, but not the next. The next paragraph has the hidden property set on it. It's a boolean that uses the browsers own stylesheet to hide the element, which is nicer than having to dip in to the style properties in JavaScript.

    7 |

    Sadly, your browser doesn't support the hidden property. Useful when you want to quickly do element.hidden. Ah well, back to CSS.

    8 |
    9 | -------------------------------------------------------------------------------- /www/demos/history.html: -------------------------------------------------------------------------------- 1 | HTML5 History API 2 | 12 |
    13 |

    HTML5 History API not supported

    14 |

    Last event fired: (none)

    15 |

    To test the History API, click through the urls below. Note that none of these urls point to real pages. JavaScript will intercept these clicks, load data and the browser address bar will appear to change - but this is the History API in action!

    16 |

    Use the back and forward buttons in your browser to navigate the history.

    17 | 23 |

    Note: since these urls aren't real, refreshing the page will land on an invalid url.

    24 |
    25 |
    26 | -------------------------------------------------------------------------------- /www/demos/nav-online.html: -------------------------------------------------------------------------------- 1 | navigator.onLine testing 2 |
    3 |

    Current network status: checking...

    4 |

    A timer is constantly polling the navigator.onLine property, which is typically switched via File -> Work Offline

    5 |
    6 | -------------------------------------------------------------------------------- /www/demos/non-worker.html: -------------------------------------------------------------------------------- 1 | Non Worker 2 |
    3 |

    Canvas is running whilst an prime number finder runs - this will cause your browser to hang

    4 |

    Prime found: 0

    5 |
    6 |
    7 | 97 | -------------------------------------------------------------------------------- /www/demos/offline-events.html: -------------------------------------------------------------------------------- 1 | on/offline event capture 2 | 10 |
    11 |

    Test required here: File -> Work Offline - toggle the value and there should be three list items notifying of online and offline.

    12 | 17 |

    Note that the test shows that window.ononline and window.onoffline doesn't work (which I thought I had read in the specs somewhere...).

    18 |
    19 | -------------------------------------------------------------------------------- /www/demos/offline.html: -------------------------------------------------------------------------------- 1 | Online connectivity monitoring 2 |
    3 |

    Current network status: checking...

    4 |
      5 |
      6 | -------------------------------------------------------------------------------- /www/demos/offlineapp.html: -------------------------------------------------------------------------------- 1 | 2 | Offline Application: using manifest 3 | 4 |
      5 |

      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.

      6 |

      Status of cache:

      7 |

      checking...

      8 |

      9 |

      10 |
      11 | 40 | -------------------------------------------------------------------------------- /www/demos/postmessage.html: -------------------------------------------------------------------------------- 1 | postMessage (same domain) 2 | 8 |
      9 |
      10 |

      11 |

      12 |

      Target iframe:

      13 | 14 |
      15 |
      16 | -------------------------------------------------------------------------------- /www/demos/postmessage2.html: -------------------------------------------------------------------------------- 1 | postMessage (cross domain) 2 | 8 |
      9 |
      10 |

      11 |

      12 |

      Target iframe:

      13 | 14 |
      15 |
      16 | 31 | -------------------------------------------------------------------------------- /www/demos/storage-events.html: -------------------------------------------------------------------------------- 1 | Storage Events 2 | 19 |
      20 |
      21 |

      Directions: open multiple windows or tabs with this demo and change the text below.

      22 |

      The storage event triggers on the "blurred" windows, giving us a way to communicate across windows using localStorage.

      23 |
      24 |

      (this is only echoed on other windows)

      25 |

      Waiting for data via storage event...

      26 |
      27 |
      28 |
      29 | 45 | -------------------------------------------------------------------------------- /www/demos/storage.html: -------------------------------------------------------------------------------- 1 | Storage 2 | 14 |
      15 |
      16 |

      Values are stored on keyup

      17 |

      Content loaded from previous sessions:

      18 |
        19 |
        20 |
        21 |
        22 | 23 | 24 |
        25 |
        26 | 27 | 28 |
        29 | 30 |
        31 |
        32 | 75 | -------------------------------------------------------------------------------- /www/demos/template.html: -------------------------------------------------------------------------------- 1 | This is a template example 2 | 5 |
        6 |

        Instructions or related markup might should appear inside the <article> element, and code in the <script> below.

        7 |
        8 | -------------------------------------------------------------------------------- /www/demos/two-videos.html: -------------------------------------------------------------------------------- 1 | 11 | Two videos in sync 12 |
        13 | 17 | 21 |

        22 | 23 | 00:00 / loading... 24 | 25 |

        26 |

        This demo shows two videos running, which we're trying to run in sync. Moving the scrubber should scrub both videos.

        27 |
        28 | 104 | -------------------------------------------------------------------------------- /www/demos/video.html: -------------------------------------------------------------------------------- 1 | Video 2 |
        3 | 8 |

        9 | 10 | 00:00 / loading... 11 |

        12 |

        Video loaded: loading...

        13 |

        Note that (at time of writing) Webkit nightly supports full screen mode, which will add a button above.

        14 |
        15 | -------------------------------------------------------------------------------- /www/demos/web-socket.html: -------------------------------------------------------------------------------- 1 | Web Socket 2 | 21 |
        22 |
        23 | 24 |
        25 |

        Not connected

        26 |

        Users connected: 0

        27 |

        To test, open two windows with Web Socket support, type a message above and press return.

        28 |

        The server side code is available here: node-web-socket & server (note that it runs on nodejs)

        29 | 30 |
        31 | 104 | -------------------------------------------------------------------------------- /www/demos/worker.html: -------------------------------------------------------------------------------- 1 | Web Worker 2 | 28 |
        29 |

        This demo shows how main window animation isn't interrupted by Web Workers. Note that the animation does not work in Opera (due to lack of requestAnimationFrame support).

        30 |

        Use arrow keys to change the direction of the animated square. The square is animated with requestAnimationFrame.

        31 |
        32 |
        33 |
        34 |

        Click the button below to start or stop the worker.

        35 |
        36 |

        Messages from Worker:

        37 |
        38 | 39 |
        -------------------------------------------------------------------------------- /www/file-api-simple/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 Demo: File API (simple) 7 | 8 | 9 | 10 |
        11 | 12 |
        13 |

        File API (simple)

        14 |
        15 | 16 |
        17 |

        File API & FileReader API not supported

        18 |

        19 |

        Select an image from your machine to read the contents of the file without using a server

        20 |
        21 |
        22 | 54 | 55 | HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage 56 | 57 | 58 |
        59 | Fork me on GitHub 60 | 61 | 65 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /www/file-api/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 Demo: File API 7 | 8 | 9 | 10 |
        11 | 12 |
        13 |

        File API

        14 |
        15 | 16 | 20 |
        21 |
        22 |

        File API & FileReader API not supported

        23 |

        Drag an image from your desktop on to the drop zone above to see the browser read the contents of the file and use it as the background - without uploading the file to any servers.

        24 |
        25 | 54 | 55 | HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage 56 | 57 | 58 |
        59 | Fork me on GitHub 60 | 61 | 65 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /www/geo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 Demo: geolocation 7 | 8 | 9 | 10 |
        11 | 12 |
        13 |

        geolocation

        14 |
        15 | 16 | 17 | 18 |
        19 |

        Finding your location: checking...

        20 |
        21 | 72 | 73 | HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage 74 | 75 | 76 |
        77 | Fork me on GitHub 78 | 79 | 83 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /www/gum/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 Demo: getUserMedia streamed to a video element 7 | 8 | 9 | 10 |
        11 | 12 |
        13 |

        getUserMedia streamed to a video element

        14 |
        15 | 16 | 38 |
        39 | 43 |

        getUserMeda either not supported or not allowed - so instead here's me and my son headbanging.

        44 |
        45 | 46 | 55 | 56 | HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage 57 | 58 | 59 |
        60 | Fork me on GitHub 61 | 62 | 66 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /www/hidden/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 Demo: Hidden 7 | 8 | 9 | 10 |
        11 | 12 |
        13 |

        Hidden

        14 |
        15 | 16 | 19 |
        20 |

        Welcome dear HTML5-er. You will be able to read this paragraph, but not the next. The next paragraph has the hidden property set on it. It's a boolean that uses the browsers own stylesheet to hide the element, which is nicer than having to dip in to the style properties in JavaScript.

        21 |

        Sadly, your browser doesn't support the hidden property. Useful when you want to quickly do element.hidden. Ah well, back to CSS.

        22 |
        23 | 26 | HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage 27 | 28 | 29 |
        30 | Fork me on GitHub 31 | 32 | 36 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /www/images/bin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/www/images/bin.jpg -------------------------------------------------------------------------------- /www/images/browsers.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/www/images/browsers.gif -------------------------------------------------------------------------------- /www/images/ih5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/www/images/ih5.jpg -------------------------------------------------------------------------------- /www/images/learn-js.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/www/images/learn-js.jpg -------------------------------------------------------------------------------- /www/images/shade.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/www/images/shade.jpg -------------------------------------------------------------------------------- /www/images/terminal-training.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/www/images/terminal-training.png -------------------------------------------------------------------------------- /www/images/yourbrowser.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/html5demos/0a690a69d991ea30e0a894ae3b3c8961bf29c6c6/www/images/yourbrowser.gif -------------------------------------------------------------------------------- /www/js/gum.js: -------------------------------------------------------------------------------- 1 | var video = document.querySelector('video'); 2 | 3 | function gumSuccess(stream) { 4 | // window.stream = stream; 5 | if ('mozSrcObject' in video) { 6 | video.mozSrcObject = stream; 7 | } else if (window.webkitURL) { 8 | video.src = window.webkitURL.createObjectURL(stream); 9 | } else { 10 | video.src = stream; 11 | } 12 | video.play(); 13 | } 14 | 15 | function gumError(error) { 16 | console.error('Error on getUserMedia', error); 17 | } 18 | 19 | function gumInit() { 20 | navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; 21 | 22 | if (navigator.getUserMedia) { 23 | navigator.getUserMedia({video: true }, gumSuccess, gumError); 24 | } 25 | } 26 | 27 | gumInit(); -------------------------------------------------------------------------------- /www/js/h5utils-offline.js: -------------------------------------------------------------------------------- 1 | // For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/ 2 | (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])}})(); 3 | 4 | var addEvent = (function () { 5 | if (document.addEventListener) { 6 | return function (el, type, fn) { 7 | if (el.length) { 8 | for (var i = 0; i < el.length; i++) { 9 | addEvent(el[i], type, fn); 10 | } 11 | } else { 12 | el.addEventListener(type, fn, false); 13 | } 14 | }; 15 | } else { 16 | return function (el, type, fn) { 17 | if (el.length) { 18 | for (var i = 0; i < el.length; i++) { 19 | addEvent(el[i], type, fn); 20 | } 21 | } else { 22 | el.attachEvent('on' + type, function () { return fn.call(el, window.event); }); 23 | } 24 | }; 25 | } 26 | })(); 27 | 28 | -------------------------------------------------------------------------------- /www/js/h5utils.js: -------------------------------------------------------------------------------- 1 | // For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/ 2 | /*@cc_on'abbr article aside audio canvas details figcaption figure footer header hgroup mark menu meter nav output progress section summary time video'.replace(/\w+/g,function(n){document.createElement(n)})@*/ 3 | 4 | var addEvent = (function () { 5 | if (document.addEventListener) { 6 | return function (el, type, fn) { 7 | if (el && el.nodeName || el === window) { 8 | el.addEventListener(type, fn, false); 9 | } else if (el && el.length) { 10 | for (var i = 0; i < el.length; i++) { 11 | addEvent(el[i], type, fn); 12 | } 13 | } 14 | }; 15 | } else { 16 | return function (el, type, fn) { 17 | if (el && el.nodeName || el === window) { 18 | el.attachEvent('on' + type, function () { return fn.call(el, window.event); }); 19 | } else if (el && el.length) { 20 | for (var i = 0; i < el.length; i++) { 21 | addEvent(el[i], type, fn); 22 | } 23 | } 24 | }; 25 | } 26 | })(); 27 | 28 | (function () { 29 | 30 | var pre = document.createElement('pre'); 31 | pre.id = "view-source" 32 | 33 | // private scope to avoid conflicts with demos 34 | addEvent(window, 'click', function (event) { 35 | if (event.target.hash == '#view-source') { 36 | // event.preventDefault(); 37 | if (!document.getElementById('view-source')) { 38 | // pre.innerHTML = ('\n\n' + document.documentElement.innerHTML + '\n').replace(/[<>]/g, function (m) { return {'<':'<','>':'>'}[m]}); 39 | var xhr = new XMLHttpRequest(); 40 | 41 | // original source - rather than rendered source 42 | xhr.onreadystatechange = function () { 43 | if (this.readyState == 4 && this.status == 200) { 44 | pre.innerHTML = this.responseText.replace(/[<>]/g, function (m) { return {'<':'<','>':'>'}[m]}); 45 | prettyPrint(); 46 | } 47 | }; 48 | 49 | document.body.appendChild(pre); 50 | // really need to be sync? - I like to think so 51 | xhr.open("GET", location.origin + '/demos' + window.location.pathname.replace(/\/$/, '') + '.html', true); 52 | xhr.send(); 53 | } 54 | document.body.className = 'view-source'; 55 | 56 | var sourceTimer = setInterval(function () { 57 | if (window.location.hash != '#view-source') { 58 | clearInterval(sourceTimer); 59 | document.body.className = ''; 60 | } 61 | }, 200); 62 | } 63 | }); 64 | 65 | })(); 66 | -------------------------------------------------------------------------------- /www/js/worker-main.js: -------------------------------------------------------------------------------- 1 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50, browser: true */ 2 | /*global Worker */ 3 | 4 | (function () { 5 | "use strict"; 6 | 7 | var SQUARE_SIZE = 50; 8 | var MOVEMENT_STEP = 3; 9 | 10 | var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || 11 | window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 12 | 13 | 14 | // Set up the worker 15 | var running = false; 16 | var statusDiv = document.getElementById('status'); 17 | var button = document.getElementById('toggleWorker'); 18 | var worker = new Worker('../js/worker-cruncher.js'); // path is relative to the main HTML file 19 | worker.addEventListener('message', function (event) { 20 | var currentStatus = statusDiv.innerHTML; 21 | statusDiv.innerHTML = "

        " + event.data + "

        " + currentStatus; 22 | if (event.data === "Done!") { 23 | running = false; 24 | button.value = "start worker"; 25 | } 26 | }); 27 | 28 | button.onclick = function () { 29 | running = !running; 30 | if (running) { 31 | statusDiv.innerHTML = ""; 32 | button.value = "stop worker"; 33 | } else { 34 | button.value = "start worker"; 35 | } 36 | worker.postMessage(''); 37 | 38 | }; 39 | 40 | 41 | // Set up the animated square 42 | var square = document.getElementById('square'); 43 | var direction = 39; // right 44 | 45 | square.style.top = 0; 46 | square.style.left = '20px'; 47 | square.style.height = SQUARE_SIZE; 48 | square.style.width = SQUARE_SIZE; 49 | 50 | function moveSquare() { 51 | var left = parseInt(square.style.left, 10); 52 | var top = parseInt(square.style.top, 10); 53 | var right = left + SQUARE_SIZE; 54 | var bottom = top + SQUARE_SIZE; 55 | 56 | switch (direction) { 57 | case 37: // left 58 | if (left > 0) { 59 | square.style.left = left - MOVEMENT_STEP + 'px'; 60 | } 61 | break; 62 | case 38: // up 63 | if (top > 0) { 64 | square.style.top = top - MOVEMENT_STEP + 'px'; 65 | } 66 | break; 67 | case 39: //right 68 | if (right < document.documentElement.clientWidth) { 69 | square.style.left = left + MOVEMENT_STEP + 'px'; 70 | } 71 | break; 72 | case 40: // down 73 | if (bottom < document.documentElement.clientHeight) { 74 | square.style.top = top + MOVEMENT_STEP + 'px'; 75 | } 76 | break; 77 | default: 78 | break; 79 | } 80 | requestAnimationFrame(moveSquare); 81 | } 82 | 83 | window.onkeydown = function (event) { 84 | if (event.keyCode >= 37 && event.keyCode <= 40) { // is an arrow key 85 | direction = event.keyCode; 86 | } 87 | }; 88 | 89 | // start the square animating 90 | requestAnimationFrame(moveSquare); 91 | 92 | }()); 93 | -------------------------------------------------------------------------------- /www/nav-online/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 Demo: navigator.onLine testing 7 | 8 | 9 | 10 |
        11 | 12 |
        13 |

        navigator.onLine testing

        14 |
        15 | 16 |
        17 |

        Current network status: checking...

        18 |

        A timer is constantly polling the navigator.onLine property, which is typically switched via File -> Work Offline

        19 |
        20 | 28 | HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage 29 | 30 | 31 |
        32 | Fork me on GitHub 33 | 34 | 38 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /www/offline-events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 Demo: on/offline event capture 7 | 8 | 9 | 10 |
        11 | 12 |
        13 |

        on/offline event capture

        14 |
        15 | 16 | 24 |
        25 |

        Test required here: File -> Work Offline - toggle the value and there should be three list items notifying of online and offline.

        26 |
          27 |
        • via body "on" events:
        • 28 |
        • via window "on" events:
        • 29 |
        • via window.addEventListener:
        • 30 |
        31 |

        Note that the test shows that window.ononline and window.onoffline doesn't work (which I thought I had read in the specs somewhere...).

        32 |
        33 | 60 | HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage 61 | 62 | 63 |
        64 | Fork me on GitHub 65 | 66 | 70 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /www/offline/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 Demo: Online connectivity monitoring 7 | 8 | 9 | 10 |
        11 | 12 |
        13 |

        Online connectivity monitoring

        14 |
        15 | 16 |
        17 |

        Current network status: checking...

        18 |
          19 |
          20 | 34 | HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage 35 | 36 | 37 |
          38 | Fork me on GitHub 39 | 40 | 44 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /www/postmessage-target.html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | postMessage target 5 | 12 | 13 | 14 | This iframe is located on the same domain 15 |

          Send me a message!

          16 | 17 | 26 | 27 | -------------------------------------------------------------------------------- /www/postmessage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 Demo: postMessage (same domain) 7 | 8 | 9 | 10 |
          11 | 12 |
          13 |

          postMessage (same domain)

          14 |
          15 | 16 | 22 |
          23 |
          24 |

          25 |

          26 |

          Target iframe:

          27 | 28 |
          29 |
          30 | 47 | HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage 48 | 49 | 50 |
          51 | Fork me on GitHub 52 | 53 | 57 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /www/postmessage2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 Demo: postMessage (cross domain) 7 | 8 | 9 | 10 |
          11 | 12 |
          13 |

          postMessage (cross domain)

          14 |
          15 | 16 | 22 |
          23 |
          24 |

          25 |

          26 |

          Target iframe:

          27 | 28 |
          29 |
          30 | 45 | 46 | HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage 47 | 48 | 49 |
          50 | Fork me on GitHub 51 | 52 | 56 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /www/storage-events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 Demo: Storage Events 7 | 8 | 9 | 10 |
          11 | 12 |
          13 |

          Storage Events

          14 |
          15 | 16 | 33 |
          34 |
          35 |

          Directions: open multiple windows or tabs with this demo and change the text below.

          36 |

          The storage event triggers on the "blurred" windows, giving us a way to communicate across windows using localStorage.

          37 |
          38 |

          (this is only echoed on other windows)

          39 |

          Waiting for data via storage event...

          40 |
          41 |
          42 |
          43 | 59 | 60 | HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage 61 | 62 | 63 |
          64 | Fork me on GitHub 65 | 66 | 70 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /www/storage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 Demo: Storage 7 | 8 | 9 | 10 |
          11 | 12 |
          13 |

          Storage

          14 |
          15 | 16 | 28 |
          29 |
          30 |

          Values are stored on keyup

          31 |

          Content loaded from previous sessions:

          32 |
            33 |
            34 |
            35 |
            36 | 37 | 38 |
            39 |
            40 | 41 | 42 |
            43 | 44 |
            45 |
            46 | 89 | 90 | HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage 91 | 92 | 93 |
            94 | Fork me on GitHub 95 | 96 | 100 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /www/video-canvas/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dizzy 6 | 13 | 14 | 15 | 19 |

            20 | 21 | 00:00 / 22 |

            23 | 24 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /www/worker/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 Demo: Web Worker 7 | 8 | 9 | 10 |
            11 | 12 |
            13 |

            Web Worker

            14 |
            15 | 16 | 42 |
            43 |

            This demo shows how main window animation isn't interrupted by Web Workers. Note that the animation does not work in Opera (due to lack of requestAnimationFrame support).

            44 |

            Use arrow keys to change the direction of the animated square. The square is animated with requestAnimationFrame.

            45 |
            46 |
            47 |
            48 |

            Click the button below to start or stop the worker.

            49 |
            50 |

            Messages from Worker:

            51 |
            52 | 53 |
            54 | HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage 55 | 56 | 57 |
            58 | Fork me on GitHub 59 | 60 | 64 | 69 | 70 | 71 | --------------------------------------------------------------------------------