├── 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 | Battery API 6 | 7 | 8 | 9 | 10 | 11 |
12 |

13 | Battery API 14 |

15 | 16 |
17 |

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 |
31 | 32 | 33 |
34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /battery/js/base.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | let batterySupported = document.getElementById("battery-supported"), 3 | batteryLevel = document.getElementById("battery-level"), 4 | chargingStatus = document.getElementById("charging-status"), 5 | batteryCharged = document.getElementById("battery-charged"), 6 | batteryDischarged = document.getElementById("battery-discharged"); 7 | 8 | let success = function (battery) { 9 | if (battery) { 10 | function setStatus () { 11 | console.log("Set status"); 12 | batteryLevel.innerHTML = Math.round(battery.level * 100) + "%"; 13 | chargingStatus.innerHTML = (battery.charging)? "" : "not "; 14 | batteryCharged.innerHTML = (battery.chargingTime == "Infinity")? "Infinity" : parseInt(battery.chargingTime / 60, 10); 15 | batteryDischarged.innerHTML = (battery.dischargingTime == "Infinity")? "Infinity" : parseInt(battery.dischargingTime / 60, 10); 16 | } 17 | 18 | // Set initial status 19 | setStatus(); 20 | 21 | // Set events 22 | battery.addEventListener("levelchange", setStatus, false); 23 | battery.addEventListener("chargingchange", setStatus, false); 24 | battery.addEventListener("chargingtimechange", setStatus, false); 25 | battery.addEventListener("dischargingtimechange", setStatus, false); 26 | } else { 27 | throw new Error('Battery API not supported on your device/computer'); 28 | } 29 | }; 30 | 31 | let noGood = function (error) { 32 | batterySupported.innerHTML = error.message; 33 | }; 34 | 35 | navigator.getBattery() //returns a promise 36 | .then(success) 37 | .catch(noGood); 38 | })(); -------------------------------------------------------------------------------- /camera-api/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 | #error { 120 | color: #f00; 121 | } 122 | 123 | .footer { 124 | border-top: 1px solid #000; 125 | margin-top: 30px; 126 | padding-top: 10px; 127 | } 128 | -------------------------------------------------------------------------------- /camera-api/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Camera API 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Camera API

13 | 14 |
15 |

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 |

Preview:

22 |

23 | 24 |

25 | 26 |

27 | 28 |
29 | 30 | 31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /camera-api/js/base.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var takePicture = document.querySelector("#take-picture"), 3 | showPicture = document.querySelector("#show-picture"); 4 | 5 | if (takePicture && showPicture) { 6 | // Set events 7 | takePicture.onchange = function (event) { 8 | // Get a reference to the taken picture or chosen file 9 | var files = event.target.files, 10 | file; 11 | if (files && files.length > 0) { 12 | file = files[0]; 13 | try { 14 | // Get window.URL object 15 | var URL = window.URL || window.webkitURL; 16 | 17 | // Create ObjectURL 18 | var imgURL = URL.createObjectURL(file); 19 | 20 | // Set img src to ObjectURL 21 | showPicture.src = imgURL; 22 | 23 | // Revoke ObjectURL after imagehas loaded 24 | showPicture.onload = function() { 25 | URL.revokeObjectURL(imgURL); 26 | }; 27 | } 28 | catch (e) { 29 | try { 30 | // Fallback if createObjectURL is not supported 31 | var fileReader = new FileReader(); 32 | fileReader.onload = function (event) { 33 | showPicture.src = event.target.result; 34 | }; 35 | fileReader.readAsDataURL(file); 36 | } 37 | catch (e) { 38 | // Display error message 39 | var error = document.querySelector("#error"); 40 | if (error) { 41 | error.innerHTML = "Neither createObjectURL or FileReader are supported"; 42 | } 43 | } 44 | } 45 | } 46 | }; 47 | } 48 | })(); 49 | -------------------------------------------------------------------------------- /fullscreen/css/base.css: -------------------------------------------------------------------------------- 1 | /* General font styles */ 2 | html { 3 | font: 100%/1.3 Verdana, Helvetica, Arial, sans-serif; 4 | } 5 | 6 | body { 7 | font: 70%/1.3 Verdana, Helvetica, Arial, sans-serif; 8 | } 9 | 10 | h1 { 11 | font: bold 2em Arial, sans-serif; 12 | } 13 | 14 | h2 { 15 | font: bold 1.5em Arial, sans-serif; 16 | } 17 | 18 | h3 { 19 | font: bold 1.25em Arial, sans-serif; 20 | } 21 | 22 | h4 { 23 | font: bold 1.1em Arial, sans-serif; 24 | } 25 | 26 | /* Default resetting */ 27 | html, body, form, fieldset, legend, dt, dd { 28 | margin: 0; 29 | padding: 0; 30 | } 31 | 32 | h1, h2, h3, h4, h5, h6, p, ul, ol, dl { 33 | margin: 0 0 1em; 34 | padding: 0; 35 | } 36 | 37 | h1, h2, h3, h4, h5, h6 { 38 | margin-bottom: 0.5em; 39 | } 40 | 41 | h2 { 42 | margin-top: 20px; 43 | } 44 | 45 | pre { 46 | font-size: 1.5em; 47 | } 48 | 49 | li, dd { 50 | margin-left: 1.5em; 51 | } 52 | 53 | img { 54 | border: none; 55 | vertical-align: middle; 56 | } 57 | 58 | /* Basic element styles */ 59 | a { 60 | color: #000; 61 | } 62 | 63 | a:hover { 64 | text-decoration: underline; 65 | } 66 | 67 | html { 68 | color: #000; 69 | background: gold; 70 | min-height: 100%; 71 | } 72 | 73 | body { 74 | margin-bottom: 30px; 75 | } 76 | 77 | ul { 78 | margin: 10px 0; 79 | } 80 | 81 | 82 | /* Structure */ 83 | .container { 84 | width: 560px; 85 | min-height: 600px; 86 | background: #fff; 87 | border: 1px solid #ccc; 88 | border-top: none; 89 | margin: 20px auto; 90 | padding: 20px; 91 | -moz-border-radius: 10px; 92 | -webkit-border-radius: 10px; 93 | border-radius: 10px; 94 | -moz-box-shadow: 1px 1px 10px #000; 95 | -webkit-box-shadow: 1px 1px 5px #000; 96 | box-shadow: 1px 1px 10px #000; 97 | } 98 | 99 | @media screen and (max-width: 320px) { 100 | #container { 101 | width: 280px; 102 | padding: 10px; 103 | } 104 | } 105 | 106 | video { 107 | display: block; 108 | margin-bottom: 10px; 109 | } 110 | 111 | 112 | /* Fullscreen */ 113 | html:-moz-full-screen { 114 | background: red; 115 | } 116 | 117 | html:-webkit-full-screen { 118 | background: red; 119 | } 120 | 121 | html:-ms-fullscreen { 122 | background: red; 123 | } 124 | 125 | body:-ms-fullscreen { 126 | overflow: auto; /* fix for IE11 scrollbar */ 127 | } 128 | 129 | html:fullscreen { 130 | background: red; 131 | } 132 | -------------------------------------------------------------------------------- /fullscreen/index-high-content.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fullscreen API 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

14 | Fullscreen API 15 |

16 | 17 |
18 |

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 |

Fullscren for elements

38 |

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 |
50 | 51 |

All the code is available in the Fullscreen repository on GitHub.

52 |
53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /fullscreen/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Fullscreen API 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

14 | Fullscreen API 15 |

16 | 17 |
18 |

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 |

Fullscreen for elements

38 |

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 |
50 | 51 |

All the code is available in the Fullscreen repository on GitHub.

52 |
53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /fullscreen/js/base.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var viewFullScreen = document.getElementById("view-fullscreen"); 3 | if (viewFullScreen) { 4 | viewFullScreen.addEventListener("click", function () { 5 | var docElm = document.documentElement; 6 | if (docElm.requestFullscreen) { 7 | docElm.requestFullscreen(); 8 | } 9 | else if (docElm.msRequestFullscreen) { 10 | docElm = document.body; //overwrite the element (for IE) 11 | docElm.msRequestFullscreen(); 12 | } 13 | else if (docElm.mozRequestFullScreen) { 14 | docElm.mozRequestFullScreen(); 15 | } 16 | else if (docElm.webkitRequestFullScreen) { 17 | docElm.webkitRequestFullScreen(); 18 | } 19 | }, false); 20 | } 21 | 22 | var cancelFullScreen = document.getElementById("cancel-fullscreen"); 23 | if (cancelFullScreen) { 24 | cancelFullScreen.addEventListener("click", function () { 25 | if (document.exitFullscreen) { 26 | document.exitFullscreen(); 27 | } 28 | else if (document.msExitFullscreen) { 29 | document.msExitFullscreen(); 30 | } 31 | else if (document.mozCancelFullScreen) { 32 | document.mozCancelFullScreen(); 33 | } 34 | else if (document.webkitCancelFullScreen) { 35 | document.webkitCancelFullScreen(); 36 | } 37 | }, false); 38 | } 39 | 40 | 41 | var fullscreenState = document.getElementById("fullscreen-state"); 42 | if (fullscreenState) { 43 | document.addEventListener("fullscreenchange", function () { 44 | fullscreenState.innerHTML = (document.fullscreenElement)? "" : "not "; 45 | }, false); 46 | 47 | document.addEventListener("msfullscreenchange", function () { 48 | fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not "; 49 | }, false); 50 | 51 | document.addEventListener("mozfullscreenchange", function () { 52 | fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not "; 53 | }, false); 54 | 55 | document.addEventListener("webkitfullscreenchange", function () { 56 | fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not "; 57 | }, false); 58 | } 59 | 60 | var marioVideo = document.getElementById("mario-video") 61 | videoFullscreen = document.getElementById("video-fullscreen"); 62 | 63 | if (marioVideo && videoFullscreen) { 64 | videoFullscreen.addEventListener("click", function (evt) { 65 | if (marioVideo.requestFullscreen) { 66 | marioVideo.requestFullscreen(); 67 | } 68 | else if (marioVideo.msRequestFullscreen) { 69 | marioVideo.msRequestFullscreen(); 70 | } 71 | else if (marioVideo.mozRequestFullScreen) { 72 | marioVideo.mozRequestFullScreen(); 73 | } 74 | else if (marioVideo.webkitRequestFullScreen) { 75 | marioVideo.webkitRequestFullScreen(); 76 | /* 77 | *Kept here for reference: keyboard support in full screen 78 | * marioVideo.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 79 | */ 80 | } 81 | }, false); 82 | } 83 | })(); 84 | 85 | -------------------------------------------------------------------------------- /fxosapp-old/images/logo128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/fxosapp-old/images/logo128.png -------------------------------------------------------------------------------- /fxosapp-old/images/logo16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/fxosapp-old/images/logo16.png -------------------------------------------------------------------------------- /fxosapp-old/images/logo32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/fxosapp-old/images/logo32.png -------------------------------------------------------------------------------- /fxosapp-old/images/logo48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/fxosapp-old/images/logo48.png -------------------------------------------------------------------------------- /fxosapp-old/images/logo64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/fxosapp-old/images/logo64.png -------------------------------------------------------------------------------- /fxosapp-old/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | FxOS app 8 | 9 | 10 | 11 | 12 |
13 |

FxOS app

14 | 17 |
18 | 19 |
20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
41 | 42 | 48 | 49 | 50 | 51 | 52 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /fxosapp-old/js/base.js: -------------------------------------------------------------------------------- 1 | // Install app 2 | var checkIfInstalled = navigator.mozApps.getSelf(); 3 | checkIfInstalled.onsuccess = function () { 4 | if (checkIfInstalled.result) { 5 | // Already installed 6 | } 7 | else { 8 | var install = document.querySelector("#install"), 9 | manifestURL = location.href.substring(0, location.href.lastIndexOf("/")) + "/manifest.webapp"; 10 | install.className = "show"; 11 | install.onclick = function () { 12 | var installApp = navigator.mozApps.install(manifestURL); 13 | installApp.onsuccess = function(data) { 14 | install.style.display = "none"; 15 | }; 16 | installApp.onerror = function() { 17 | alert("Install failed\n\n:" + installApp.error.name); 18 | }; 19 | }; 20 | } 21 | }; 22 | 23 | // Reload content 24 | var reload = document.querySelector("#reload"); 25 | if (reload) { 26 | reload.onclick = function () { 27 | location.reload(true); 28 | }; 29 | } -------------------------------------------------------------------------------- /fxosapp-old/manifest.webapp: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1", 3 | "name": "FxOS app", 4 | // Make sure this is relative to the hosting web site root 5 | "launch_path": "/fxosapp/index.html", 6 | "description": "Bare bones Firefox OS app", 7 | // Make sure icon paths are relative to the hosting web site root 8 | "icons": { 9 | "16": "/fxosapp/images/logo16.png", 10 | "32": "/fxosapp/images/logo32.png", 11 | "48": "/fxosapp/images/logo48.png", 12 | "64": "/fxosapp/images/logo64.png", 13 | "128": "/fxosapp/images/logo128.png" 14 | }, 15 | "developer": { 16 | "name": "Robert Nyman", 17 | "url": "http://robertnyman.com" 18 | }, 19 | "installs_allowed_from": ["*"], 20 | "default_locale": "en" 21 | } 22 | -------------------------------------------------------------------------------- /getusermedia/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 | #error { 120 | color: #f00; 121 | } 122 | 123 | .footer { 124 | border-top: 1px solid #000; 125 | margin-top: 30px; 126 | padding-top: 10px; 127 | } 128 | -------------------------------------------------------------------------------- /getusermedia/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | getUserMedia 6 | 7 | 8 | 9 | 10 | 11 |
12 |

getUserMedia

13 | 14 |
15 |

A demo of getUserMedia, currently implemented in Firefox, Google Chrome and Opera. Choose to stream live from your device's camera.

16 | 17 |

Preview:

18 |

19 | 20 |

21 | 22 |

23 | 24 |
25 | 26 | 27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /getusermedia/js/base.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var liveVideo = document.querySelector("#live-video"), 3 | getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia, 4 | error = document.querySelector("#error"); 5 | 6 | alert(getUserMedia); 7 | 8 | if (liveVideo && getUserMedia) { 9 | navigator.webkitGetUserMedia("video", 10 | function (media) { 11 | alert(media); 12 | liveVideo.src = window.webkitURL.createObjectURL(media); 13 | }, 14 | function (error) { 15 | error.innerHTML = "An error occurred: " + error; 16 | } 17 | ); 18 | } 19 | else { 20 | error.innerHTML = "getUserMedia not supported"; 21 | } 22 | })(); 23 | -------------------------------------------------------------------------------- /html5/book-test/offline.css: -------------------------------------------------------------------------------- 1 | .connectivity { 2 | color: #fff; 3 | background: red; 4 | padding: 30px; 5 | } -------------------------------------------------------------------------------- /html5/book-test/online.css: -------------------------------------------------------------------------------- 1 | .connectivity { 2 | color: #fff; 3 | background: green; 4 | padding: 10px; 5 | } -------------------------------------------------------------------------------- /html5/book-test/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tech editor code check 6 | 7 | 8 | 10 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |

Tech editor code check

20 |
21 | 22 |
23 |
24 | 25 |

Connected?

26 | 27 |
28 |
29 | 30 | 33 |
34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /html5/book-test/test.manifest: -------------------------------------------------------------------------------- 1 | CACHE MANIFEST 2 | 3 | CACHE: 4 | test.html 5 | 6 | FALLBACK: 7 | online.css offline.css 8 | 9 | # VERSION 2 -------------------------------------------------------------------------------- /html5/canvas/the-cure.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Canvas - The Cure 6 | 7 | 13 | 16 | 17 | 18 | 19 | 20 |
21 |
22 |

Canvas - The Cure

23 |
24 | 25 |
26 |
27 | 28 | I am canvas 29 | 30 | 112 |
113 |
114 | 115 | 118 |
119 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /html5/canvas/view.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5/canvas/view.jpg -------------------------------------------------------------------------------- /html5/fileapi-upload/upload/upload.php: -------------------------------------------------------------------------------- 1 | You found the upload page! -------------------------------------------------------------------------------- /html5/forms/HTML5-Forms-Robert-Nyman.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5/forms/HTML5-Forms-Robert-Nyman.zip -------------------------------------------------------------------------------- /html5/forms/validity.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 |
12 |

required, with setCustomValidity and oninvalid event

13 |
14 | 15 | 28 |
29 | 30 |

31 | 32 |

33 | 34 |
35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /html5/history-api/history-api.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | History API - robertnyman.com 6 | 7 | 15 | 18 | 19 | 20 | 21 | 22 |
23 |
24 |

History API - To: Information and samples for HTML5 and related APIs

25 |

Use the History API to push and replace entries in the user's web browser history.

26 |
27 | 28 |
29 |
30 | 31 | 36 | 37 | 61 | 62 |

Code used in this page

63 |
 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 |
88 |
89 | 90 | 93 |
94 | 95 | 96 | 97 | 100 | 101 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /html5/images/firefox-faded.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5/images/firefox-faded.png -------------------------------------------------------------------------------- /html5/images/firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5/images/firefox.png -------------------------------------------------------------------------------- /html5/images/google-chrome-faded.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5/images/google-chrome-faded.png -------------------------------------------------------------------------------- /html5/images/google-chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5/images/google-chrome.png -------------------------------------------------------------------------------- /html5/images/ie-faded.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5/images/ie-faded.png -------------------------------------------------------------------------------- /html5/images/ie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5/images/ie.png -------------------------------------------------------------------------------- /html5/images/opera-faded.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5/images/opera-faded.png -------------------------------------------------------------------------------- /html5/images/opera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5/images/opera.png -------------------------------------------------------------------------------- /html5/images/safari-faded.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5/images/safari-faded.png -------------------------------------------------------------------------------- /html5/images/safari.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5/images/safari.png -------------------------------------------------------------------------------- /html5/js/html5.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,canvas,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])}})() -------------------------------------------------------------------------------- /html5/offline/offline.appcache: -------------------------------------------------------------------------------- 1 | CACHE MANIFEST 2 | 3 | # VERSION 10 4 | 5 | CACHE: 6 | offline.html 7 | base.css 8 | 9 | FALLBACK: 10 | online.css offline.css -------------------------------------------------------------------------------- /html5/offline/offline.css: -------------------------------------------------------------------------------- 1 | .connectivity { 2 | color: #fff; 3 | background: red; 4 | padding: 30px; 5 | } -------------------------------------------------------------------------------- /html5/offline/offline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Offline Web Applications 6 | 7 | 8 | 10 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |

Offline Web Applications - To: Information and samples for HTML5 and related APIs

20 |

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 |
23 | 24 |
25 |
26 | 27 |

Connectivity

28 | 29 |
30 |
31 | 32 | 35 |
36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /html5/offline/offline.manifest: -------------------------------------------------------------------------------- 1 | CACHE MANIFEST 2 | 3 | # VERSION 10 4 | 5 | CACHE: 6 | offline.html 7 | base.css 8 | 9 | FALLBACK: 10 | online.css offline.css -------------------------------------------------------------------------------- /html5/offline/online-offline-polling.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Online/Offlline polling - robertnyman.com 6 | 7 | 16 | 19 | 20 | 21 | 22 | 23 |
24 |
25 |

Online/Offlline polling - To: Information and samples for HTML5 and related APIs

26 |

Checking if the user is online/offline by polling the navigator.onLine property.

27 |

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 |
29 | 30 |
31 |
32 | 33 |

34 | You are 35 | 36 | Online 37 | 38 |

39 | 55 | 56 |

Code used in this page

57 |
 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 |
74 |
75 | 76 | 79 |
80 | 81 | 82 | 83 | 86 | 87 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /html5/offline/online.css: -------------------------------------------------------------------------------- 1 | .connectivity { 2 | color: #fff; 3 | background: green; 4 | padding: 10px; 5 | } -------------------------------------------------------------------------------- /html5/postMessage/postMessage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | postMessage - send messages between iframes and windows - robertnyman.com 6 | 7 | 15 | 18 | 32 | 33 | 34 | 35 | 36 |
37 |
38 |

postMessage - To: Information and samples for HTML5 and related APIs

39 |

Using postMessage to post messages between windows & iframes.

40 |
41 | 42 |
43 |
44 |
45 | 46 | 47 |
48 | 49 | 50 | 51 |

Code used in this page

52 |
 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 |

Code used in the iframe

68 |
 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 |
89 |
90 | 91 | 94 |
95 | 96 | 97 | 98 | 101 | 102 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /html5/postMessage/postMessageTarget.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | postMessage - send messages between iframes and windows - robertnyman.com 6 | 11 | 12 | 32 | 33 | 34 | 35 | 36 |

I've heard nothing yet

37 | 38 | 39 | -------------------------------------------------------------------------------- /html5/postMessageTest/postMessage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | postMessage - send messages between iframes and windows - robertnyman.com 6 | 7 | 15 | 18 | 32 | 33 | 34 | 35 | 36 |
37 |
38 |

postMessage - To: Information and samples for HTML5 and related APIs

39 |

Using postMessage to post messages between windows & iframes.

40 |
41 | 42 |
43 |
44 |
45 | 46 | 47 |
48 | 49 | 50 | 51 |

Code used in this page

52 |
 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 |

Code used in the iframe

68 |
 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 |
89 |
90 | 91 | 94 |
95 | 96 | 97 | 98 | 101 | 102 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /html5/postMessageTest/postMessageTarget.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | postMessage - send messages between iframes and windows - robertnyman.com 6 | 11 | 12 | 27 | 28 | 29 | 30 | 31 |

I've heard nothing yet

32 | 33 | 34 | -------------------------------------------------------------------------------- /html5/svg/circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /html5/svg/svg.xhtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SVG - Scalable Vector Graphics - robertnyman.com 6 | 7 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

SVG - Scalable Vector Graphics - To: Information and samples for HTML5 and related APIs

17 |

Use SVG to handle vector graphics in a web page.

18 |
19 | 20 |
21 |
22 | 23 | 24 | 25 | Created with Raphaël 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |

Code used in this page

42 |
43 | 				
44 |
45 |
46 | 47 | 50 |
51 | 52 | 53 | 54 | 57 | 58 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /html5/svg/view.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5/svg/view.jpg -------------------------------------------------------------------------------- /html5/syntax-highlighter/scripts/clipboard.swf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5/syntax-highlighter/scripts/clipboard.swf -------------------------------------------------------------------------------- /html5/syntax-highlighter/scripts/shBrushBash.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SyntaxHighlighter 3 | * http://alexgorbatchev.com/ 4 | * 5 | * SyntaxHighlighter is donationware. If you are using it, please donate. 6 | * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate 7 | * 8 | * @version 9 | * 2.0.296 (March 01 2009) 10 | * 11 | * @copyright 12 | * Copyright (C) 2004-2009 Alex Gorbatchev. 13 | * 14 | * @license 15 | * This file is part of SyntaxHighlighter. 16 | * 17 | * SyntaxHighlighter is free software: you can redistribute it and/or modify 18 | * it under the terms of the GNU General Public License as published by 19 | * the Free Software Foundation, either version 3 of the License, or 20 | * (at your option) any later version. 21 | * 22 | * SyntaxHighlighter is distributed in the hope that it will be useful, 23 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 24 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 25 | * GNU General Public License for more details. 26 | * 27 | * You should have received a copy of the GNU General Public License 28 | * along with SyntaxHighlighter. If not, see . 29 | */ 30 | SyntaxHighlighter.brushes.Bash = function() 31 | { 32 | var keywords = 'if fi then elif else for do done until while break continue case function return in eq ne gt lt ge le'; 33 | var commands = 'alias apropos awk bash bc bg builtin bzip2 cal cat cd cfdisk chgrp chmod chown chroot' + 34 | 'cksum clear cmp comm command cp cron crontab csplit cut date dc dd ddrescue declare df ' + 35 | 'diff diff3 dig dir dircolors dirname dirs du echo egrep eject enable env ethtool eval ' + 36 | 'exec exit expand export expr false fdformat fdisk fg fgrep file find fmt fold format ' + 37 | 'free fsck ftp gawk getopts grep groups gzip hash head history hostname id ifconfig ' + 38 | 'import install join kill less let ln local locate logname logout look lpc lpr lprint ' + 39 | 'lprintd lprintq lprm ls lsof make man mkdir mkfifo mkisofs mknod more mount mtools ' + 40 | 'mv netstat nice nl nohup nslookup open op passwd paste pathchk ping popd pr printcap ' + 41 | 'printenv printf ps pushd pwd quota quotacheck quotactl ram rcp read readonly renice ' + 42 | 'remsync rm rmdir rsync screen scp sdiff sed select seq set sftp shift shopt shutdown ' + 43 | 'sleep sort source split ssh strace su sudo sum symlink sync tail tar tee test time ' + 44 | 'times touch top traceroute trap tr true tsort tty type ulimit umask umount unalias ' + 45 | 'uname unexpand uniq units unset unshar useradd usermod users uuencode uudecode v vdir ' + 46 | 'vi watch wc whereis which who whoami Wget xargs yes' 47 | ; 48 | 49 | this.regexList = [ 50 | { regex: SyntaxHighlighter.regexLib.singleLinePerlComments, css: 'comments' }, // one line comments 51 | { regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' }, // double quoted strings 52 | { regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' }, // keywords 53 | { regex: new RegExp(this.getKeywords(commands), 'gm'), css: 'functions' } // commands 54 | ]; 55 | } 56 | 57 | SyntaxHighlighter.brushes.Bash.prototype = new SyntaxHighlighter.Highlighter(); 58 | SyntaxHighlighter.brushes.Bash.aliases = ['bash', 'shell']; 59 | 60 | -------------------------------------------------------------------------------- /html5/syntax-highlighter/scripts/shBrushCSharp.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SyntaxHighlighter 3 | * http://alexgorbatchev.com/ 4 | * 5 | * SyntaxHighlighter is donationware. If you are using it, please donate. 6 | * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate 7 | * 8 | * @version 9 | * 2.0.296 (March 01 2009) 10 | * 11 | * @copyright 12 | * Copyright (C) 2004-2009 Alex Gorbatchev. 13 | * 14 | * @license 15 | * This file is part of SyntaxHighlighter. 16 | * 17 | * SyntaxHighlighter is free software: you can redistribute it and/or modify 18 | * it under the terms of the GNU General Public License as published by 19 | * the Free Software Foundation, either version 3 of the License, or 20 | * (at your option) any later version. 21 | * 22 | * SyntaxHighlighter is distributed in the hope that it will be useful, 23 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 24 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 25 | * GNU General Public License for more details. 26 | * 27 | * You should have received a copy of the GNU General Public License 28 | * along with SyntaxHighlighter. If not, see . 29 | */ 30 | SyntaxHighlighter.brushes.CSharp = function() 31 | { 32 | var keywords = 'abstract as base bool break byte case catch char checked class const ' + 33 | 'continue decimal default delegate do double else enum event explicit ' + 34 | 'extern false finally fixed float for foreach get goto if implicit in int ' + 35 | 'interface internal is lock long namespace new null object operator out ' + 36 | 'override params private protected public readonly ref return sbyte sealed set ' + 37 | 'short sizeof stackalloc static string struct switch this throw true try ' + 38 | 'typeof uint ulong unchecked unsafe ushort using virtual void while'; 39 | 40 | function fixComments(match, regexInfo) 41 | { 42 | var css = (match[0].indexOf("///") == 0) 43 | ? 'color1' 44 | : 'comments' 45 | ; 46 | 47 | return [new SyntaxHighlighter.Match(match[0], match.index, css)]; 48 | } 49 | 50 | this.regexList = [ 51 | { regex: SyntaxHighlighter.regexLib.singleLineCComments, func : fixComments }, // one line comments 52 | { regex: SyntaxHighlighter.regexLib.multiLineCComments, css: 'comments' }, // multiline comments 53 | { regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' }, // strings 54 | { regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' }, // strings 55 | { regex: /^\s*#.*/gm, css: 'preprocessor' }, // preprocessor tags like #region and #endregion 56 | { regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' } // c# keyword 57 | ]; 58 | 59 | this.forHtmlScript(SyntaxHighlighter.regexLib.aspScriptTags); 60 | }; 61 | 62 | SyntaxHighlighter.brushes.CSharp.prototype = new SyntaxHighlighter.Highlighter(); 63 | SyntaxHighlighter.brushes.CSharp.aliases = ['c#', 'c-sharp', 'csharp']; 64 | 65 | -------------------------------------------------------------------------------- /html5/syntax-highlighter/scripts/shBrushDelphi.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SyntaxHighlighter 3 | * http://alexgorbatchev.com/ 4 | * 5 | * SyntaxHighlighter is donationware. If you are using it, please donate. 6 | * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate 7 | * 8 | * @version 9 | * 2.0.296 (March 01 2009) 10 | * 11 | * @copyright 12 | * Copyright (C) 2004-2009 Alex Gorbatchev. 13 | * 14 | * @license 15 | * This file is part of SyntaxHighlighter. 16 | * 17 | * SyntaxHighlighter is free software: you can redistribute it and/or modify 18 | * it under the terms of the GNU General Public License as published by 19 | * the Free Software Foundation, either version 3 of the License, or 20 | * (at your option) any later version. 21 | * 22 | * SyntaxHighlighter is distributed in the hope that it will be useful, 23 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 24 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 25 | * GNU General Public License for more details. 26 | * 27 | * You should have received a copy of the GNU General Public License 28 | * along with SyntaxHighlighter. If not, see . 29 | */ 30 | SyntaxHighlighter.brushes.Delphi = function() 31 | { 32 | var keywords = 'abs addr and ansichar ansistring array as asm begin boolean byte cardinal ' + 33 | 'case char class comp const constructor currency destructor div do double ' + 34 | 'downto else end except exports extended false file finalization finally ' + 35 | 'for function goto if implementation in inherited int64 initialization ' + 36 | 'integer interface is label library longint longword mod nil not object ' + 37 | 'of on or packed pansichar pansistring pchar pcurrency pdatetime pextended ' + 38 | 'pint64 pointer private procedure program property pshortstring pstring ' + 39 | 'pvariant pwidechar pwidestring protected public published raise real real48 ' + 40 | 'record repeat set shl shortint shortstring shr single smallint string then ' + 41 | 'threadvar to true try type unit until uses val var varirnt while widechar ' + 42 | 'widestring with word write writeln xor'; 43 | 44 | this.regexList = [ 45 | { regex: /\(\*[\s\S]*?\*\)/gm, css: 'comments' }, // multiline comments (* *) 46 | { regex: /{(?!\$)[\s\S]*?}/gm, css: 'comments' }, // multiline comments { } 47 | { regex: SyntaxHighlighter.regexLib.singleLineCComments, css: 'comments' }, // one line 48 | { regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' }, // strings 49 | { regex: /\{\$[a-zA-Z]+ .+\}/g, css: 'color1' }, // compiler Directives and Region tags 50 | { regex: /\b[\d\.]+\b/g, css: 'value' }, // numbers 12345 51 | { regex: /\$[a-zA-Z0-9]+\b/g, css: 'value' }, // numbers $F5D3 52 | { regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' } // keyword 53 | ]; 54 | }; 55 | 56 | SyntaxHighlighter.brushes.Delphi.prototype = new SyntaxHighlighter.Highlighter(); 57 | SyntaxHighlighter.brushes.Delphi.aliases = ['delphi', 'pascal']; 58 | -------------------------------------------------------------------------------- /html5/syntax-highlighter/scripts/shBrushDiff.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SyntaxHighlighter 3 | * http://alexgorbatchev.com/ 4 | * 5 | * SyntaxHighlighter is donationware. If you are using it, please donate. 6 | * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate 7 | * 8 | * @version 9 | * 2.0.296 (March 01 2009) 10 | * 11 | * @copyright 12 | * Copyright (C) 2004-2009 Alex Gorbatchev. 13 | * 14 | * @license 15 | * This file is part of SyntaxHighlighter. 16 | * 17 | * SyntaxHighlighter is free software: you can redistribute it and/or modify 18 | * it under the terms of the GNU General Public License as published by 19 | * the Free Software Foundation, either version 3 of the License, or 20 | * (at your option) any later version. 21 | * 22 | * SyntaxHighlighter is distributed in the hope that it will be useful, 23 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 24 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 25 | * GNU General Public License for more details. 26 | * 27 | * You should have received a copy of the GNU General Public License 28 | * along with SyntaxHighlighter. If not, see . 29 | */ 30 | SyntaxHighlighter.brushes.Diff = function() 31 | { 32 | this.regexList = [ 33 | { regex: /^\+\+\+.*$/gm, css: 'color2' }, 34 | { regex: /^\-\-\-.*$/gm, css: 'color2' }, 35 | { regex: /^\s.*$/gm, css: 'color1' }, 36 | { regex: /^@@.*@@$/gm, css: 'variable' }, 37 | { regex: /^\+[^\+]{1}.*$/gm, css: 'string' }, 38 | { regex: /^\-[^\-]{1}.*$/gm, css: 'comments' } 39 | ]; 40 | }; 41 | 42 | SyntaxHighlighter.brushes.Diff.prototype = new SyntaxHighlighter.Highlighter(); 43 | SyntaxHighlighter.brushes.Diff.aliases = ['diff', 'patch']; 44 | -------------------------------------------------------------------------------- /html5/syntax-highlighter/scripts/shBrushGroovy.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SyntaxHighlighter 3 | * http://alexgorbatchev.com/ 4 | * 5 | * SyntaxHighlighter is donationware. If you are using it, please donate. 6 | * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate 7 | * 8 | * @version 9 | * 2.0.296 (March 01 2009) 10 | * 11 | * @copyright 12 | * Copyright (C) 2004-2009 Alex Gorbatchev. 13 | * 14 | * @license 15 | * This file is part of SyntaxHighlighter. 16 | * 17 | * SyntaxHighlighter is free software: you can redistribute it and/or modify 18 | * it under the terms of the GNU General Public License as published by 19 | * the Free Software Foundation, either version 3 of the License, or 20 | * (at your option) any later version. 21 | * 22 | * SyntaxHighlighter is distributed in the hope that it will be useful, 23 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 24 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 25 | * GNU General Public License for more details. 26 | * 27 | * You should have received a copy of the GNU General Public License 28 | * along with SyntaxHighlighter. If not, see . 29 | */ 30 | SyntaxHighlighter.brushes.Groovy = function() 31 | { 32 | // Contributed by Andres Almiray 33 | // http://jroller.com/aalmiray/entry/nice_source_code_syntax_highlighter 34 | 35 | var keywords = 'as assert break case catch class continue def default do else extends finally ' + 36 | 'if in implements import instanceof interface new package property return switch ' + 37 | 'throw throws try while public protected private static'; 38 | var types = 'void boolean byte char short int long float double'; 39 | var constants = 'null'; 40 | var methods = 'allProperties count get size '+ 41 | 'collect each eachProperty eachPropertyName eachWithIndex find findAll ' + 42 | 'findIndexOf grep inject max min reverseEach sort ' + 43 | 'asImmutable asSynchronized flatten intersect join pop reverse subMap toList ' + 44 | 'padRight padLeft contains eachMatch toCharacter toLong toUrl tokenize ' + 45 | 'eachFile eachFileRecurse eachB yte eachLine readBytes readLine getText ' + 46 | 'splitEachLine withReader append encodeBase64 decodeBase64 filterLine ' + 47 | 'transformChar transformLine withOutputStream withPrintWriter withStream ' + 48 | 'withStreams withWriter withWriterAppend write writeLine '+ 49 | 'dump inspect invokeMethod print println step times upto use waitForOrKill '+ 50 | 'getText'; 51 | 52 | this.regexList = [ 53 | { regex: SyntaxHighlighter.regexLib.singleLineCComments, css: 'comments' }, // one line comments 54 | { regex: SyntaxHighlighter.regexLib.multiLineCComments, css: 'comments' }, // multiline comments 55 | { regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' }, // strings 56 | { regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' }, // strings 57 | { regex: /""".*"""/g, css: 'string' }, // GStrings 58 | { regex: new RegExp('\\b([\\d]+(\\.[\\d]+)?|0x[a-f0-9]+)\\b', 'gi'), css: 'value' }, // numbers 59 | { regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' }, // goovy keyword 60 | { regex: new RegExp(this.getKeywords(types), 'gm'), css: 'color1' }, // goovy/java type 61 | { regex: new RegExp(this.getKeywords(constants), 'gm'), css: 'constants' }, // constants 62 | { regex: new RegExp(this.getKeywords(methods), 'gm'), css: 'functions' } // methods 63 | ]; 64 | 65 | this.forHtmlScript(SyntaxHighlighter.regexLib.aspScriptTags); 66 | } 67 | 68 | SyntaxHighlighter.brushes.Groovy.prototype = new SyntaxHighlighter.Highlighter(); 69 | SyntaxHighlighter.brushes.Groovy.aliases = ['groovy']; 70 | -------------------------------------------------------------------------------- /html5/syntax-highlighter/scripts/shBrushJScript.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SyntaxHighlighter 3 | * http://alexgorbatchev.com/ 4 | * 5 | * SyntaxHighlighter is donationware. If you are using it, please donate. 6 | * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate 7 | * 8 | * @version 9 | * 2.0.296 (March 01 2009) 10 | * 11 | * @copyright 12 | * Copyright (C) 2004-2009 Alex Gorbatchev. 13 | * 14 | * @license 15 | * This file is part of SyntaxHighlighter. 16 | * 17 | * SyntaxHighlighter is free software: you can redistribute it and/or modify 18 | * it under the terms of the GNU General Public License as published by 19 | * the Free Software Foundation, either version 3 of the License, or 20 | * (at your option) any later version. 21 | * 22 | * SyntaxHighlighter is distributed in the hope that it will be useful, 23 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 24 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 25 | * GNU General Public License for more details. 26 | * 27 | * You should have received a copy of the GNU General Public License 28 | * along with SyntaxHighlighter. If not, see . 29 | */ 30 | SyntaxHighlighter.brushes.JScript = function() 31 | { 32 | var keywords = 'abstract boolean break byte case catch char class const continue debugger ' + 33 | 'default delete do double else enum export extends false final finally float ' + 34 | 'for function goto if implements import in instanceof int interface long native ' + 35 | 'new null package private protected public return short static super switch ' + 36 | 'synchronized this throw throws transient true try typeof var void volatile while with'; 37 | 38 | this.regexList = [ 39 | { regex: SyntaxHighlighter.regexLib.singleLineCComments, css: 'comments' }, // one line comments 40 | { regex: SyntaxHighlighter.regexLib.multiLineCComments, css: 'comments' }, // multiline comments 41 | { regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' }, // double quoted strings 42 | { regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' }, // single quoted strings 43 | { regex: /\s*#.*/gm, css: 'preprocessor' }, // preprocessor tags like #region and #endregion 44 | { regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' } // keywords 45 | ]; 46 | 47 | this.forHtmlScript(SyntaxHighlighter.regexLib.scriptScriptTags); 48 | }; 49 | 50 | SyntaxHighlighter.brushes.JScript.prototype = new SyntaxHighlighter.Highlighter(); 51 | SyntaxHighlighter.brushes.JScript.aliases = ['js', 'jscript', 'javascript']; 52 | -------------------------------------------------------------------------------- /html5/syntax-highlighter/scripts/shBrushJava.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SyntaxHighlighter 3 | * http://alexgorbatchev.com/ 4 | * 5 | * SyntaxHighlighter is donationware. If you are using it, please donate. 6 | * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate 7 | * 8 | * @version 9 | * 2.0.296 (March 01 2009) 10 | * 11 | * @copyright 12 | * Copyright (C) 2004-2009 Alex Gorbatchev. 13 | * 14 | * @license 15 | * This file is part of SyntaxHighlighter. 16 | * 17 | * SyntaxHighlighter is free software: you can redistribute it and/or modify 18 | * it under the terms of the GNU General Public License as published by 19 | * the Free Software Foundation, either version 3 of the License, or 20 | * (at your option) any later version. 21 | * 22 | * SyntaxHighlighter is distributed in the hope that it will be useful, 23 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 24 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 25 | * GNU General Public License for more details. 26 | * 27 | * You should have received a copy of the GNU General Public License 28 | * along with SyntaxHighlighter. If not, see . 29 | */ 30 | SyntaxHighlighter.brushes.Java = function() 31 | { 32 | var keywords = 'abstract assert boolean break byte case catch char class const ' + 33 | 'continue default do double else enum extends ' + 34 | 'false final finally float for goto if implements import ' + 35 | 'instanceof int interface long native new null ' + 36 | 'package private protected public return ' + 37 | 'short static strictfp super switch synchronized this throw throws true ' + 38 | 'transient try void volatile while'; 39 | 40 | this.regexList = [ 41 | { regex: SyntaxHighlighter.regexLib.singleLineCComments, css: 'comments' }, // one line comments 42 | { regex: SyntaxHighlighter.regexLib.multiLineCComments, css: 'comments' }, // multiline comments 43 | { regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' }, // strings 44 | { regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' }, // strings 45 | { regex: /\b([\d]+(\.[\d]+)?|0x[a-f0-9]+)\b/gi, css: 'value' }, // numbers 46 | { regex: /(?!\@interface\b)\@[\$\w]+\b/g, css: 'color1' }, // annotation @anno 47 | { regex: /\@interface\b/g, css: 'color2' }, // @interface keyword 48 | { regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' } // java keyword 49 | ]; 50 | 51 | this.forHtmlScript(SyntaxHighlighter.regexLib.aspScriptTags); 52 | }; 53 | 54 | SyntaxHighlighter.brushes.Java.prototype = new SyntaxHighlighter.Highlighter(); 55 | SyntaxHighlighter.brushes.Java.aliases = ['java']; 56 | -------------------------------------------------------------------------------- /html5/syntax-highlighter/scripts/shBrushPerl.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SyntaxHighlighter 3 | * http://alexgorbatchev.com/ 4 | * 5 | * SyntaxHighlighter is donationware. If you are using it, please donate. 6 | * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate 7 | * 8 | * @version 9 | * 2.0.296 (March 01 2009) 10 | * 11 | * @copyright 12 | * Copyright (C) 2004-2009 Alex Gorbatchev. 13 | * 14 | * @license 15 | * This file is part of SyntaxHighlighter. 16 | * 17 | * SyntaxHighlighter is free software: you can redistribute it and/or modify 18 | * it under the terms of the GNU General Public License as published by 19 | * the Free Software Foundation, either version 3 of the License, or 20 | * (at your option) any later version. 21 | * 22 | * SyntaxHighlighter is distributed in the hope that it will be useful, 23 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 24 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 25 | * GNU General Public License for more details. 26 | * 27 | * You should have received a copy of the GNU General Public License 28 | * along with SyntaxHighlighter. If not, see . 29 | */ 30 | SyntaxHighlighter.brushes.Perl = function() 31 | { 32 | // Contributed by David Simmons-Duffin and Marty Kube 33 | 34 | var funcs = 35 | 'abs accept alarm atan2 bind binmode chdir chmod chomp chop chown chr ' + 36 | 'chroot close closedir connect cos crypt defined delete each endgrent ' + 37 | 'endhostent endnetent endprotoent endpwent endservent eof exec exists ' + 38 | 'exp fcntl fileno flock fork format formline getc getgrent getgrgid ' + 39 | 'getgrnam gethostbyaddr gethostbyname gethostent getlogin getnetbyaddr ' + 40 | 'getnetbyname getnetent getpeername getpgrp getppid getpriority ' + 41 | 'getprotobyname getprotobynumber getprotoent getpwent getpwnam getpwuid ' + 42 | 'getservbyname getservbyport getservent getsockname getsockopt glob ' + 43 | 'gmtime grep hex index int ioctl join keys kill lc lcfirst length link ' + 44 | 'listen localtime lock log lstat map mkdir msgctl msgget msgrcv msgsnd ' + 45 | 'oct open opendir ord pack pipe pop pos print printf prototype push ' + 46 | 'quotemeta rand read readdir readline readlink readpipe recv rename ' + 47 | 'reset reverse rewinddir rindex rmdir scalar seek seekdir select semctl ' + 48 | 'semget semop send setgrent sethostent setnetent setpgrp setpriority ' + 49 | 'setprotoent setpwent setservent setsockopt shift shmctl shmget shmread ' + 50 | 'shmwrite shutdown sin sleep socket socketpair sort splice split sprintf ' + 51 | 'sqrt srand stat study substr symlink syscall sysopen sysread sysseek ' + 52 | 'system syswrite tell telldir time times tr truncate uc ucfirst umask ' + 53 | 'undef unlink unpack unshift utime values vec wait waitpid warn write'; 54 | 55 | var keywords = 56 | 'bless caller continue dbmclose dbmopen die do dump else elsif eval exit ' + 57 | 'for foreach goto if import last local my next no our package redo ref ' + 58 | 'require return sub tie tied unless untie until use wantarray while'; 59 | 60 | this.regexList = [ 61 | { regex: new RegExp('#[^!].*$', 'gm'), css: 'comments' }, 62 | { regex: new RegExp('^\\s*#!.*$', 'gm'), css: 'preprocessor' }, // shebang 63 | { regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' }, 64 | { regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' }, 65 | { regex: new RegExp('(\\$|@|%)\\w+', 'g'), css: 'variable' }, 66 | { regex: new RegExp(this.getKeywords(funcs), 'gmi'), css: 'functions' }, 67 | { regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' } 68 | ]; 69 | 70 | this.forHtmlScript(SyntaxHighlighter.regexLib.phpScriptTags); 71 | } 72 | 73 | SyntaxHighlighter.brushes.Perl.prototype = new SyntaxHighlighter.Highlighter(); 74 | SyntaxHighlighter.brushes.Perl.aliases = ['perl', 'Perl', 'pl']; -------------------------------------------------------------------------------- /html5/syntax-highlighter/scripts/shBrushPlain.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SyntaxHighlighter 3 | * http://alexgorbatchev.com/ 4 | * 5 | * SyntaxHighlighter is donationware. If you are using it, please donate. 6 | * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate 7 | * 8 | * @version 9 | * 2.0.296 (March 01 2009) 10 | * 11 | * @copyright 12 | * Copyright (C) 2004-2009 Alex Gorbatchev. 13 | * 14 | * @license 15 | * This file is part of SyntaxHighlighter. 16 | * 17 | * SyntaxHighlighter is free software: you can redistribute it and/or modify 18 | * it under the terms of the GNU General Public License as published by 19 | * the Free Software Foundation, either version 3 of the License, or 20 | * (at your option) any later version. 21 | * 22 | * SyntaxHighlighter is distributed in the hope that it will be useful, 23 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 24 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 25 | * GNU General Public License for more details. 26 | * 27 | * You should have received a copy of the GNU General Public License 28 | * along with SyntaxHighlighter. If not, see . 29 | */ 30 | SyntaxHighlighter.brushes.Plain = function() 31 | { 32 | }; 33 | 34 | SyntaxHighlighter.brushes.Plain.prototype = new SyntaxHighlighter.Highlighter(); 35 | SyntaxHighlighter.brushes.Plain.aliases = ['text', 'plain']; 36 | -------------------------------------------------------------------------------- /html5/syntax-highlighter/scripts/shBrushPython.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SyntaxHighlighter 3 | * http://alexgorbatchev.com/ 4 | * 5 | * SyntaxHighlighter is donationware. If you are using it, please donate. 6 | * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate 7 | * 8 | * @version 9 | * 2.0.296 (March 01 2009) 10 | * 11 | * @copyright 12 | * Copyright (C) 2004-2009 Alex Gorbatchev. 13 | * 14 | * @license 15 | * This file is part of SyntaxHighlighter. 16 | * 17 | * SyntaxHighlighter is free software: you can redistribute it and/or modify 18 | * it under the terms of the GNU General Public License as published by 19 | * the Free Software Foundation, either version 3 of the License, or 20 | * (at your option) any later version. 21 | * 22 | * SyntaxHighlighter is distributed in the hope that it will be useful, 23 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 24 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 25 | * GNU General Public License for more details. 26 | * 27 | * You should have received a copy of the GNU General Public License 28 | * along with SyntaxHighlighter. If not, see . 29 | */ 30 | SyntaxHighlighter.brushes.Python = function() 31 | { 32 | // Contributed by Gheorghe Milas 33 | 34 | var keywords = 'and assert break class continue def del elif else ' + 35 | 'except exec finally for from global if import in is ' + 36 | 'lambda not or pass print raise return try yield while'; 37 | 38 | var special = 'None True False self cls class_'; 39 | 40 | this.regexList = [ 41 | { regex: SyntaxHighlighter.regexLib.singleLinePerlComments, css: 'comments' }, 42 | { regex: /^\s*@\w+/gm, css: 'decorator' }, 43 | { regex: /(['\"]{3})([^\1])*?\1/gm, css: 'comments' }, 44 | { regex: /"(?!")(?:\.|\\\"|[^\""\n])*"/gm, css: 'string' }, 45 | { regex: /'(?!')(?:\.|(\\\')|[^\''\n])*'/gm, css: 'string' }, 46 | { regex: /\+|\-|\*|\/|\%|=|==/gm, css: 'keyword' }, 47 | { regex: /\b\d+\.?\w*/g, css: 'value' }, 48 | { regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' }, 49 | { regex: new RegExp(this.getKeywords(special), 'gm'), css: 'color1' } 50 | ]; 51 | 52 | this.forHtmlScript(SyntaxHighlighter.regexLib.aspScriptTags); 53 | }; 54 | 55 | SyntaxHighlighter.brushes.Python.prototype = new SyntaxHighlighter.Highlighter(); 56 | SyntaxHighlighter.brushes.Python.aliases = ['py', 'python']; 57 | -------------------------------------------------------------------------------- /html5/syntax-highlighter/scripts/shBrushRuby.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SyntaxHighlighter 3 | * http://alexgorbatchev.com/ 4 | * 5 | * SyntaxHighlighter is donationware. If you are using it, please donate. 6 | * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate 7 | * 8 | * @version 9 | * 2.0.296 (March 01 2009) 10 | * 11 | * @copyright 12 | * Copyright (C) 2004-2009 Alex Gorbatchev. 13 | * 14 | * @license 15 | * This file is part of SyntaxHighlighter. 16 | * 17 | * SyntaxHighlighter is free software: you can redistribute it and/or modify 18 | * it under the terms of the GNU General Public License as published by 19 | * the Free Software Foundation, either version 3 of the License, or 20 | * (at your option) any later version. 21 | * 22 | * SyntaxHighlighter is distributed in the hope that it will be useful, 23 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 24 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 25 | * GNU General Public License for more details. 26 | * 27 | * You should have received a copy of the GNU General Public License 28 | * along with SyntaxHighlighter. If not, see . 29 | */ 30 | SyntaxHighlighter.brushes.Ruby = function() 31 | { 32 | // Contributed by Erik Peterson. 33 | 34 | var keywords = 'alias and BEGIN begin break case class def define_method defined do each else elsif ' + 35 | 'END end ensure false for if in module new next nil not or raise redo rescue retry return ' + 36 | 'self super then throw true undef unless until when while yield'; 37 | 38 | var builtins = 'Array Bignum Binding Class Continuation Dir Exception FalseClass File::Stat File Fixnum Fload ' + 39 | 'Hash Integer IO MatchData Method Module NilClass Numeric Object Proc Range Regexp String Struct::TMS Symbol ' + 40 | 'ThreadGroup Thread Time TrueClass'; 41 | 42 | this.regexList = [ 43 | { regex: SyntaxHighlighter.regexLib.singleLinePerlComments, css: 'comments' }, // one line comments 44 | { regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' }, // double quoted strings 45 | { regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' }, // single quoted strings 46 | { regex: /\b[A-Z0-9_]+\b/g, css: 'constants' }, // constants 47 | { regex: /:[a-z][A-Za-z0-9_]*/g, css: 'color2' }, // symbols 48 | { regex: /(\$|@@|@)\w+/g, css: 'variable bold' }, // $global, @instance, and @@class variables 49 | { regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' }, // keywords 50 | { regex: new RegExp(this.getKeywords(builtins), 'gm'), css: 'color1' } // builtins 51 | ]; 52 | 53 | this.forHtmlScript(SyntaxHighlighter.regexLib.aspScriptTags); 54 | }; 55 | 56 | SyntaxHighlighter.brushes.Ruby.prototype = new SyntaxHighlighter.Highlighter(); 57 | SyntaxHighlighter.brushes.Ruby.aliases = ['ruby', 'rails', 'ror']; 58 | -------------------------------------------------------------------------------- /html5/syntax-highlighter/scripts/shBrushScala.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SyntaxHighlighter 3 | * http://alexgorbatchev.com/ 4 | * 5 | * SyntaxHighlighter is donationware. If you are using it, please donate. 6 | * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate 7 | * 8 | * @version 9 | * 2.0.296 (March 01 2009) 10 | * 11 | * @copyright 12 | * Copyright (C) 2004-2009 Alex Gorbatchev. 13 | * 14 | * @license 15 | * This file is part of SyntaxHighlighter. 16 | * 17 | * SyntaxHighlighter is free software: you can redistribute it and/or modify 18 | * it under the terms of the GNU General Public License as published by 19 | * the Free Software Foundation, either version 3 of the License, or 20 | * (at your option) any later version. 21 | * 22 | * SyntaxHighlighter is distributed in the hope that it will be useful, 23 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 24 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 25 | * GNU General Public License for more details. 26 | * 27 | * You should have received a copy of the GNU General Public License 28 | * along with SyntaxHighlighter. If not, see . 29 | */ 30 | SyntaxHighlighter.brushes.Scala = function() 31 | { 32 | // Contributed by Yegor Jbanov and David Bernard. 33 | 34 | var keywords = 'val sealed case def true trait implicit forSome import match object null finally super ' + 35 | 'override try lazy for var catch throw type extends class while with new final yield abstract ' + 36 | 'else do if return protected private this package false'; 37 | 38 | var keyops = '[_:=><%#@]+'; 39 | 40 | this.regexList = [ 41 | { regex: SyntaxHighlighter.regexLib.singleLineCComments, css: 'comments' }, // one line comments 42 | { regex: SyntaxHighlighter.regexLib.multiLineCComments, css: 'comments' }, // multiline comments 43 | { regex: SyntaxHighlighter.regexLib.multiLineSingleQuotedString, css: 'string' }, // multi-line strings 44 | { regex: SyntaxHighlighter.regexLib.multiLineDoubleQuotedString, css: 'string' }, // double-quoted string 45 | { regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' }, // strings 46 | { regex: /0x[a-f0-9]+|\d+(\.\d+)?/gi, css: 'value' }, // numbers 47 | { regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' }, // keywords 48 | { regex: new RegExp(keyops, 'gm'), css: 'keyword' } // scala keyword 49 | ]; 50 | } 51 | 52 | SyntaxHighlighter.brushes.Scala.prototype = new SyntaxHighlighter.Highlighter(); 53 | SyntaxHighlighter.brushes.Scala.aliases = ['scala']; 54 | -------------------------------------------------------------------------------- /html5/syntax-highlighter/scripts/shBrushSql.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SyntaxHighlighter 3 | * http://alexgorbatchev.com/ 4 | * 5 | * SyntaxHighlighter is donationware. If you are using it, please donate. 6 | * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate 7 | * 8 | * @version 9 | * 2.0.296 (March 01 2009) 10 | * 11 | * @copyright 12 | * Copyright (C) 2004-2009 Alex Gorbatchev. 13 | * 14 | * @license 15 | * This file is part of SyntaxHighlighter. 16 | * 17 | * SyntaxHighlighter is free software: you can redistribute it and/or modify 18 | * it under the terms of the GNU General Public License as published by 19 | * the Free Software Foundation, either version 3 of the License, or 20 | * (at your option) any later version. 21 | * 22 | * SyntaxHighlighter is distributed in the hope that it will be useful, 23 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 24 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 25 | * GNU General Public License for more details. 26 | * 27 | * You should have received a copy of the GNU General Public License 28 | * along with SyntaxHighlighter. If not, see . 29 | */ 30 | SyntaxHighlighter.brushes.Sql = function() 31 | { 32 | var funcs = 'abs avg case cast coalesce convert count current_timestamp ' + 33 | 'current_user day isnull left lower month nullif replace right ' + 34 | 'session_user space substring sum system_user upper user year'; 35 | 36 | var keywords = 'absolute action add after alter as asc at authorization begin bigint ' + 37 | 'binary bit by cascade char character check checkpoint close collate ' + 38 | 'column commit committed connect connection constraint contains continue ' + 39 | 'create cube current current_date current_time cursor database date ' + 40 | 'deallocate dec decimal declare default delete desc distinct double drop ' + 41 | 'dynamic else end end-exec escape except exec execute false fetch first ' + 42 | 'float for force foreign forward free from full function global goto grant ' + 43 | 'group grouping having hour ignore index inner insensitive insert instead ' + 44 | 'int integer intersect into is isolation key last level load local max min ' + 45 | 'minute modify move name national nchar next no numeric of off on only ' + 46 | 'open option order out output partial password precision prepare primary ' + 47 | 'prior privileges procedure public read real references relative repeatable ' + 48 | 'restrict return returns revoke rollback rollup rows rule schema scroll ' + 49 | 'second section select sequence serializable set size smallint static ' + 50 | 'statistics table temp temporary then time timestamp to top transaction ' + 51 | 'translation trigger true truncate uncommitted union unique update values ' + 52 | 'varchar varying view when where with work'; 53 | 54 | var operators = 'all and any between cross in join like not null or outer some'; 55 | 56 | this.regexList = [ 57 | { regex: /--(.*)$/gm, css: 'comments' }, // one line and multiline comments 58 | { regex: SyntaxHighlighter.regexLib.multiLineDoubleQuotedString, css: 'string' }, // double quoted strings 59 | { regex: SyntaxHighlighter.regexLib.multiLineSingleQuotedString, css: 'string' }, // single quoted strings 60 | { regex: new RegExp(this.getKeywords(funcs), 'gmi'), css: 'color2' }, // functions 61 | { regex: new RegExp(this.getKeywords(operators), 'gmi'), css: 'color1' }, // operators and such 62 | { regex: new RegExp(this.getKeywords(keywords), 'gmi'), css: 'keyword' } // keyword 63 | ]; 64 | }; 65 | 66 | SyntaxHighlighter.brushes.Sql.prototype = new SyntaxHighlighter.Highlighter(); 67 | SyntaxHighlighter.brushes.Sql.aliases = ['sql']; 68 | 69 | -------------------------------------------------------------------------------- /html5/syntax-highlighter/scripts/shBrushVb.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SyntaxHighlighter 3 | * http://alexgorbatchev.com/ 4 | * 5 | * SyntaxHighlighter is donationware. If you are using it, please donate. 6 | * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate 7 | * 8 | * @version 9 | * 2.0.296 (March 01 2009) 10 | * 11 | * @copyright 12 | * Copyright (C) 2004-2009 Alex Gorbatchev. 13 | * 14 | * @license 15 | * This file is part of SyntaxHighlighter. 16 | * 17 | * SyntaxHighlighter is free software: you can redistribute it and/or modify 18 | * it under the terms of the GNU General Public License as published by 19 | * the Free Software Foundation, either version 3 of the License, or 20 | * (at your option) any later version. 21 | * 22 | * SyntaxHighlighter is distributed in the hope that it will be useful, 23 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 24 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 25 | * GNU General Public License for more details. 26 | * 27 | * You should have received a copy of the GNU General Public License 28 | * along with SyntaxHighlighter. If not, see . 29 | */ 30 | SyntaxHighlighter.brushes.Vb = function() 31 | { 32 | var keywords = 'AddHandler AddressOf AndAlso Alias And Ansi As Assembly Auto ' + 33 | 'Boolean ByRef Byte ByVal Call Case Catch CBool CByte CChar CDate ' + 34 | 'CDec CDbl Char CInt Class CLng CObj Const CShort CSng CStr CType ' + 35 | 'Date Decimal Declare Default Delegate Dim DirectCast Do Double Each ' + 36 | 'Else ElseIf End Enum Erase Error Event Exit False Finally For Friend ' + 37 | 'Function Get GetType GoSub GoTo Handles If Implements Imports In ' + 38 | 'Inherits Integer Interface Is Let Lib Like Long Loop Me Mod Module ' + 39 | 'MustInherit MustOverride MyBase MyClass Namespace New Next Not Nothing ' + 40 | 'NotInheritable NotOverridable Object On Option Optional Or OrElse ' + 41 | 'Overloads Overridable Overrides ParamArray Preserve Private Property ' + 42 | 'Protected Public RaiseEvent ReadOnly ReDim REM RemoveHandler Resume ' + 43 | 'Return Select Set Shadows Shared Short Single Static Step Stop String ' + 44 | 'Structure Sub SyncLock Then Throw To True Try TypeOf Unicode Until ' + 45 | 'Variant When While With WithEvents WriteOnly Xor'; 46 | 47 | this.regexList = [ 48 | { regex: /'.*$/gm, css: 'comments' }, // one line comments 49 | { regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' }, // strings 50 | { regex: /^\s*#.*$/gm, css: 'preprocessor' }, // preprocessor tags like #region and #endregion 51 | { regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' } // vb keyword 52 | ]; 53 | 54 | this.forHtmlScript(SyntaxHighlighter.regexLib.aspScriptTags); 55 | }; 56 | 57 | SyntaxHighlighter.brushes.Vb.prototype = new SyntaxHighlighter.Highlighter(); 58 | SyntaxHighlighter.brushes.Vb.aliases = ['vb', 'vbnet']; 59 | -------------------------------------------------------------------------------- /html5/syntax-highlighter/scripts/shBrushXml.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SyntaxHighlighter 3 | * http://alexgorbatchev.com/ 4 | * 5 | * SyntaxHighlighter is donationware. If you are using it, please donate. 6 | * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate 7 | * 8 | * @version 9 | * 2.0.296 (March 01 2009) 10 | * 11 | * @copyright 12 | * Copyright (C) 2004-2009 Alex Gorbatchev. 13 | * 14 | * @license 15 | * This file is part of SyntaxHighlighter. 16 | * 17 | * SyntaxHighlighter is free software: you can redistribute it and/or modify 18 | * it under the terms of the GNU General Public License as published by 19 | * the Free Software Foundation, either version 3 of the License, or 20 | * (at your option) any later version. 21 | * 22 | * SyntaxHighlighter is distributed in the hope that it will be useful, 23 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 24 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 25 | * GNU General Public License for more details. 26 | * 27 | * You should have received a copy of the GNU General Public License 28 | * along with SyntaxHighlighter. If not, see . 29 | */ 30 | SyntaxHighlighter.brushes.Xml = function() 31 | { 32 | function process(match, regexInfo) 33 | { 34 | var constructor = SyntaxHighlighter.Match, 35 | code = match[0], 36 | tag = new XRegExp('(<|<)[\\s\\/\\?]*(?[:\\w-\\.]+)', 'xg').exec(code), 37 | result = [] 38 | ; 39 | 40 | if (match.attributes != null) 41 | { 42 | var attributes, 43 | regex = new XRegExp('(? [\\w:\\-\\.]+)' + 44 | '\\s*=\\s*' + 45 | '(? ".*?"|\'.*?\'|\\w+)', 46 | 'xg'); 47 | 48 | while ((attributes = regex.exec(code)) != null) 49 | { 50 | result.push(new constructor(attributes.name, match.index + attributes.index, 'color1')); 51 | result.push(new constructor(attributes.value, match.index + attributes.index + attributes[0].indexOf(attributes.value), 'string')); 52 | } 53 | } 54 | 55 | if (tag != null) 56 | result.push( 57 | new constructor(tag.name, match.index + tag[0].indexOf(tag.name), 'keyword') 58 | ); 59 | 60 | return result; 61 | } 62 | 63 | this.regexList = [ 64 | { regex: new XRegExp('(\\<|<)\\!\\[[\\w\\s]*?\\[(.|\\s)*?\\]\\](\\>|>)', 'gm'), css: 'color2' }, // 65 | { regex: new XRegExp('(\\<|<)!--\\s*.*?\\s*--(\\>|>)', 'gm'), css: 'comments' }, // 66 | { regex: new XRegExp('(<|<)[\\s\\/\\?]*(\\w+)(?.*?)[\\s\\/\\?]*(>|>)', 'sg'), func: process } 67 | ]; 68 | }; 69 | 70 | SyntaxHighlighter.brushes.Xml.prototype = new SyntaxHighlighter.Highlighter(); 71 | SyntaxHighlighter.brushes.Xml.aliases = ['xml', 'xhtml', 'xslt', 'html', 'xhtml']; 72 | -------------------------------------------------------------------------------- /html5/syntax-highlighter/scripts/shHTMLJavaScript.gz.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5/syntax-highlighter/scripts/shHTMLJavaScript.gz.js -------------------------------------------------------------------------------- /html5/syntax-highlighter/scripts/shJavaScript.gz.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5/syntax-highlighter/scripts/shJavaScript.gz.js -------------------------------------------------------------------------------- /html5/syntax-highlighter/scripts/shLegacy.js: -------------------------------------------------------------------------------- 1 | /** 2 | * SyntaxHighlighter 3 | * http://alexgorbatchev.com/ 4 | * 5 | * SyntaxHighlighter is donationware. If you are using it, please donate. 6 | * http://alexgorbatchev.com/wiki/SyntaxHighlighter:Donate 7 | * 8 | * @version 9 | * 2.0.296 (March 01 2009) 10 | * 11 | * @copyright 12 | * Copyright (C) 2004-2009 Alex Gorbatchev. 13 | * 14 | * @license 15 | * This file is part of SyntaxHighlighter. 16 | * 17 | * SyntaxHighlighter is free software: you can redistribute it and/or modify 18 | * it under the terms of the GNU General Public License as published by 19 | * the Free Software Foundation, either version 3 of the License, or 20 | * (at your option) any later version. 21 | * 22 | * SyntaxHighlighter is distributed in the hope that it will be useful, 23 | * but WITHOUT ANY WARRANTY; without even the implied warranty of 24 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 25 | * GNU General Public License for more details. 26 | * 27 | * You should have received a copy of the GNU General Public License 28 | * along with SyntaxHighlighter. If not, see . 29 | */ 30 | eval(function(p,a,c,k,e,d){e=function(c){return(c35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('1 y={d:{}};y.d={F:6(S,l,q,k,m,n){6 J(z,Y){1 V=16 15("^"+Y+"\\\\[(?\\\\w+)\\\\]$","14"),x=2;h(1 i=0;i 3 | 4 | 5 | 6 | Video - Web browser native video playback - robertnyman.com 7 | 8 | 14 | 17 | 18 | 19 | 20 | 21 |
22 |
23 |

Video - To: Information and samples for HTML5 and related APIs

24 |

Using the video element native in the web browser to playback a video.

25 |
26 | 27 |
28 |
29 | 30 | 35 | 36 | 39 | 40 | 84 |
85 |
86 | 87 | 90 |
91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /html5/video/swedish-flag.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5/video/swedish-flag.mp4 -------------------------------------------------------------------------------- /html5/video/swedish-flag.ogv: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5/video/swedish-flag.ogv -------------------------------------------------------------------------------- /html5/video/video-demo copy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Video - Web browser native video playback - robertnyman.com 7 | 8 | 14 | 17 | 18 | 19 | 20 | 21 |
22 |
23 |

Video - To: Information and samples for HTML5 and related APIs

24 |

Using the video element native in the web browser to playback a video.

25 |
26 | 27 |
28 |
29 | 30 | 35 | 36 |

Code used in this page

37 |
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 |
45 |
46 | 47 | 50 |
51 | 52 | 53 | 54 | 57 | 58 | 73 | 74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /html5/video/video-demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Video - Web browser native video playback - robertnyman.com 6 | 7 | 13 | 16 | 17 | 18 | 19 | 20 |
21 |
22 |

Video - To: Information and samples for HTML5 and related APIs

23 |

Using the video element native in the web browser to playback a video.

24 |
25 | 26 |
27 |
28 | 29 | 34 | 35 |

Code used in this page

36 |
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 |
44 |
45 | 46 | 49 |
50 | 51 | 52 | 53 | 56 | 57 | 72 | 73 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /html5/webworkers/worker.js: -------------------------------------------------------------------------------- 1 | onmessage = function (evt) { 2 | for (var i=evt.data, il=1000001; i 2 | 3 | 4 | 5 | Canvas - The Cure 6 | 7 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |

Canvas - The Cure

20 |
21 | 22 |
23 |
24 | 25 | I am canvas 26 | 27 | 28 |
29 |
30 | 31 | 35 |
36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /html5demos/canvas-drag-n-drop/js/cure.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var canvas = document.getElementById("my-canvas"), 3 | context = canvas.getContext("2d"), 4 | img = document.createElement("img"), 5 | mouseDown = false, 6 | brushColor = "rgb(0, 0, 0)", 7 | hasText = true, 8 | clearCanvas = function () { 9 | if (hasText) { 10 | context.clearRect(0, 0, canvas.width, canvas.height); 11 | hasText = false; 12 | } 13 | }; 14 | 15 | // Adding instructions 16 | context.fillText("Drop an image onto the canvas", 240, 200); 17 | context.fillText("Click a spot to set as brush color", 240, 220); 18 | 19 | // Image for loading 20 | img.addEventListener("load", function () { 21 | clearCanvas(); 22 | console.log("Draw image"); 23 | context.drawImage(img, 0, 0); 24 | }, false); 25 | 26 | // Detect mousedown 27 | canvas.addEventListener("mousedown", function (evt) { 28 | clearCanvas(); 29 | mouseDown = true; 30 | context.beginPath(); 31 | }, false); 32 | 33 | // Detect mouseup 34 | canvas.addEventListener("mouseup", function (evt) { 35 | mouseDown = false; 36 | var colors = context.getImageData(evt.layerX, evt.layerY, 1, 1).data; 37 | brushColor = "rgb(" + colors[0] + ", " + colors[1] + ", " + colors[2] + ")"; 38 | }, false); 39 | 40 | // Draw, if mouse button is pressed 41 | canvas.addEventListener("mousemove", function (evt) { 42 | if (mouseDown) { 43 | context.strokeStyle = brushColor; 44 | context.lineWidth = 20; 45 | context.lineJoin = "round"; 46 | context.lineTo(evt.layerX+1, evt.layerY+1); 47 | context.stroke(); 48 | } 49 | }, false); 50 | 51 | // To enable drag and drop 52 | canvas.addEventListener("dragover", function (evt) { 53 | evt.preventDefault(); 54 | }, false); 55 | 56 | // Handle dropped image file - only Firefox and Google Chrome 57 | canvas.addEventListener("drop", function (evt) { 58 | var files = evt.dataTransfer.files; 59 | if (files.length > 0) { 60 | var file = files[0]; 61 | if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) { 62 | var reader = new FileReader(); 63 | // Note: addEventListener doesn't work in Google Chrome for this object 64 | reader.onload = function (evt) { 65 | console.log("Loaded!"); 66 | img.src = evt.target.result; 67 | }; 68 | reader.readAsDataURL(file); 69 | } 70 | } 71 | evt.preventDefault(); 72 | }, false); 73 | 74 | // Save image 75 | var saveImage = document.createElement("button"); 76 | saveImage.innerHTML = "Save canvas"; 77 | saveImage.addEventListener("click", function (evt) { 78 | window.open(canvas.toDataURL("image/png")); 79 | evt.preventDefault(); 80 | }, false); 81 | document.getElementById("main-content").appendChild(saveImage); 82 | })(); 83 | -------------------------------------------------------------------------------- /html5demos/canvas-drag-n-drop/robert-nyman.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5demos/canvas-drag-n-drop/robert-nyman.jpg -------------------------------------------------------------------------------- /html5demos/formdata/css/base.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 12px "Helvetica Neue", "Helvetica", sans-serif; 3 | background: #ccc; 4 | } 5 | 6 | h1 { 7 | margin-top: 0; 8 | } 9 | 10 | img { 11 | padding: 10px; 12 | box-shadow: 0 0 10px 2px #ccc; 13 | margin-bottom: 5px; 14 | } 15 | 16 | figcaption { 17 | font-style: italic; 18 | } 19 | 20 | .container { 21 | width: 900px; 22 | background: #fff; 23 | border-radius: 10px; 24 | margin: 0 auto; 25 | padding: 30px; 26 | } 27 | 28 | header { 29 | margin-bottom: 20px; 30 | border-bottom: 1px solid #000; 31 | } 32 | 33 | .main-content { 34 | overflow: hidden; 35 | } 36 | 37 | .additional-content { 38 | float: right; 39 | width: 300px; 40 | height: 400px; 41 | padding: 10px; 42 | background: #ccc; 43 | border-radius: 5px 44 | } 45 | 46 | .page-footer { 47 | border-top: 1px solid #000; 48 | margin-top: 30px; 49 | padding-top: 10px; 50 | } 51 | 52 | -------------------------------------------------------------------------------- /html5demos/formdata/getfile.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /html5demos/formdata/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML5 demo with FormData 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 16 | 17 |
18 |
19 | 20 | 25 | 26 |

Rhino, sent with FormData, retrieved back and shown through a data URL.

27 |
28 | A close up of a rhino 29 |
Rhinos are big!
30 |
31 | 32 |
33 |
34 | 35 | 39 | 40 |
41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /html5demos/formdata/js/base.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | // Getting a file through XMLHttpRequest as an arraybuffer and creating a Blob 3 | var rhino = document.querySelector("#rhino"); 4 | if (rhino) { 5 | var xhr = new XMLHttpRequest(), 6 | blob; 7 | 8 | xhr.open("GET", "rhino.png", true); 9 | /* 10 | Set the responseType to "blob". 11 | If it isn't supported in the targeted web browser, 12 | use "arraybuffer" instead and wrap the response 13 | with new Uint8Array() below 14 | */ 15 | xhr.responseType = "blob"; 16 | 17 | xhr.onreadystatechange = function () { 18 | if (xhr.readyState === 4 && xhr.status === 200) { 19 | /* 20 | Create a blob from the response 21 | Only needed if the responseType isn't already blob 22 | If it's "arraybuffer", do this: 23 | 24 | blob = new Blob([new Uint8Array(xhr.response)], {type: "image/png"}); 25 | */ 26 | blob = xhr.response; 27 | var form = new FormData(); 28 | form.append("blobbie", blob); 29 | 30 | var xhrForm = new XMLHttpRequest(); 31 | xhrForm.open("POST", "getfile.php"); 32 | xhrForm.send(form); 33 | 34 | xhrForm.onreadystatechange = function () { 35 | if (xhrForm.readyState === 4) { 36 | console.log(xhrForm.response); 37 | rhino.src = xhrForm.response; 38 | } 39 | }; 40 | } 41 | }; 42 | // Send XHR 43 | xhr.send(); 44 | } 45 | })(); 46 | -------------------------------------------------------------------------------- /html5demos/formdata/rhino.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5demos/formdata/rhino.png -------------------------------------------------------------------------------- /html5demos/forms/css/base.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 12px "Helvetica Neue", "Helvetica", sans-serif; 3 | background: #ccc; 4 | } 5 | 6 | h2 { 7 | margin-top: 40px; 8 | } 9 | 10 | .container { 11 | width: 600px; 12 | background: #fff; 13 | border-radius: 10px; 14 | margin: 0 auto; 15 | padding: 30px; 16 | } 17 | 18 | img { 19 | padding: 10px; 20 | box-shadow: 0 0 10px 2px #000; 21 | margin-bottom: 5px; 22 | } 23 | 24 | figcaption { 25 | font-style: italic; 26 | } 27 | 28 | .additional-content { 29 | float: right; 30 | } 31 | 32 | .page-footer { 33 | border-top: 1px solid #000; 34 | margin-top: 30px; 35 | padding-top: 10px; 36 | } 37 | 38 | -------------------------------------------------------------------------------- /html5demos/forms/elements.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML5 Forms - robertnyman.com 6 | 7 | 41 | 42 | 43 | 44 | 45 |
46 | 47 |
48 |
49 |

HTML5 Forms elements

50 | 51 |
52 | 53 |
54 |

Datalist

55 | 56 | 57 | 63 |
64 | 65 |
66 |

Keygen

67 | 68 |
69 | 70 |
71 |

Meter

72 | 73 |
74 | 75 |
76 |

Output

77 |

If input type="range" and the oninput event on forms are supported in your web browser, slide the range below to see the value in the output element.

78 | 79 | 80 |
81 | 82 | 92 | 93 |
94 |

Progress

95 | 70% 96 |
97 | 98 |
99 | 100 |
101 | 102 |
103 | 104 |
105 |
106 | 107 | 111 | 112 |
113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /html5demos/html/css/base.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 12px "Helvetica Neue", "Helvetica", sans-serif; 3 | background: #ccc; 4 | } 5 | 6 | h1 { 7 | margin-top: 0; 8 | } 9 | 10 | h2 { 11 | margin-top: 40px; 12 | } 13 | 14 | img { 15 | padding: 10px; 16 | box-shadow: 0 0 10px 2px #000; 17 | margin-bottom: 5px; 18 | } 19 | 20 | figcaption { 21 | font-style: italic; 22 | } 23 | 24 | .container { 25 | width: 900px; 26 | background: #fff; 27 | border-radius: 10px; 28 | margin: 0 auto; 29 | padding: 30px; 30 | } 31 | 32 | header { 33 | margin-bottom: 20px; 34 | border-bottom: 1px solid #000; 35 | } 36 | 37 | .main-content { 38 | overflow: hidden; 39 | } 40 | 41 | .additional-content { 42 | float: right; 43 | width: 300px; 44 | height: 400px; 45 | padding: 10px; 46 | background: #ccc; 47 | border-radius: 5px 48 | } 49 | 50 | .page-footer { 51 | border-top: 1px solid #000; 52 | margin-top: 30px; 53 | padding-top: 10px; 54 | } 55 | 56 | -------------------------------------------------------------------------------- /html5demos/html/elephant.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5demos/html/elephant.jpg -------------------------------------------------------------------------------- /html5demos/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML5 demo page 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 16 | 17 |
18 |
19 | 20 | 26 | 27 |

Figure

28 | 29 |

This image below is loaded via JavaScript, and at reload, if available, as a data URL from localStorage.

30 |
31 | A close up of an elephant 32 |
A mighty big elephant, and mighty close too!
33 |
34 | 35 | 36 |

Custom data attributes

37 |

An element with custom data attributes

38 | 39 | 40 |

SVG

41 | 42 | 43 | 44 | 45 | 46 |

classList

47 |
48 | classList element 49 |
50 | 51 | 52 |
53 |
54 | 55 | 59 | 60 |
61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /html5demos/html/js/base.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | // localStorage 3 | var imgInfo = JSON.parse(localStorage.getItem("imgInfo")) || {}, 4 | elephant = document.getElementById("elephant"), 5 | imgInfoDate = imgInfo.date, 6 | date = new Date(), 7 | todaysDate = (date.getMonth() + 1).toString() + date.getDate().toString(); 8 | 9 | // Compare date and create localStorage if it's not existing/too old 10 | if (typeof imgInfoDate === "undefined" || imgInfoDate < todaysDate) { 11 | elephant.addEventListener("load", function () { 12 | var imgCanvas = document.createElement("canvas"), 13 | imgContext = imgCanvas.getContext("2d"); 14 | 15 | // Make sure canvas is as big as the picture 16 | imgCanvas.width = elephant.width; 17 | imgCanvas.height = elephant.height; 18 | 19 | // Draw image into canvas element 20 | imgContext.drawImage(elephant, 0, 0, elephant.width, elephant.height); 21 | 22 | // Save image as a data URL 23 | imgInfo.src = imgCanvas.toDataURL("image/png"); 24 | 25 | // Set date for localStorage 26 | imgInfo.date = todaysDate; 27 | 28 | // Save as JSON in localStorage 29 | localStorage.setItem("imgInfo", JSON.stringify(imgInfo)); 30 | }, false); 31 | 32 | // Set initial image src 33 | elephant.setAttribute("src", "elephant.jpg"); 34 | } 35 | else { 36 | elephant.setAttribute("src", imgInfo.src); 37 | } 38 | 39 | // custom attributes 40 | var customAttributes = document.getElementById("custom-attributes"), 41 | attributes, 42 | dataset = []; 43 | attributes = "
data-type: " + customAttributes.getAttribute("data-type"); 44 | attributes += "
data-value: " + customAttributes.getAttribute("data-value"); 45 | attributes += "
dataset: "; 46 | for (var i in customAttributes.dataset) { 47 | dataset.push(i + ": " + customAttributes.dataset[i]); 48 | } 49 | attributes += dataset.join(", "); 50 | customAttributes.innerHTML += attributes; 51 | 52 | 53 | // classList 54 | var elm = document.getElementById("classlist-demo"); 55 | elm.classList.add("boxy"); 56 | elm.classList.add("pretty"); 57 | elm.classList.remove("pretty"); 58 | elm.classList.toggle("pretty"); 59 | elm.innerHTML += "
Contains pretty: " + elm.classList.contains("pretty"); 60 | elm.innerHTML += "
" + elm.classList.toString(); 61 | 62 | 63 | // IndexedDB 64 | var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB; 65 | 66 | var request = indexedDB.open("ABBADatabase", 2), 67 | db, 68 | customerData = [ 69 | { 70 | ssn: "444-44-4444", 71 | name: "Bill", 72 | age: 35, 73 | email: "bill@company.com" 74 | }, 75 | { 76 | ssn: "555-55-5555", 77 | name: "Donna", 78 | age: 32, 79 | email: "donna@home.org" 80 | } 81 | ]; 82 | 83 | request.onerror = function (event) { 84 | console.log("Error creating IndexedDB database"); 85 | }; 86 | 87 | request.onsuccess = function (event) { 88 | console.log("Success creating IndexedDB database"); 89 | db = request.result; 90 | }; 91 | 92 | request.onupgradeneeded = function (event) { 93 | if (typeof db !== "undefined") { 94 | var objectStore = db.createObjectStore("customers", { 95 | keyPath: "ssn" 96 | }); 97 | 98 | objectStore.createIndex("name", "name", { 99 | unique: false 100 | }); 101 | 102 | objectStore.createIndex("email", "email", { 103 | unique: true 104 | }); 105 | 106 | for (var i in customerData) { 107 | objectStore.add(customerData[i]); 108 | } 109 | } 110 | }; 111 | })(); 112 | -------------------------------------------------------------------------------- /html5demos/indexeddb/css/base.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 12px "Helvetica Neue", "Helvetica", sans-serif; 3 | background: #ccc; 4 | } 5 | 6 | h1 { 7 | margin-top: 0; 8 | } 9 | 10 | h2 { 11 | margin-top: 40px; 12 | } 13 | 14 | img { 15 | padding: 10px; 16 | box-shadow: 0 0 10px 2px #000; 17 | margin-bottom: 5px; 18 | } 19 | 20 | figcaption { 21 | font-style: italic; 22 | } 23 | 24 | .container { 25 | width: 900px; 26 | background: #fff; 27 | border-radius: 10px; 28 | margin: 0 auto; 29 | padding: 30px; 30 | } 31 | 32 | header { 33 | margin-bottom: 20px; 34 | border-bottom: 1px solid #000; 35 | } 36 | 37 | .main-content { 38 | overflow: hidden; 39 | } 40 | 41 | .additional-content { 42 | float: right; 43 | width: 300px; 44 | height: 400px; 45 | padding: 10px; 46 | background: #ccc; 47 | border-radius: 5px 48 | } 49 | 50 | .page-footer { 51 | border-top: 1px solid #000; 52 | margin-top: 30px; 53 | padding-top: 10px; 54 | } 55 | 56 | -------------------------------------------------------------------------------- /html5demos/indexeddb/elephant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5demos/indexeddb/elephant.png -------------------------------------------------------------------------------- /html5demos/indexeddb/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML5 with storing files in IndexedDB 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 16 | 17 |
18 |
19 | 20 | 26 | 27 |

Figure

28 | 29 |

If supported, this image below is loaded from IndexedDB through an objectURL.

30 |
31 | A close up of an elephant 32 |
A mighty big elephant, and mighty close too!
33 |
34 | 35 |
36 |
37 | 38 | 42 | 43 |
44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /html5demos/indexeddb/js/base.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | // IndexedDB 3 | var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB, 4 | IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction, 5 | dbVersion = 1.0; 6 | 7 | // Create/open database 8 | var request = indexedDB.open("elephantFiles", dbVersion), 9 | db, 10 | createObjectStore = function (dataBase) { 11 | // Create an objectStore 12 | console.log("Creating objectStore") 13 | dataBase.createObjectStore("elephants"); 14 | }, 15 | 16 | getImageFile = function () { 17 | // Create XHR 18 | var xhr = new XMLHttpRequest(), 19 | blob; 20 | 21 | xhr.open("GET", "elephant.png", true); 22 | // Set the responseType to blob 23 | xhr.responseType = "blob"; 24 | 25 | xhr.addEventListener("load", function () { 26 | if (xhr.status === 200) { 27 | console.log("Image retrieved"); 28 | 29 | // Blob as response 30 | blob = xhr.response; 31 | console.log("Blob:" + blob); 32 | 33 | // Put the received blob into IndexedDB 34 | putElephantInDb(blob); 35 | } 36 | }, false); 37 | // Send XHR 38 | xhr.send(); 39 | }, 40 | 41 | putElephantInDb = function (blob) { 42 | console.log("Putting elephants in IndexedDB"); 43 | 44 | // Open a transaction to the database 45 | var readWriteMode = typeof IDBTransaction.READ_WRITE == "undefined" ? "readwrite" : IDBTransaction.READ_WRITE; 46 | var transaction = db.transaction(["elephants"], readWriteMode); 47 | 48 | // Put the blob into the dabase 49 | var put = transaction.objectStore("elephants").put(blob, "image"); 50 | 51 | // Retrieve the file that was just stored 52 | transaction.objectStore("elephants").get("image").onsuccess = function (event) { 53 | var imgFile = event.target.result; 54 | console.log("Got elephant!" + imgFile); 55 | 56 | // Get window.URL object 57 | var URL = window.URL || window.webkitURL; 58 | 59 | // Create and revoke ObjectURL 60 | var imgURL = URL.createObjectURL(imgFile); 61 | 62 | // Set img src to ObjectURL 63 | var imgElephant = document.getElementById("elephant"); 64 | imgElephant.setAttribute("src", imgURL); 65 | 66 | // Revoking ObjectURL 67 | imgElephant.onload = function() { 68 | window.URL.revokeObjectURL(this.src); 69 | } 70 | }; 71 | }; 72 | 73 | request.onerror = function (event) { 74 | console.log("Error creating/accessing IndexedDB database"); 75 | }; 76 | 77 | request.onsuccess = function (event) { 78 | console.log("Success creating/accessing IndexedDB database"); 79 | db = request.result; 80 | 81 | db.onerror = function (event) { 82 | console.log("Error creating/accessing IndexedDB database"); 83 | }; 84 | 85 | // Interim solution for Google Chrome to create an objectStore. Will be deprecated 86 | if (db.setVersion) { 87 | if (db.version != dbVersion) { 88 | var setVersion = db.setVersion(dbVersion); 89 | setVersion.onsuccess = function () { 90 | createObjectStore(db); 91 | getImageFile(); 92 | }; 93 | } 94 | else { 95 | getImageFile(); 96 | } 97 | } 98 | else { 99 | getImageFile(); 100 | } 101 | } 102 | 103 | // For future use. Currently only in latest Firefox versions 104 | request.onupgradeneeded = function (event) { 105 | createObjectStore(event.target.result); 106 | }; 107 | })(); 108 | -------------------------------------------------------------------------------- /html5demos/localstorage/css/base.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 12px "Helvetica Neue", "Helvetica", sans-serif; 3 | background: #ccc; 4 | } 5 | 6 | h1 { 7 | margin-top: 0; 8 | } 9 | 10 | img { 11 | padding: 10px; 12 | box-shadow: 0 0 10px 2px #ccc; 13 | margin-bottom: 5px; 14 | } 15 | 16 | figcaption { 17 | font-style: italic; 18 | } 19 | 20 | .container { 21 | width: 900px; 22 | background: #fff; 23 | border-radius: 10px; 24 | margin: 0 auto; 25 | padding: 30px; 26 | } 27 | 28 | header { 29 | margin-bottom: 20px; 30 | border-bottom: 1px solid #000; 31 | } 32 | 33 | .main-content { 34 | overflow: hidden; 35 | } 36 | 37 | .additional-content { 38 | float: right; 39 | width: 300px; 40 | height: 400px; 41 | padding: 10px; 42 | background: #ccc; 43 | border-radius: 5px 44 | } 45 | 46 | .page-footer { 47 | border-top: 1px solid #000; 48 | margin-top: 30px; 49 | padding-top: 10px; 50 | } 51 | 52 | -------------------------------------------------------------------------------- /html5demos/localstorage/elephant.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5demos/localstorage/elephant.png -------------------------------------------------------------------------------- /html5demos/localstorage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML5 demo with localStorage and saving images and files in it 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 16 | 17 |
18 |
19 | 20 | 27 | 28 |

An elephant, with localStorage

29 | 30 |
31 | A close up of an elephant 32 | 36 |
A mighty big elephant, and mighty close too!
37 |
38 | 39 | 40 |

Rhino with XMLHttpRequest and reading file data

41 |
42 | A close up of a rhino 43 |
Rhinos are big!
44 |
45 | 46 |
47 |
48 | 49 | 53 | 54 |
55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /html5demos/localstorage/js/base.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | // localStorage with image 3 | var storageFiles = JSON.parse(localStorage.getItem("storageFiles")) || {}, 4 | elephant = document.getElementById("elephant"), 5 | storageFilesDate = storageFiles.date, 6 | date = new Date(), 7 | todaysDate = (date.getMonth() + 1).toString() + date.getDate().toString(); 8 | 9 | // Compare date and create localStorage if it's not existing/too old 10 | if (typeof storageFilesDate === "undefined" || storageFilesDate < todaysDate) { 11 | // Take action when the image has loaded 12 | elephant.addEventListener("load", function () { 13 | var imgCanvas = document.createElement("canvas"), 14 | imgContext = imgCanvas.getContext("2d"); 15 | 16 | // Make sure canvas is as big as the picture 17 | imgCanvas.width = elephant.width; 18 | imgCanvas.height = elephant.height; 19 | 20 | // Draw image into canvas element 21 | imgContext.drawImage(elephant, 0, 0, elephant.width, elephant.height); 22 | 23 | // Save image as a data URL 24 | storageFiles.elephant = imgCanvas.toDataURL("image/png"); 25 | 26 | // Set date for localStorage 27 | storageFiles.date = todaysDate; 28 | 29 | // Save as JSON in localStorage 30 | try { 31 | localStorage.setItem("storageFiles", JSON.stringify(storageFiles)); 32 | } 33 | catch (e) { 34 | console.log("Storage failed: " + e); 35 | } 36 | }, false); 37 | 38 | // Set initial image src 39 | elephant.setAttribute("src", "elephant.png"); 40 | } 41 | else { 42 | // Use image from localStorage 43 | elephant.setAttribute("src", storageFiles.elephant); 44 | } 45 | 46 | // Getting a file through XMLHttpRequest as an arraybuffer and creating a Blob 47 | var rhinoStorage = localStorage.getItem("rhino"), 48 | rhino = document.getElementById("rhino"); 49 | if (rhinoStorage) { 50 | // Reuse existing Data URL from localStorage 51 | rhino.setAttribute("src", rhinoStorage); 52 | } 53 | else { 54 | // Create XHR, BlobBuilder and FileReader objects 55 | var xhr = new XMLHttpRequest(), 56 | blob, 57 | fileReader = new FileReader(); 58 | 59 | xhr.open("GET", "rhino.png", true); 60 | // Set the responseType to arraybuffer. "blob" is an option too, rendering BlobBuilder unnecessary, but the support for "blob" is not widespread enough yet 61 | xhr.responseType = "arraybuffer"; 62 | 63 | xhr.addEventListener("load", function () { 64 | if (xhr.status === 200) { 65 | // Create a blob from the response 66 | blob = new Blob([xhr.response], {type: "image/png"}); 67 | 68 | // onload needed since Google Chrome doesn't support addEventListener for FileReader 69 | fileReader.onload = function (evt) { 70 | // Read out file contents as a Data URL 71 | var result = evt.target.result; 72 | // Set image src to Data URL 73 | rhino.setAttribute("src", result); 74 | // Store Data URL in localStorage 75 | try { 76 | localStorage.setItem("rhino", result); 77 | } 78 | catch (e) { 79 | console.log("Storage failed: " + e); 80 | } 81 | }; 82 | // Load blob as Data URL 83 | fileReader.readAsDataURL(blob); 84 | } 85 | }, false); 86 | // Send XHR 87 | xhr.send(); 88 | } 89 | })(); 90 | -------------------------------------------------------------------------------- /html5demos/localstorage/rhino.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5demos/localstorage/rhino.png -------------------------------------------------------------------------------- /html5demos/video-css3-svg/nasa.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5demos/video-css3-svg/nasa.mp4 -------------------------------------------------------------------------------- /html5demos/video-css3-svg/nasa.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/html5demos/video-css3-svg/nasa.webm -------------------------------------------------------------------------------- /matchmedia/css/base.css: -------------------------------------------------------------------------------- 1 | /* General font styles */ 2 | html { 3 | font: 100%/1.3 Verdana, Helvetica, Arial, sans-serif; 4 | } 5 | 6 | body { 7 | font: 70%/1.3 Verdana, Helvetica, Arial, sans-serif; 8 | } 9 | 10 | h1 { 11 | font: bold 2em Arial, sans-serif; 12 | } 13 | 14 | h2 { 15 | font: bold 1.5em Arial, sans-serif; 16 | } 17 | 18 | h3 { 19 | font: bold 1.25em Arial, sans-serif; 20 | } 21 | 22 | h4 { 23 | font: bold 1.1em Arial, sans-serif; 24 | } 25 | 26 | /* Default resetting */ 27 | html, body, form, fieldset, legend, dt, dd { 28 | margin: 0; 29 | padding: 0; 30 | } 31 | 32 | h1, h2, h3, h4, h5, h6, p, ul, ol, dl { 33 | margin: 0 0 1em; 34 | padding: 0; 35 | } 36 | 37 | h1, h2, h3, h4, h5, h6 { 38 | margin-bottom: 0.5em; 39 | } 40 | 41 | h2 { 42 | margin-top: 20px; 43 | } 44 | 45 | pre { 46 | font-size: 1.5em; 47 | } 48 | 49 | li, dd { 50 | margin-left: 1.5em; 51 | } 52 | 53 | img { 54 | border: none; 55 | vertical-align: middle; 56 | } 57 | 58 | /* Basic element styles */ 59 | a { 60 | color: #000; 61 | } 62 | 63 | a:hover { 64 | text-decoration: underline; 65 | } 66 | 67 | html { 68 | color: #000; 69 | background: silver; 70 | min-height: 100%; 71 | } 72 | 73 | body { 74 | margin-bottom: 30px; 75 | } 76 | 77 | ul { 78 | margin: 10px 0; 79 | } 80 | 81 | 82 | /* Structure */ 83 | .container { 84 | width: 560px; 85 | min-height: 600px; 86 | background: #fff; 87 | border: 1px solid #ccc; 88 | border-top: none; 89 | margin: 20px auto; 90 | padding: 20px; 91 | -moz-border-radius: 10px; 92 | -webkit-border-radius: 10px; 93 | border-radius: 10px; 94 | -moz-box-shadow: 1px 1px 10px #000; 95 | -webkit-box-shadow: 1px 1px 5px #000; 96 | box-shadow: 1px 1px 10px #000; 97 | } 98 | 99 | @media screen and (max-width: 320px) { 100 | #container { 101 | width: 280px; 102 | padding: 10px; 103 | } 104 | } 105 | 106 | .footer { 107 | border-top: 1px solid #000; 108 | margin-top: 40px; 109 | padding-top: 10px; 110 | } 111 | -------------------------------------------------------------------------------- /matchmedia/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | matchMedia 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

matchMedia

15 | 16 |
17 |

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 |
26 | 27 | 30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /matchmedia/js/base.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var matchMediaSupported = document.querySelector("#matchmedia-supported"), 3 | width600 = document.querySelector("#width-600"), 4 | height500 = document.querySelector("#height-500"), 5 | portraitOrientation = document.querySelector("#portrait-orientation"), 6 | width600Check, 7 | height500Check, 8 | portraitOrientationCheck; 9 | 10 | if (window.matchMedia) { 11 | matchMediaSupported.innerHTML = "supported"; 12 | 13 | // Establishing media check 14 | width600Check = window.matchMedia("(min-width: 600px)"), 15 | height500Check = window.matchMedia("(min-height: 500px)"), 16 | portraitOrientationCheck = window.matchMedia("(orientation: portrait)"); 17 | 18 | // Add listeners for detecting changes 19 | width600Check.addListener(setWidthValue); 20 | height500Check.addListener(setHeightValue); 21 | portraitOrientationCheck.addListener(setOrientationValue); 22 | } 23 | 24 | function setWidthValue (mediaQueryList) { 25 | width600.innerHTML = mediaQueryList.matches; 26 | } 27 | 28 | function setHeightValue (mediaQueryList) { 29 | height500.innerHTML = mediaQueryList.matches; 30 | } 31 | 32 | function setOrientationValue (mediaQueryList) { 33 | portraitOrientation.innerHTML = mediaQueryList.matches; 34 | } 35 | 36 | // Setting initial values at load 37 | function setValues () { 38 | width600.innerHTML = width600Check.matches; 39 | height500.innerHTML = height500Check.matches; 40 | portraitOrientation.innerHTML = portraitOrientationCheck.matches; 41 | } 42 | 43 | window.addEventListener("DOMContentLoaded", setValues, false); 44 | })(); 45 | 46 | -------------------------------------------------------------------------------- /mozilla/apps/TweetView/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | TweetView 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | 32 | 33 | 34 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /mozilla/apps/TweetView/manifest.webapp: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0", 3 | "name": "TweetView", 4 | "description": "Overlook of tweets", 5 | "icons": { 6 | "16": "/img/icon-16.png", 7 | "48": "/img/icon-48.png", 8 | "128": "/img/icon-128.png" 9 | }, 10 | "developer": { 11 | "name": "Robert Nyman", 12 | "url": "http://robertnyman.com" 13 | }, 14 | "installs_allowed_from": [ 15 | "*" 16 | ], 17 | "launch_path": "/tweetview/index.html", 18 | "locales": { 19 | }, 20 | "default_locale": "en" 21 | } 22 | 23 | -------------------------------------------------------------------------------- /mozilla/apps/TweetView/manifest.webapp.php: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "version": "1.0", 4 | "name": "TweetView", 5 | "description": "Overlook of tweets", 6 | "icons": { 7 | "16": "/img/icon-16.png", 8 | "48": "/img/icon-48.png", 9 | "128": "/img/icon-128.png" 10 | }, 11 | "developer": { 12 | "name": "Robert Nyman", 13 | "url": "http://robertnyman.com" 14 | }, 15 | "installs_allowed_from": [ 16 | "*" 17 | ], 18 | "launch_path": "/tweetview/index.html", 19 | "locales": { 20 | }, 21 | "default_locale": "en" 22 | } 23 | -------------------------------------------------------------------------------- /mozilla/apps/abbainfo/band.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The Band - ABBAInfo 6 | 7 | 8 | 9 | 10 | 11 |
12 |

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 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /mozilla/apps/abbainfo/css/base.css: -------------------------------------------------------------------------------- 1 | /* General font styles */ 2 | html { 3 | font: 100%/1.3 Verdana, Helvetica, Arial, sans-serif; 4 | } 5 | 6 | body { 7 | font: 70%/1.3 Verdana, Helvetica, Arial, sans-serif; 8 | } 9 | 10 | h1 { 11 | font: bold 2em Arial, sans-serif; 12 | } 13 | 14 | h2 { 15 | font: bold 1.5em Arial, sans-serif; 16 | } 17 | 18 | h3 { 19 | font: bold 1.25em Arial, sans-serif; 20 | } 21 | 22 | h4 { 23 | font: bold 1.1em Arial, sans-serif; 24 | } 25 | 26 | /* Default resetting */ 27 | html, body, form, fieldset, legend, dt, dd { 28 | margin: 0; 29 | padding: 0; 30 | } 31 | 32 | h1, h2, h3, h4, h5, h6, p, ul, ol, dl { 33 | margin: 0 0 1em; 34 | padding: 0; 35 | } 36 | 37 | h1, h2, h3, h4, h5, h6 { 38 | margin-bottom: 0.5em; 39 | } 40 | 41 | pre { 42 | font-size: 1.5em; 43 | } 44 | 45 | li, dd { 46 | margin-left: 1.5em; 47 | } 48 | 49 | img { 50 | border: none; 51 | vertical-align: middle; 52 | } 53 | 54 | /* Basic element styles */ 55 | a { 56 | color: #000; 57 | } 58 | 59 | a:hover { 60 | text-decoration: underline; 61 | } 62 | 63 | html { 64 | color: #000; 65 | background: gold; 66 | min-height: 100%; 67 | } 68 | 69 | body { 70 | margin-bottom: 30px; 71 | } 72 | 73 | ul { 74 | margin: 10px 0; 75 | } 76 | 77 | 78 | /* Structure */ 79 | .container { 80 | min-width: 400px; 81 | max-width: 760px; 82 | min-height: 600px; 83 | background: #fff; 84 | border: 1px solid #ccc; 85 | border-top: none; 86 | margin: 20px auto; 87 | padding: 20px; 88 | -moz-border-radius: 10px; 89 | -webkit-border-radius: 10px; 90 | border-radius: 10px; 91 | -moz-box-shadow: 1px 1px 10px #000; 92 | -webkit-box-shadow: 1px 1px 5px #000; 93 | box-shadow: 1px 1px 10px #000; 94 | } 95 | 96 | @media screen and (max-width: 320px) { 97 | #container { 98 | width: 280px; 99 | padding: 10px; 100 | } 101 | } 102 | 103 | .nav { 104 | float: left; 105 | width: 30%; 106 | } 107 | 108 | .main-content { 109 | float: right; 110 | width: 70%; 111 | } 112 | 113 | .content-frame { 114 | width: 100%; 115 | height: 500px; 116 | /*border: 1px solid red;*/ 117 | } 118 | 119 | .info-content { 120 | background: #fff; 121 | } 122 | 123 | /* Fullscreen */ 124 | html:-moz-full-screen, 125 | html:-webkit-full-screen { 126 | background: red; 127 | } 128 | 129 | html:-moz-full-screen { 130 | background: red; 131 | } 132 | 133 | html:-webkit-full-screen { 134 | background: red; 135 | } 136 | -------------------------------------------------------------------------------- /mozilla/apps/abbainfo/hits.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Biggest hits - ABBAInfo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /mozilla/apps/abbainfo/images/icon-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/apps/abbainfo/images/icon-128.png -------------------------------------------------------------------------------- /mozilla/apps/abbainfo/images/icon-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/apps/abbainfo/images/icon-16.png -------------------------------------------------------------------------------- /mozilla/apps/abbainfo/images/icon-48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/apps/abbainfo/images/icon-48.png -------------------------------------------------------------------------------- /mozilla/apps/abbainfo/images/icon.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/apps/abbainfo/images/icon.psd -------------------------------------------------------------------------------- /mozilla/apps/abbainfo/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/apps/abbainfo/images/logo.png -------------------------------------------------------------------------------- /mozilla/apps/abbainfo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ABBAInfo 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

14 | ABBA 15 |

16 | 17 | 29 | 30 |
31 |

Welcome to AbbaInfo!

32 |
33 |

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 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /mozilla/apps/abbainfo/js/base.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var viewFullScreen = document.getElementById("view-fullscreen"); 3 | if (viewFullScreen) { 4 | viewFullScreen.addEventListener("click", function () { 5 | var docElm = document.documentElement; 6 | if (docElm.mozRequestFullScreen) { 7 | docElm.mozRequestFullScreen(); 8 | } 9 | else if (docElm.webkitRequestFullScreen) { 10 | docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 11 | } 12 | }, false); 13 | } 14 | // Press the R key to reload the page 15 | window.addEventListener("keydown", function (evt) { 16 | if (evt.keyCode === 82) { 17 | location.reload(); 18 | } 19 | }, false); 20 | })(); 21 | 22 | -------------------------------------------------------------------------------- /mozilla/apps/abbainfo/manifest.webapp: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0", 3 | "name": "ABBAInfo", 4 | "description": "Getting some ABBA info", 5 | "icons": { 6 | "16": "/abbainfo/images/icon-16.png", 7 | "48": "/abbainfo/images/icon-48.png", 8 | "128": "/abbainfo/images/icon-128.png" 9 | }, 10 | "developer": { 11 | "name": "Robert Nyman", 12 | "url": "http://robertnyman.com" 13 | }, 14 | "installs_allowed_from": [ 15 | "*" 16 | ], 17 | "launch_path": "/abbainfo/", 18 | "locales": { 19 | }, 20 | "default_locale": "en" 21 | } 22 | -------------------------------------------------------------------------------- /mozilla/apps/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mozilla code playground 6 | 7 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

Mozilla code playground

17 |

Testing Mozilla code

18 |
19 | 20 |
21 |
22 | 23 | 24 | 25 | 26 |
27 |
28 | 29 | 32 |
33 | 34 | 35 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /mozilla/dashboard/css/base.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 12px "Helvetica Neue", "Helvetica", sans-serif; 3 | background: #000 url(../images/mozilla-tab.png) no-repeat right top; 4 | } 5 | 6 | h1 { 7 | margin: 0; 8 | } 9 | 10 | h2 { 11 | margin-top: 40px; 12 | } 13 | 14 | .container { 15 | width: 810px; 16 | background: #fff; 17 | border-radius: 10px; 18 | margin: 0 auto; 19 | padding: 15px 1%; 20 | } 21 | 22 | header { 23 | margin-bottom: 5px; 24 | border-bottom: 1px solid #000; 25 | } 26 | 27 | .main-content { 28 | overflow: hidden; 29 | } 30 | 31 | ul { 32 | overflow: hidden; 33 | margin: 0; 34 | padding: 15px; 35 | } 36 | 37 | li { 38 | position: relative; 39 | float: left; 40 | width: 30%; 41 | list-style: none; 42 | border: 10px solid #fff; 43 | margin: 0 4% 4% 0; 44 | padding: 0; 45 | -moz-box-shadow: 0 0 10px 2px #000; 46 | -webkit-box-shadow: 0 0 10px 2px #000; 47 | -o-box-shadow: 0 0 10px 2px #000; 48 | -ms-box-shadow: 0 0 10px 2px #000; 49 | box-shadow: 0 0 10px 2px #aaa; 50 | -moz-box-sizing: border-box; 51 | -webkit-box-sizing: border-box; 52 | -o-box-sizing: border-box; 53 | -ms-box-sizing: border-box; 54 | box-sizing: border-box; 55 | } 56 | 57 | li:nth-child(3n) { 58 | margin-right: 0; 59 | } 60 | 61 | li img { 62 | float: left; 63 | width: 100%; 64 | } 65 | 66 | li span { 67 | position: absolute; 68 | left: 0; 69 | bottom: 0px; 70 | width: 100%; 71 | padding: 5px; 72 | color: #fff; 73 | background: #000; 74 | opacity: 0.7; 75 | -moz-box-sizing: border-box; 76 | -webkit-box-sizing: border-box; 77 | -o-box-sizing: border-box; 78 | -ms-box-sizing: border-box; 79 | box-sizing: border-box; 80 | } 81 | 82 | .page-footer { 83 | border-top: 1px solid #000; 84 | margin-top: 30px; 85 | padding-top: 10px; 86 | } 87 | 88 | @media screen and (max-width: 800px) { 89 | .container { 90 | width: 90%; 91 | margin-top: 50px; 92 | } 93 | 94 | li { 95 | width: 46%; 96 | } 97 | 98 | li, 99 | li:nth-child(3n) { 100 | margin: 0 8% 8% 0; 101 | } 102 | 103 | li:nth-child(even) { 104 | margin-right: 0; 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /mozilla/dashboard/images/battery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/battery.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/browserquest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/browserquest.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/geolocation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/geolocation.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/gnome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/gnome.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/hahlo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/hahlo.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/minegl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/minegl.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/mozilla-tab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/mozilla-tab.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/notification.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/notification.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/orientation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/orientation.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/original/battery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/original/battery.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/original/browserquest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/original/browserquest.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/original/geolocation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/original/geolocation.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/original/gnome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/original/gnome.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/original/hahlo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/original/hahlo.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/original/minegl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/original/minegl.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/original/notification.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/original/notification.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/original/orientation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/original/orientation.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/original/runfield.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/original/runfield.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/original/vibration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/original/vibration.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/original/webcam.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/original/webcam.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/runfield.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/runfield.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/vibration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/vibration.png -------------------------------------------------------------------------------- /mozilla/dashboard/images/webcam.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robnyman/robnyman.github.com/05cea55ea332a00e159f61cf67c5195de16ceb0d/mozilla/dashboard/images/webcam.png -------------------------------------------------------------------------------- /mozilla/dashboard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Mozilla HTML5 demos 7 | 8 | 9 | 10 | 11 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 38 |
39 | 40 | 43 | 44 |
45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /telephone-sms/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 | -------------------------------------------------------------------------------- /telephone-sms/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Telephony API and SMP API 6 | 7 | 8 | 9 | 10 | 11 |
12 |

13 | Telephony API and SMP API 14 |

15 | 16 |
17 | 18 |
19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /telephone-sms/js/telephone-sms.js: -------------------------------------------------------------------------------- 1 | // Telephony object 2 | var tel = navigator.mozTelephony; 3 | 4 | // Check if the phone is muted (read/write property) 5 | console.log(tel.muted); 6 | 7 | // Check if the speaker is enabled (read/write property) 8 | console.log(tel.speakerEnabled); 9 | 10 | // Place a call 11 | var call = tel.dial("123456789"); 12 | 13 | // Events for that call 14 | call.onstatechange = function (event) { 15 | /* 16 | Possible values for state: 17 | "dialing", "ringing", "busy", "connecting", "connected", 18 | "disconnecting", "disconnected", "incoming" 19 | */ 20 | console.log(event.state); 21 | }; 22 | 23 | // Above options as direct events 24 | call.onconnected = function () { 25 | // Call was connected 26 | }; 27 | 28 | call.ondisconnected = function () { 29 | // Call was disconnected 30 | }; 31 | 32 | 33 | 34 | // Receiving a call 35 | tel.onincoming = function (event) { 36 | var incomingCall = event.call; 37 | 38 | // Get the number of the incoming call 39 | console.log(incomingCall.number); 40 | 41 | // Answer the call 42 | incomingCall.answer(); 43 | }; 44 | 45 | // Disconnect a call 46 | call.hangUp(); 47 | 48 | 49 | // Iterating over calls, and taking action depending on their changed status 50 | tel.oncallschanged = function (event) { 51 | tel.calls.forEach(function (call) { 52 | // Log the state of each call 53 | console.log(call.state); 54 | }); 55 | }; 56 | 57 | 58 | // SMS object 59 | var sms = navigator.mozSMS; 60 | 61 | // Send a message 62 | sms.send("123456789", "Hello world!"); 63 | 64 | // Receive a message 65 | sms.onreceived = function (event) { 66 | // Read message 67 | console.log(event.message); 68 | }; 69 | -------------------------------------------------------------------------------- /twitter/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 | .footer { 120 | border-top: 1px solid #000; 121 | margin-top: 30px; 122 | padding-top: 10px; 123 | } 124 | -------------------------------------------------------------------------------- /twitter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Twitter reactions 6 | 7 | 8 | 9 | 10 | 11 |
12 |

13 | Twitter reactions 14 |

15 | 16 |
17 | 18 | 19 | 20 |

Twitter

21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 30 | 31 | 32 |

Topsy

33 |
34 | 35 | 51 | 52 | 53 | 54 |
55 | 56 | 57 |
58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /vibration/css/base.css: -------------------------------------------------------------------------------- 1 | /* General font styles */ 2 | html { 3 | font: 100%/1.3 Verdana, Helvetica, Arial, sans-serif; 4 | } 5 | 6 | body { 7 | font: 70%/1.3 Verdana, Helvetica, Arial, sans-serif; 8 | } 9 | 10 | h1 { 11 | font: bold 2em Arial, sans-serif; 12 | } 13 | 14 | h2 { 15 | font: bold 1.5em Arial, sans-serif; 16 | } 17 | 18 | h3 { 19 | font: bold 1.25em Arial, sans-serif; 20 | } 21 | 22 | h4 { 23 | font: bold 1.1em Arial, sans-serif; 24 | } 25 | 26 | /* Default resetting */ 27 | html, body, form, fieldset, legend, dt, dd { 28 | margin: 0; 29 | padding: 0; 30 | } 31 | 32 | h1, h2, h3, h4, h5, h6, p, ul, ol, dl { 33 | margin: 0 0 1em; 34 | padding: 0; 35 | } 36 | 37 | h1, h2, h3, h4, h5, h6 { 38 | margin-bottom: 0.5em; 39 | } 40 | 41 | h2 { 42 | margin-top: 20px; 43 | } 44 | 45 | pre { 46 | font-size: 1.5em; 47 | } 48 | 49 | li, dd { 50 | margin-left: 1.5em; 51 | } 52 | 53 | img { 54 | border: none; 55 | vertical-align: middle; 56 | } 57 | 58 | /* Basic element styles */ 59 | a { 60 | color: #000; 61 | } 62 | 63 | a:hover { 64 | text-decoration: underline; 65 | } 66 | 67 | html { 68 | color: #000; 69 | background: gold; 70 | min-height: 100%; 71 | } 72 | 73 | body { 74 | margin-bottom: 30px; 75 | } 76 | 77 | ul { 78 | margin: 10px 0; 79 | } 80 | 81 | 82 | /* Structure */ 83 | .container { 84 | width: 560px; 85 | min-height: 600px; 86 | background: #fff; 87 | border: 1px solid #ccc; 88 | border-top: none; 89 | margin: 20px auto; 90 | padding: 20px; 91 | -moz-border-radius: 10px; 92 | -webkit-border-radius: 10px; 93 | border-radius: 10px; 94 | -moz-box-shadow: 1px 1px 10px #000; 95 | -webkit-box-shadow: 1px 1px 5px #000; 96 | box-shadow: 1px 1px 10px #000; 97 | } 98 | 99 | @media screen and (max-width: 320px) { 100 | #container { 101 | width: 280px; 102 | padding: 10px; 103 | } 104 | } 105 | 106 | button { 107 | display: block; 108 | margin-bottom: 20px; 109 | } 110 | -------------------------------------------------------------------------------- /vibration/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vibration API 6 | 7 | 8 | 9 | 10 | 11 |
12 |

13 | Vibration API 14 |

15 | 16 |
17 |

A demo of the Vibration API, currently implemented in Firefox.

18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 |

All the code is available in the Vibration repository on GitHub.

30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /vibration/js/base.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | document.querySelector("#vibrate-one-second").addEventListener("click", function () { 3 | navigator.vibrate(1000); 4 | }, false); 5 | 6 | document.querySelector("#vibrate-twice").addEventListener("click", function () { 7 | navigator.vibrate([200, 100, 200, 100]); 8 | }, false); 9 | 10 | 11 | document.querySelector("#vibrate-long-time").addEventListener("click", function () { 12 | navigator.vibrate(5000); 13 | }, false); 14 | 15 | document.querySelector("#vibrate-off").addEventListener("click", function () { 16 | navigator.vibrate(0); 17 | }, false); 18 | })(); 19 | 20 | -------------------------------------------------------------------------------- /webapi/css/webapis.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 | /* Responsive */ 108 | @media screen and (max-width: 640px) { 109 | .container { 110 | min-width: 80%; 111 | max-width: 80%; 112 | width: 80%; 113 | border-width: 0; 114 | } 115 | } 116 | 117 | 118 | button { 119 | display: block; 120 | margin-bottom: 20px; 121 | } 122 | 123 | #battery-supported { 124 | color: #f00; 125 | } 126 | 127 | .footer { 128 | border-top: 1px solid #000; 129 | margin-top: 30px; 130 | padding-top: 10px; 131 | } 132 | -------------------------------------------------------------------------------- /webapi/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WebAPIs 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

14 | WebAPIs 15 |

16 | 17 |
18 |

A demo of various WebAPIs, currently implemented in Firefox.

19 | 20 | 21 | 22 |
23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /webapi/js/webapis.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | document.querySelector("#reload").onclick = function () { 3 | location.reload(true); 4 | }; 5 | 6 | var deviceStorage = navigator.getDeviceStorage("videos"); 7 | console.log("deviceStorage: " + deviceStorage); 8 | 9 | var lockScreen = screen.mozLockOrientation("landscape"); 10 | console.log("lockScreen: " + lockScreen); 11 | 12 | var activity = new MozActivity({ 13 | name: "view", 14 | data: { 15 | type: "image/png", 16 | url: "" 17 | } 18 | 
}); 19 | console.log("MozActivity:" + activity); 20 | 21 | try { 22 | var register = navigator.mozRegisterActivityHandler({ 23 | name: "view", 24 | disposition: "inline", 25 | filters: { 26 | type: "image/png" 27 | } 28 | 
}); 29 | console.log("mozRegisterActivityHandler " + register); 30 | } 31 | catch (e) { 32 | console.log(e); 33 | } 34 | 35 | try { 36 | var setHandler = navigator.mozSetMessageHandler("activity", function (a) {
 37 | var img = getImageObject();
 38 | img.src = a.source.url;
 39 | // Call a.postResult() or a.postError() if 40 | // the activity shouldn return a value
 41 | }); 42 | console.log("mozSetMessageHandler: " + setHandler); 43 | } 44 | catch (e) { 45 | console.log(e); 46 | } 47 | 48 | try { 49 | var alarmRequest = navigator.mozAlarms.add(
 50 | new Date("May 15, 2012 16:20:00"), 51 | "honorTimezone", 52 | { 53 | mydata: "my event" 54 | } 55 | ); 56 | console.log("mozAlarms: " + alarmRequest); 57 | } 58 | catch (e) { 59 | console.log(e); 60 | } 61 | 62 | try { 63 | var archiveFile = new ArchiveReader(); 64 | console.log("ArchiveReader: " + archiveFile); 65 | } 66 | catch (e) { 67 | console.log(e); 68 | } 69 | 70 | window.addEventListener("deviceproximity", function (event) { 71 | // Current device proximity, in centimeters
 72 | console.log(event.value);
 73 | }); 74 | 75 | var connection = window.navigator.mozConnection,
 76 | online = connection.bandwidth > 0, 77 | metered = connection.metered;
 78 | console.log("mozConnection.online: " + online); 79 | 80 | var contact = new mozContact(); 81 | 
contact.init({ 82 | name: "Tom"} 83 | ); 84 | 

var request = navigator.mozContacts.save(contact); 85 | 
request.onsuccess = function() { 86 | console.log("Contact success"); 87 | 
}; 88 | 

request.onerror = function() { 89 | console.log("Contact error") 90 | 
}; 91 | 92 | var notification = navigator.mozNotification; 93 | console.log(notification.createNotification); 94 | 95 | notification.createNotification( 96 | "See this", 97 | "This is a notification" 98 | ); 99 | })(); 100 | --------------------------------------------------------------------------------