├── .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 |
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.
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.
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'.
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.
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.
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.
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.
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 |
3 | 