// use localStorage for persistent storage
// use sessionStorage for per tab storage
saveButton.addEventListener('click', function () {
window.localStorage.setItem('value', area.value);
window.localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
textarea.value = window.localStorage.getItem('value');
var worker = new Worker('task.js');
worker.onmessage = function(event) { alert(event.data); };
worker.postMessage('data');
task.js:
self.onmessage = function(event) {
// Do some work.
self.postMessage("recv'd: " + event.data);
};
Loading Route...
JS
Notifications
if (window.webkitNotifications.checkPermission() == 0) {
// you can pass any url as a parameter
window.webkitNotifications.createNotification(tweet.picture, tweet.title,
tweet.text).show();
} else {
window.webkitNotifications.requestPermission();
}
Note: Use this button if you also want to reset the permissions
Enter your twitter user name to show your last tweet as a notification
Select text and drag (original text will be dropped)
Select text and drag (dragged text data will be altered from original)
Source Data
Drop Area
JS
Desktop Drag-In (File API)
Drag files in from the desktop:
document.querySelector('#dropzone').addEventListener('drop', function(e) {
var reader = new FileReader();
reader.onload = function(evt) {
document.querySelector('img').src = evt.target.result;
};
reader.readAsDataURL(e.dataTransfer.files[0]);
}, false);
Drop in images from your desktop
JS
Geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latLng = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({position: latLng, map: map});
map.setCenter(latLng);
}, errorHandler);
}
JS
Device Orientation
window.addEventListener('deviceorientation', function(event) {
var a = event.alpha;
var b = event.beta;
var g = event.gamma;
}, false);
This sample requires FF3.6+ or Google Chrome
on a device with a built in accelerometer or iOS 4.2.
HTML
Speech Input
<input type="text" x-webkit-speech />
Speech input is not enabled in your browser.
Try running Google Chrome with the --enable-speech-input flag.
<input list="libraries"/>
<datalist id="libraries">
<option value="Bruno"/>
<option value="Gorgas"/>
<option value="Hoole"/>
<option value="McLure"/>
<option value="Rodgers"/>
</datalist>
<menu>
<command type="command" disabled label="Publish" />
</menu>
<details>
<summary>HTML 5</summary>
This slide deck teaches you everything you need to know about HTML 5.
</details>
HTML 5This slide deck teaches you everything you need to know about HTML 5.
<metermin="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>
Your score is: A+
<progress>working...</progress>
Download is:
<progress value="75" max="100">3/4 complete</progress>
Goal is:
In March 1936, an unusual confluence of forces occurred in
Santa Clara County.
A long cold winter delayed the blossoming of the millions of
cherry, apricot, peach, and prune plum trees covering hundreds
of square miles of the Valley floor. Then, unlike many years,
the rains that followed were light and too early to knock
the blossoms from their branches.
Instead, by the billions, they all burst open at once.
Seemingly overnight, the ocean of green that was the Valley
turned into a low, soft, dizzyingly perfumed cloud of pink
and white. Uncounted bees and yellow jackets, newly born,
raced out of their hives and holes, overwhelmed by this
impossible banquet.
Then came the wind.
It roared off the Pacific Ocean, through the nearly
uninhabited passes of the Santa Cruz Mountains and then,
flattening out, poured down into the great alluvial plains
of the Valley. A tidal bore of warm air, it tore along the
columns of trees, ripped the blossoms apart and carried them
off in a fluttering flood of petals like foam rolling up a
beach.
This perfumed blizzard hit Stevens Creek Boulevard, a two-lane
road with a streetcar line down its center, that was the main
road in the West Valley. It froze traffic, as drivers found
themselves lost in a soft, muted whiteout. Only the streetcar,
its path predetermined, passed on...
jjbattles 