diff --git a/.htaccess b/.htaccess index 5eb6419..3407952 100644 --- a/.htaccess +++ b/.htaccess @@ -15,6 +15,8 @@ RewriteCond %{REQUEST_FILENAME} -f RewriteRule .* - [L] RewriteCond %{REQUEST_FILENAME}.html -f -RewriteRule (.*) $1.html [L] +RewriteRule (.*) $1.html [QSA,L] + +RewriteRule ^(.*)$ page.php [QSA,L] diff --git a/canvas-grad.html b/canvas-grad.html index fc23353..2bdf3f4 100644 --- a/canvas-grad.html +++ b/canvas-grad.html @@ -62,5 +62,16 @@ if (canvas.getContext('2d')) { }; } +Fork me on GitHub + + + \ No newline at end of file diff --git a/canvas.html b/canvas.html deleted file mode 100644 index 1bfa87b..0000000 --- a/canvas.html +++ /dev/null @@ -1,143 +0,0 @@ - - - - -HTML5 Demo: canvas - - - - -
-
-

Canvas

-
-
- -
- - - - - - diff --git a/contenteditable.html b/contenteditable.html deleted file mode 100644 index b7b8e4c..0000000 --- a/contenteditable.html +++ /dev/null @@ -1,130 +0,0 @@ - - - - -HTML5 Demo: contenteditable - - - - -
-
-
-
-

ContentEditable

-
-

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.

-

Note that since Opera doesn't support storage, the changes won't save.

-
-
-

Go ahead, edit away!

-

Here's a typical paragraph element

-
    -
  1. and now a list
    2. -
  2. with only
    3. -
  3. three items
    4. -
-
-
- -
-
- -
- - - - - \ No newline at end of file diff --git a/css/html5demos.css b/css/html5demos.css new file mode 100644 index 0000000..23dee96 --- /dev/null +++ b/css/html5demos.css @@ -0,0 +1,133 @@ +body { + font: normal 16px/20px Helvetica, sans-serif; + background: rgb(237, 237, 236); + margin: 0; + margin-top: 40px; + padding: 0; +} + +section, header, footer { + display: block; +} + +#wrapper { + width: 600px; + margin: 0 auto; + background: #fff url(/images/shade.jpg) repeat-x center bottom; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; + border-top: 1px solid #fff; + padding-bottom: 76px; +} + +h1 { + padding-top: 10px; +} + +h2 { + font-size: 100%; + font-style: italic; +} + +header, +article > *, +footer > * { + margin: 20px; +} + +footer > * { + margin: 20px; + color: #999; +} + +#status { + padding: 5px; + color: #fff; + background: #ccc; +} + +#status.fail { + background: #c00; +} + +#status.success { + background: #0c0; +} + +#status.offline { + background: #c00; +} + +#status.online { + background: #0c0; +} + +footer #built:hover:after { + content: '...quickly'; +} + +[contenteditable]:hover { + outline: 1px dotted #ccc; +} + +abbr { + border-bottom: 0; +} + +abbr[title] { + border-bottom: 1px dotted #ccc; +} + +li { + margin-bottom: 10px; +} + +#ffad { + font-size: 90%; + border: 1px solid #ccc; + background: #fcfcfc; + display: block; + -moz-border-radius-topleft: 25px; + -webkit-border-top-left-radius: 25px; + -moz-border-radius-bottomright: 25px; + -webkit-border-bottom-right-radius: 25px; + border-top-left-radius: 25px; + border-bottom-right-radius: 25px; + color: #000; + text-decoration: none; +} + +#ffad:hover { + border-color: #919191; +} + +#ffad section { + padding: 20px; +} + +#ffad p { + margin: 10px 10px 10px 100px; +} + +#ffad img { + border: 0; + float: left; + display: block; + margin: 14px 14px 0; +} + +#ffad .definition { + font-style: italic; + font-family: Georgia,Palatino,Palatino Linotype,Times,Times New Roman,serif; +} + +#ffad .url { + text-decoration: underline; +} + +input { + font-size: 16px; + padding: 3px; + margin-left: 5px; +} \ No newline at end of file diff --git a/database.html b/database.html deleted file mode 100644 index f56c3b5..0000000 --- a/database.html +++ /dev/null @@ -1,153 +0,0 @@ - - - - -HTML5 Demo: Web Database - - - - -
-
-
-
-

Web Database

-
-

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

-

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

-

Status: ready

-
-
-
    -
  1. None loaded up yet :-(
    2. -
-
-
- - - -
-
- -
- - - - - - \ No newline at end of file diff --git a/demos/canvas.html b/demos/canvas.html new file mode 100644 index 0000000..460e883 --- /dev/null +++ b/demos/canvas.html @@ -0,0 +1,64 @@ +Canvas +
+ \ No newline at end of file diff --git a/demos/contenteditable.html b/demos/contenteditable.html new file mode 100644 index 0000000..d0af314 --- /dev/null +++ b/demos/contenteditable.html @@ -0,0 +1,41 @@ +ContentEditable +
+
+

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.

+
+
+

Go ahead, edit away!

+

Here's a typical paragraph element

+
    +
  1. and now a list
    2. +
  2. with only
    3. +
  3. three items
    4. +
+
+
+ +
+
+ \ No newline at end of file diff --git a/database-rollback.html b/demos/database-rollback.html similarity index 59% rename from database-rollback.html rename to demos/database-rollback.html index 039329c..abeda62 100644 --- a/database-rollback.html +++ b/demos/database-rollback.html @@ -1,69 +1,15 @@ - - - - -HTML5 Demo: Web Database +Web SQL Database - rollback test - - - -
-
-

Web SQL Database - rollback test

-

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

Status:

ready
- -
- - - - \ No newline at end of file + \ No newline at end of file diff --git a/demos/database.html b/demos/database.html new file mode 100644 index 0000000..6aacf2a --- /dev/null +++ b/demos/database.html @@ -0,0 +1,78 @@ +Web Database + +
+
+

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

+

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

+

Status: ready

+
+
+
    +
  1. None loaded up yet :-(
    2. +
+
+
+ + + +
+
+ + \ No newline at end of file diff --git a/drag-anything.html b/demos/drag-anything.html similarity index 73% rename from drag-anything.html rename to demos/drag-anything.html index 2b50101..0fd557b 100644 --- a/drag-anything.html +++ b/demos/drag-anything.html @@ -1,58 +1,5 @@ - - - - -HTML5 Demo: Simple Drag and Drop +Simple Drag and Drop - - - -
-
-

Simple Drag and Drop

-

Instructions: grab anything and drag it in to the drop zone below. I've included some text below, but you can drag urls, bookmarklets, files, anything.

Check out the functionality in different browsers, because the same content appears differently when dropped. Something to watch out for in the future.

Change the options below to see the difference between the default Text and sniffing for data (not supported in IE I'm affriad).

+

Try also dropping a few files from your desktop on the drop zone and notice the content-type: text/uri-list

@@ -123,8 +64,6 @@ label {

Drop here for info about the dragged item

- -
- - - - \ No newline at end of file + \ No newline at end of file diff --git a/demos/geo.html b/demos/geo.html new file mode 100644 index 0000000..6a58d9b --- /dev/null +++ b/demos/geo.html @@ -0,0 +1,57 @@ + +geolocation + +
+

Finding your location: checking...

+
+ \ No newline at end of file diff --git a/non-worker.html b/demos/non-worker.html similarity index 59% rename from non-worker.html rename to demos/non-worker.html index ffa7efc..7e37044 100644 --- a/non-worker.html +++ b/demos/non-worker.html @@ -1,72 +1,9 @@ - - - - -HTML5 Demo: worker reference point - - - -
-
-

Non Worker (for reference)

-
+ Non Worker

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

Prime found: 0

- -
- - - - - diff --git a/demos/offline.html b/demos/offline.html new file mode 100644 index 0000000..a742bc0 --- /dev/null +++ b/demos/offline.html @@ -0,0 +1,18 @@ +Online connectivity monitoring +
+

Current network status: checking...

+
+ \ No newline at end of file diff --git a/offlineapp.html b/demos/offlineapp.html similarity index 59% rename from offlineapp.html rename to demos/offlineapp.html index 346defa..662f0a3 100644 --- a/offlineapp.html +++ b/demos/offlineapp.html @@ -1,79 +1,6 @@ - - - - -HTML5 Demo: offline app (v15) - - - - -
-
-

Offline Application: using manifest

-
+Offline Application: using manifest +

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.

Status of cache:

@@ -81,8 +8,6 @@ footer > * {

- -
- - - - diff --git a/demos/postmessage.html b/demos/postmessage.html new file mode 100644 index 0000000..0881980 --- /dev/null +++ b/demos/postmessage.html @@ -0,0 +1,32 @@ +postMessage (same domain) + +
+
+

+

+

Target iframe:

+ +
+
+ \ No newline at end of file diff --git a/demos/postmessage2.html b/demos/postmessage2.html new file mode 100644 index 0000000..e3cf9a0 --- /dev/null +++ b/demos/postmessage2.html @@ -0,0 +1,30 @@ +postMessage (cross domain) + +
+
+

+

+

Target iframe:

+ +
+
+ \ No newline at end of file diff --git a/demos/storage.html b/demos/storage.html new file mode 100644 index 0000000..4758e54 --- /dev/null +++ b/demos/storage.html @@ -0,0 +1,74 @@ +Storage + +
+
+

Values are stored on keyup

+

Content loaded from previous sessions:

+ +
+
+
+ + +
+
+ + +
+ +
+
+ diff --git a/demos/video.html b/demos/video.html new file mode 100644 index 0000000..b80fb60 --- /dev/null +++ b/demos/video.html @@ -0,0 +1,74 @@ +Video +
+ +

+ + 00:00 / loading... +

+

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

+
+ \ No newline at end of file diff --git a/worker.html b/demos/worker.html similarity index 56% rename from worker.html rename to demos/worker.html index 9356974..8b69b7d 100644 --- a/worker.html +++ b/demos/worker.html @@ -1,78 +1,14 @@ - - - - -HTML5 Demo: Worker - - - -
-
-

Worker

-
+Worker

Canvas is running whilst an prime number finder runs in a worker

Prime found: 0

- -
- - - - - diff --git a/drag.html b/drag.html index 341cebc..06419b4 100644 --- a/drag.html +++ b/drag.html @@ -1,8 +1,8 @@ - + - -HTML5 Drag and drop demonstration + +Drag and drop +
@@ -152,14 +153,14 @@ li.over { }); - - + + diff --git a/geo.html b/geo.html deleted file mode 100644 index dc7b0e2..0000000 --- a/geo.html +++ /dev/null @@ -1,142 +0,0 @@ - - - - - -HTML5 Demo: geolocation - - - - - -
-
-

Geolocation

-
-
-

Finding your location: checking...

-
- -
- - - - - \ No newline at end of file diff --git a/html5demo.manifest b/html5demo.manifest index 44f1502..1e25a2d 100644 --- a/html5demo.manifest +++ b/html5demo.manifest @@ -5,4 +5,4 @@ CACHE MANIFEST CACHE: images/shade.jpg images/bin.jpg -h5utils-offline.js +/js/h5utils-offline.js diff --git a/includes/footer.php b/includes/footer.php new file mode 100644 index 0000000..26373cb --- /dev/null +++ b/includes/footer.php @@ -0,0 +1,14 @@ + + +Fork me on GitHub + + + + diff --git a/includes/header.php b/includes/header.php new file mode 100644 index 0000000..fff8318 --- /dev/null +++ b/includes/header.php @@ -0,0 +1,13 @@ + +> + + +HTML5 Demo: <?=$title?> + + + + +
+
+

+
\ No newline at end of file diff --git a/index.html b/index.html index c5e630b..2dc54a3 100644 --- a/index.html +++ b/index.html @@ -3,124 +3,8 @@ -HTML 5 Demos and Examples - - +HTML5 Demos and Examples +
diff --git a/cruncher.js b/js/cruncher.js similarity index 100% rename from cruncher.js rename to js/cruncher.js diff --git a/h5utils-offline.js b/js/h5utils-offline.js similarity index 100% rename from h5utils-offline.js rename to js/h5utils-offline.js diff --git a/h5utils.js b/js/h5utils.js similarity index 100% rename from h5utils.js rename to js/h5utils.js diff --git a/jquery.js b/js/jquery.js similarity index 100% rename from jquery.js rename to js/jquery.js diff --git a/tweets.js b/js/tweets.js similarity index 100% rename from tweets.js rename to js/tweets.js diff --git a/worker.js b/js/worker.js similarity index 100% rename from worker.js rename to js/worker.js diff --git a/offline.html b/offline.html deleted file mode 100644 index efe5427..0000000 --- a/offline.html +++ /dev/null @@ -1,107 +0,0 @@ - - - - -HTML5 Demo: online connectivity monitoring - - - - - -
-
-

Connectivity Monitoring

-
-
-

Current network status: checking...

-
- -
- - - - \ No newline at end of file diff --git a/page.php b/page.php new file mode 100644 index 0000000..1bd4ab0 --- /dev/null +++ b/page.php @@ -0,0 +1,22 @@ +(.*)<\/title>/', $file, $matches); + $file = preg_replace('/(.*?)<\/title>/', '', $file); + $title = $matches[1]; + + $manifest = ''; + if ($request == 'offlineapp') { // specific change to support <html manifest=xyz> + $manifest = ' manifest="html5demo.manifest"'; + } + + include('includes/header.php'); + echo $file; + include('includes/footer.php'); +} else { + header("HTTP/1.0 404 Not Found"); + echo 'File not found'; +} + +?> \ No newline at end of file diff --git a/postmessage-target.html b/postmessage-target.html index b62189f..d2f373a 100644 --- a/postmessage-target.html +++ b/postmessage-target.html @@ -1,7 +1,7 @@ <!DOCTYPE html> <html> <head> -<title>.postMessage target +postMessage target - - - -
-
-

Same Domain postMessage

-
-
-
-

-

-

Target iframe:

- -
-
- -
- - - - - \ No newline at end of file diff --git a/postmessage2.html b/postmessage2.html deleted file mode 100644 index 6d31f51..0000000 --- a/postmessage2.html +++ /dev/null @@ -1,116 +0,0 @@ - - - - -HTML5 Demo: postMessage (cross domain) - - - - -
-
-

Cross Domain postMessage

-
-
-
-

-

-

Target iframe:

- -
-
- -
- - - - - \ No newline at end of file diff --git a/storage.html b/storage.html deleted file mode 100644 index 004e8cf..0000000 --- a/storage.html +++ /dev/null @@ -1,148 +0,0 @@ - - - - -HTML5 Demo: storage - - - - -
-
-

Storage

-
-
-
-

Values are stored on keyup

-

Content loaded from previous sessions:

-
    -
    -
    -
    - - -
    -
    - - -
    - -
    -
    - -
    - - - - - diff --git a/video-canvas.html b/video-canvas.html index c56ae33..5ee4d11 100644 --- a/video-canvas.html +++ b/video-canvas.html @@ -20,7 +20,7 @@ p { margin-top: 20px;} 00:00 /

    - + - - - - - \ No newline at end of file