Rhino, sent with FormData, retrieved back and shown through a data URL.
27 |
├── README ├── battery ├── css │ └── base.css ├── index.html └── js │ └── base.js ├── camera-api ├── css │ └── base.css ├── index.html └── js │ └── base.js ├── fullscreen ├── css │ └── base.css ├── index-high-content.html ├── index.html └── js │ └── base.js ├── fxosapp-old ├── css │ └── base.css ├── images │ ├── logo128.png │ ├── logo16.png │ ├── logo32.png │ ├── logo48.png │ └── logo64.png ├── index.html ├── js │ ├── base.js │ └── webapp.js └── manifest.webapp ├── getusermedia ├── css │ └── base.css ├── index.html └── js │ └── base.js ├── html5 ├── book-test │ ├── offline.css │ ├── online.css │ ├── test.html │ └── test.manifest ├── canvas │ ├── canvas-demo.html │ ├── the-cure.html │ └── view.jpg ├── css │ └── base.css ├── data-attributes │ └── data-attributes.html ├── fileapi-upload │ ├── fileapi-upload-firefox-stuff.html │ ├── fileapi-upload.html │ └── upload │ │ └── upload.php ├── fileapi │ └── fileapi.html ├── forms │ ├── HTML5-Forms-Robert-Nyman.html │ ├── HTML5-Forms-Robert-Nyman.txt │ ├── HTML5-Forms-Robert-Nyman.zip │ ├── ala.html │ ├── attributes.html │ ├── elements.html │ ├── input-types.html │ ├── styling.html │ ├── validation.html │ └── validity.html ├── geolocation │ ├── current-location-and-directions.html │ └── current-location.html ├── history-api │ └── history-api.html ├── html5-simple-example.html ├── images │ ├── firefox-faded.png │ ├── firefox.png │ ├── google-chrome-faded.png │ ├── google-chrome.png │ ├── ie-faded.png │ ├── ie.png │ ├── opera-faded.png │ ├── opera.png │ ├── safari-faded.png │ └── safari.png ├── index.html ├── js │ ├── html5.js │ └── shHTMLJavaScript.js ├── offline │ ├── base.css │ ├── offline.appcache │ ├── offline.css │ ├── offline.html │ ├── offline.manifest │ ├── online-offline-events.html │ ├── online-offline-polling.html │ └── online.css ├── postMessage │ ├── postMessage.html │ └── postMessageTarget.html ├── postMessageTest │ ├── postMessage.html │ └── postMessageTarget.html ├── svg │ ├── circle.svg │ ├── raphael.js │ ├── svg.html │ ├── svg.xhtml │ └── view.jpg ├── syntax-highlighter │ ├── scripts │ │ ├── clipboard.swf │ │ ├── shBrushBash.js │ │ ├── shBrushCSharp.js │ │ ├── shBrushCpp.js │ │ ├── shBrushCss.js │ │ ├── shBrushDelphi.js │ │ ├── shBrushDiff.js │ │ ├── shBrushGroovy.js │ │ ├── shBrushJScript.js │ │ ├── shBrushJava.js │ │ ├── shBrushPerl.js │ │ ├── shBrushPhp.js │ │ ├── shBrushPlain.js │ │ ├── shBrushPython.js │ │ ├── shBrushRuby.js │ │ ├── shBrushScala.js │ │ ├── shBrushSql.js │ │ ├── shBrushVb.js │ │ ├── shBrushXml.js │ │ ├── shCore.js │ │ ├── shHTML.js │ │ ├── shHTMLJavaScript.gz.js │ │ ├── shHTMLJavaScript.js │ │ ├── shJavaScript.gz.js │ │ ├── shJavaScript.js │ │ └── shLegacy.js │ └── styles │ │ ├── help.png │ │ ├── magnifier.png │ │ ├── page_white_code.png │ │ ├── page_white_copy.png │ │ ├── printer.png │ │ ├── shBase.css │ │ ├── shCore.css │ │ ├── shThemeDefault.css │ │ ├── shThemeDjango.css │ │ ├── shThemeEmacs.css │ │ ├── shThemeFadeToGrey.css │ │ ├── shThemeMidnight.css │ │ ├── shThemeRDark.css │ │ └── wrapping.png ├── video-adv │ ├── swedish-flag.mp4 │ ├── swedish-flag.ogv │ └── video.html ├── video │ ├── swedish-flag.mp4 │ ├── swedish-flag.ogv │ ├── video-demo copy.html │ └── video-demo.html ├── webstorage │ └── webStorage.html └── webworkers │ ├── webWorkers.html │ └── worker.js ├── html5demos ├── canvas-drag-n-drop │ ├── css │ │ └── base.css │ ├── index.html │ ├── js │ │ └── cure.js │ └── robert-nyman.jpg ├── formdata │ ├── css │ │ └── base.css │ ├── getfile.php │ ├── index.html │ ├── js │ │ └── base.js │ └── rhino.png ├── forms │ ├── attributes.html │ ├── css │ │ └── base.css │ ├── elements.html │ ├── input-types.html │ ├── styling.html │ └── validation.html ├── html │ ├── css │ │ └── base.css │ ├── elephant.jpg │ ├── index.html │ └── js │ │ └── base.js ├── indexeddb │ ├── css │ │ └── base.css │ ├── elephant.png │ ├── index.html │ └── js │ │ └── base.js ├── localstorage │ ├── css │ │ └── base.css │ ├── elephant.png │ ├── index.html │ ├── js │ │ └── base.js │ └── rhino.png └── video-css3-svg │ ├── index.html │ ├── nasa.mp4 │ └── nasa.webm ├── matchmedia ├── css │ └── base.css ├── index.html └── js │ └── base.js ├── mozilla ├── apps │ ├── TweetView │ │ ├── css │ │ │ └── base.css │ │ ├── index.html │ │ ├── manifest.webapp │ │ └── manifest.webapp.php │ ├── abbainfo │ │ ├── band.html │ │ ├── css │ │ │ └── base.css │ │ ├── hits.html │ │ ├── images │ │ │ ├── icon-128.png │ │ │ ├── icon-16.png │ │ │ ├── icon-48.png │ │ │ ├── icon.psd │ │ │ └── logo.png │ │ ├── index.html │ │ ├── js │ │ │ └── base.js │ │ └── manifest.webapp │ ├── css │ │ └── base.css │ ├── include.complete.js │ └── index.html └── dashboard │ ├── css │ └── base.css │ ├── images │ ├── battery.png │ ├── browserquest.png │ ├── geolocation.png │ ├── gnome.png │ ├── hahlo.png │ ├── minegl.png │ ├── mozilla-tab.png │ ├── notification.png │ ├── orientation.png │ ├── original │ │ ├── battery.png │ │ ├── browserquest.png │ │ ├── geolocation.png │ │ ├── gnome.png │ │ ├── hahlo.png │ │ ├── minegl.png │ │ ├── notification.png │ │ ├── orientation.png │ │ ├── runfield.png │ │ ├── vibration.png │ │ └── webcam.png │ ├── runfield.png │ ├── vibration.png │ └── webcam.png │ └── index.html ├── telephone-sms ├── css │ └── base.css ├── index.html └── js │ └── telephone-sms.js ├── twitter ├── css │ └── base.css └── index.html ├── vibration ├── css │ └── base.css ├── index.html └── js │ └── base.js └── webapi ├── css └── webapis.css ├── index.html └── js └── webapis.js /README: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/README -------------------------------------------------------------------------------- /battery/css/base.css: -------------------------------------------------------------------------------- 1 | /* General font styles */ 2 | html { 3 | font: 100%/1.3 Verdana, Helvetica, Arial, sans-serif; 4 | height: 100%; 5 | } 6 | 7 | body { 8 | font: 70%/1.3 Verdana, Helvetica, Arial, sans-serif; 9 | } 10 | 11 | h1 { 12 | font: bold 2em Arial, sans-serif; 13 | } 14 | 15 | h2 { 16 | font: bold 1.5em Arial, sans-serif; 17 | } 18 | 19 | h3 { 20 | font: bold 1.25em Arial, sans-serif; 21 | } 22 | 23 | h4 { 24 | font: bold 1.1em Arial, sans-serif; 25 | } 26 | 27 | /* Default resetting */ 28 | html, body, form, fieldset, legend, dt, dd { 29 | margin: 0; 30 | padding: 0; 31 | } 32 | 33 | h1, h2, h3, h4, h5, h6, p, ul, ol, dl { 34 | margin: 0 0 1em; 35 | padding: 0; 36 | } 37 | 38 | h1, h2, h3, h4, h5, h6 { 39 | margin-bottom: 0.5em; 40 | } 41 | 42 | h2 { 43 | margin-top: 20px; 44 | } 45 | 46 | pre { 47 | font-size: 1.5em; 48 | } 49 | 50 | li, dd { 51 | margin-left: 1.5em; 52 | } 53 | 54 | img { 55 | border: none; 56 | vertical-align: middle; 57 | } 58 | 59 | /* Basic element styles */ 60 | a { 61 | color: #000; 62 | } 63 | 64 | a:hover { 65 | text-decoration: underline; 66 | } 67 | 68 | html { 69 | color: #000; 70 | min-height: 100%; 71 | } 72 | 73 | body { 74 | min-height: 100%; 75 | background-image: -moz-linear-gradient(top, #ccc, #fff); 76 | background-image: -webkit-linear-gradient(top, #ccc, #fff); 77 | padding-top: 20px; 78 | } 79 | 80 | 81 | body { 82 | margin-bottom: 30px; 83 | } 84 | 85 | ul { 86 | margin: 10px 0; 87 | } 88 | 89 | 90 | /* Structure */ 91 | .container { 92 | width: 560px; 93 | min-height: 600px; 94 | background: #fff; 95 | border: 1px solid #ccc; 96 | border-top: none; 97 | margin: 0 auto; 98 | padding: 20px; 99 | -moz-border-radius: 10px; 100 | -webkit-border-radius: 10px; 101 | border-radius: 10px; 102 | -moz-box-shadow: 1px 1px 10px #000; 103 | -webkit-box-shadow: 1px 1px 5px #000; 104 | box-shadow: 1px 1px 10px #000; 105 | } 106 | 107 | @media screen and (max-width: 320px) { 108 | #container { 109 | width: 280px; 110 | padding: 10px; 111 | } 112 | } 113 | 114 | button { 115 | display: block; 116 | margin-bottom: 20px; 117 | } 118 | 119 | #battery-supported { 120 | color: #f00; 121 | } 122 | 123 | .footer { 124 | border-top: 1px solid #000; 125 | margin-top: 30px; 126 | padding-top: 10px; 127 | } 128 | -------------------------------------------------------------------------------- /battery/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 |A demo of the Battery API
18 | 19 | 20 | 21 |Battery level is
22 | 23 |Battery status is charging
24 | 25 |Battery will be fully charged in minutes.
26 | 27 |Battery will be discharged in minutes.
28 | 29 | 30 |A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).
16 | 17 |18 | 19 |
20 | 21 |
23 |
24 |
A demo of the Fullscreen API, currently implemented in Firefox, Google Chrome, Safari, Opera, and IE 11+. Click this button to make the web site go full screen:
19 | 20 |21 | 22 | 23 |
24 | 25 |Fullscreen state: I'm not fullscreen
26 |The background should also turn red when in fullscreen.
27 | 28 | 29 | 30 | 35 | 36 | 37 |You can also make just a certain element fullscreen. For instance, a video:
39 | 40 | 41 | 45 | 46 | 47 | 48 |Video taken from archive.org.
49 |All the code is available in the Fullscreen repository on GitHub.
52 |A demo of the Fullscreen API, currently implemented in Firefox, Google Chrome, Safari, Opera, and IE 11+. Click this button to make the web site go full screen:
19 | 20 |21 | 22 | 23 |
24 | 25 |Fullscreen state: I'm not fullscreen
26 |The background should also turn red when in fullscreen.
27 | 28 | 29 | 30 | 35 | 36 | 37 |You can also make just a certain element fullscreen. For instance, a video:
39 | 40 | 41 | 45 | 46 | 47 | 48 |Video taken from archive.org.
49 |All the code is available in the Fullscreen repository on GitHub.
52 |A demo of getUserMedia, currently implemented in Firefox, Google Chrome and Opera. Choose to stream live from your device's camera.
16 | 17 |19 | 20 |
21 | 22 | 23 | 24 |Connected?
26 | 27 |Use the History API to push and replace entries in the user's web browser history.
26 |64 | (function () { 65 | var historyLinks = document.getElementById("history-links"); 66 | if (typeof history.pushState !== "undefined") { 67 | historyLinks.addEventListener("click", function (evt) { 68 | var target = evt.target; 69 | if (/^a$/i.test(target.nodeName)) { 70 | var url = target.href, 71 | title = target.innerHTML, 72 | state = { 73 | address : url 74 | }; 75 | 76 | window.history.pushState(state, title, url); 77 | evt.preventDefault(); 78 | } 79 | }, false); 80 | } 81 | else { 82 | historyLinks.className = "no-support"; 83 | historyLinks.innerHTML = "History API not supported in your web browser"; 84 | } 85 | })(); 86 |87 |
Saves the necessary files offline, in case of a lost connection. The green bar will turn red then there's no Internet connection.
21 |Uses <html manifest="offline.manifest"> and the offline.appcache file to make it happen.
22 |Connectivity
28 | 29 |Checking if the user is online/offline by polling the navigator.onLine
property.
Works well in Firefox and Opera with the Work Offline option in the File menu, but not by pulling the ethernet cable. Internet Explorer, however, seems to support actual disconnecting from the Internet too.
28 |58 | (function () { 59 | setInterval(function () { 60 | var displayOnlineStatus = document.getElementById("online-status"), 61 | isOnline = navigator.onLine; 62 | if (isOnline) { 63 | displayOnlineStatus.innerHTML = "Online"; 64 | displayOnlineStatus.className = "online"; 65 | } 66 | else { 67 | displayOnlineStatus.innerHTML = "Offline"; 68 | displayOnlineStatus.className = "offline"; 69 | } 70 | }, 1000); 71 | })(); 72 |73 |
Using postMessage to post messages between windows & iframes.
40 |53 | window.onload = function () { 54 | var iframeWin = document.getElementById("da-iframe").contentWindow, 55 | form = document.getElementById("the-form"), 56 | myMessage = document.getElementById("my-message"); 57 | 58 | myMessage.select(); 59 | 60 | form.onsubmit = function () { 61 | iframeWin.postMessage(myMessage.value, "http://robertnyman.com"); 62 | return false; 63 | }; 64 | }; 65 |66 | 67 |
69 | function displayMessage (evt) { 70 | var message; 71 | if (evt.origin !== "http://robertnyman.com") { 72 | message = "You are not worthy"; 73 | } 74 | else { 75 | message = "I got " + evt.data + " from " + evt.origin; 76 | } 77 | document.getElementById("received-message").innerHTML = message; 78 | } 79 | 80 | if (window.addEventListener) { 81 | // For standards-compliant web browsers 82 | window.addEventListener("message", displayMessage, false); 83 | } 84 | else { 85 | window.attachEvent("onmessage", displayMessage); 86 | } 87 |88 |
I've heard nothing yet
37 | 38 | 39 | -------------------------------------------------------------------------------- /html5/postMessageTest/postMessage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |Using postMessage to post messages between windows & iframes.
40 |53 | window.onload = function () { 54 | var iframeWin = document.getElementById("da-iframe").contentWindow, 55 | form = document.getElementById("the-form"), 56 | myMessage = document.getElementById("my-message"); 57 | 58 | myMessage.select(); 59 | 60 | form.onsubmit = function () { 61 | iframeWin.postMessage(myMessage.value, "http://robertnyman.com"); 62 | return false; 63 | }; 64 | }; 65 |66 | 67 |
69 | function displayMessage (evt) { 70 | var message; 71 | if (evt.origin !== "http://robertnyman.com") { 72 | message = "You are not worthy"; 73 | } 74 | else { 75 | message = "I got " + evt.data + " from " + evt.origin; 76 | } 77 | document.getElementById("received-message").innerHTML = message; 78 | } 79 | 80 | if (window.addEventListener) { 81 | // For standards-compliant web browsers 82 | window.addEventListener("message", displayMessage, false); 83 | } 84 | else { 85 | window.attachEvent("onmessage", displayMessage); 86 | } 87 |88 |
I've heard nothing yet
32 | 33 | 34 | -------------------------------------------------------------------------------- /html5/svg/circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /html5/svg/svg.xhtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |Use SVG to handle vector graphics in a web page.
18 |43 |44 |
Using the video element native in the web browser to playback a video.
25 |Using the video element native in the web browser to playback a video.
25 |38 | <video controls="controls"> 39 | <source src="http://robertnyman.com/video/swedish-flag.mp4"> 40 | <source src="http://robertnyman.com/video/swedish-flag.ogv"> 41 | <p>Sorry, your web browser doesn't support the video element</p> 42 | </video> 43 |44 |
Using the video element native in the web browser to playback a video.
24 |37 | <video controls="controls"> 38 | <source src="http://robertnyman.com/video/swedish-flag.mp4"> 39 | <source src="http://robertnyman.com/video/swedish-flag.ogv"> 40 | <p>Sorry, your web browser doesn't support the video element</p> 41 | </video> 42 |43 |
This image below is loaded via JavaScript, and at reload, if available, as a data URL from localStorage.
30 |An element with custom data attributes
38 | 39 | 40 |If supported, this image below is loaded from IndexedDB through an objectURL.
30 |A demo of window.matchMedia, currently implemented in Firefox, Google Chrome and Safari. Resize the window to vet value for different matches. 18 |
19 | 20 | 21 |window.matchMedia is not supported
22 |window.matchMedia for 600 pixels width:
23 |window.matchMedia for 500 pixels height:
24 |window.matchMedia for portrait orientation:
25 |ABBA was a Swedish pop group formed in Stockholm in 1970, comprising Anni-Frid Lyngstad, Björn Ulvaeus, Benny Andersson and Agnetha Fältskog. They became one of the most commercially successful acts in the history of pop music, topping the charts worldwide from 1972 to 1982. ABBA has sold over 370 million records worldwide,[1][2] which makes them the fourth best-selling music artists in the history of recorded music, behind only The Beatles, Elvis Presley and Michael Jackson. They still sell between two to three million albums a year.[3] ABBA was the first pop group to come from a non-English-speaking country that enjoyed consistent success in the charts of English-speaking countries, including the UK, Ireland, the U.S., Canada, Australia, New Zealand, South Africa and the Philippines. The group also enjoyed significant success in Latin American markets (particularly Mexico, Chile, Peru, Colombia and Argentina), and recorded a collection of their hit songs in Spanish.
13 | 14 |During the band's active years, Fältskog and Ulvaeus were a married couple, as were Lyngstad and Andersson–although both couples later divorced. At the height of their popularity, both relationships were suffering strain which ultimately resulted in the collapse of the Ulvaeus-Fältskog marriage in 1979 and the Andersson-Lyngstad marriage in 1981. As a result, these relationship changes began appearing in the group's music, as they produced more introspective lyrics with different compositions.
15 | 16 |After ABBA broke up in early 1983, Andersson and Ulvaeus achieved success writing music for the stage while Lyngstad and Fältskog pursued individual solo careers with varying success. ABBA's music declined in popularity until several films, notably Muriel's Wedding and The Adventures of Priscilla, Queen of the Desert, revived interest in the group, spawning several tribute bands. In 1999, ABBA's music was adapted into the successful musical Mamma Mia! that toured worldwide. A film of the same name released in 2008 became the highest-grossing film in the United Kingdom that year. The group was inducted into the Rock and Roll Hall of Fame on 15 March 2010.
17 |ABBA was a Swedish pop group formed in Stockholm in 1970, comprising Anni-Frid Lyngstad, Björn Ulvaeus, Benny Andersson and Agnetha Fältskog. They became one of the most commercially successful acts in the history of pop music, topping the charts worldwide from 1972 to 1982. ABBA has sold over 370 million records worldwide,[1][2] which makes them the fourth best-selling music artists in the history of recorded music, behind only The Beatles, Elvis Presley and Michael Jackson. They still sell between two to three million albums a year.[3] ABBA was the first pop group to come from a non-English-speaking country that enjoyed consistent success in the charts of English-speaking countries, including the UK, Ireland, the U.S., Canada, Australia, New Zealand, South Africa and the Philippines. The group also enjoyed significant success in Latin American markets (particularly Mexico, Chile, Peru, Colombia and Argentina), and recorded a collection of their hit songs in Spanish.
34 | 35 |During the band's active years, Fältskog and Ulvaeus were a married couple, as were Lyngstad and Andersson–although both couples later divorced. At the height of their popularity, both relationships were suffering strain which ultimately resulted in the collapse of the Ulvaeus-Fältskog marriage in 1979 and the Andersson-Lyngstad marriage in 1981. As a result, these relationship changes began appearing in the group's music, as they produced more introspective lyrics with different compositions.
36 | 37 |After ABBA broke up in early 1983, Andersson and Ulvaeus achieved success writing music for the stage while Lyngstad and Fältskog pursued individual solo careers with varying success. ABBA's music declined in popularity until several films, notably Muriel's Wedding and The Adventures of Priscilla, Queen of the Desert, revived interest in the group, spawning several tribute bands. In 1999, ABBA's music was adapted into the successful musical Mamma Mia! that toured worldwide. A film of the same name released in 2008 became the highest-grossing film in the United Kingdom that year. The group was inducted into the Rock and Roll Hall of Fame on 15 March 2010.
38 | 39 |Testing Mozilla code
18 |A demo of the Vibration API, currently implemented in Firefox.
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |All the code is available in the Vibration repository on GitHub.
30 |A demo of various WebAPIs, currently implemented in Firefox.
19 | 20 | 21 | 22 |