<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML 5</title>
<link rel="stylesheet" href="html5.css" />
</head>
...
var context = $("#canvas")[0].getContext("2d");
function onMouseDown(evt) {
var offset = $("#canvas").offset();
var x = Math.floor(evt.pageX - offset.left);
var y = Math.floor(evt.pageY - offset.top)
if (!draw) {
context.beginPath();
context.moveTo(x, y);
draw = true;
} else {
context.lineTo(x, y);
context.stroke();
}
}
window.onload = function () {
var r = Raphael("svg-holder");
var pie = r.g.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10],
{legend: ["%%.%% – Enterprise Users", "IE Users"], legendpos: "west"});
};
<video id="clip" src='movie.mp4' autoplay controls></video>
document.getElementById("clip").play();
document.getElementById("clip").volume = 0;
<header>
<hgroup>
<h2>Just a test </h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/PHP">PHP</a></li>
</ul>
</nav>
<article>
<header>
<h1>
<a href="/article/html5" title="HTML5 danes"
rel="bookmark">HTML5 danes</a>
</h1>
</header>
<p>Vsebina</p>
</article>
<footer>
<p>mitja@vizius.si</p>
</footer>
<input type='range' min='0' max='50' value='0' /> <input results='10' type='search' /> <input type='text' placeholder='Uporabniško ime' />
<style> :invalid { background-color: red; } </style>
<input type='date' /> (samo v Operi)
<input type='color' />
<input type='number' />
<input type='email' />
.row:nth-child(even) {
background: #dde;
}
.row:nth-child(odd) {
background: white;
}
:not(.box) {
color: #00c;
}
:not(span) {
display: block;
}
h2:first-child { ... }
div.text > div { ... }
h2 + header { ... }
@-webkit-keyframes fading {
from {
opacity: 0.0;
font-size: 100%;
}
to {
opacity: 1.0;
font-size: 200%;
}
}
div {
-webkit-animation-name: fading;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
border-radius: 0px;
var socket = new WebSocket(location);
socket.onopen = function(event) {
socket.postMessage("Hello, WebSocket");
}
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert("closed");}
var worker = new Worker('js/prime.js');
worker.onmessage = function (event) {
document.getElementById('result').textContent = event.data;
};
var n = 1;
search: while (true) {
n += 1;
for (var i = 2; i <= Math.sqrt(n); i += 1)
if (n % i == 0)
continue search;
// found a prime!
postMessage(n);
}
// use localStorage for persistent storage
// use sessionStorage for per tab storage
textarea.addEventListener('keyup', function () {
window.localStorage['value'] = area.value;
window.localStorage['timestamp'] = (new Date()).getTime();
}, false);
textarea.value = window.localStorage['value'];
var db = window.openDatabase("Database", "Version");
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var marker = new google.maps.Marker(
{ position: new google.maps.LatLng(lat, lng) }
);
marker.setMap(map);
});
}
<!DOCTYPE HTML> <html manifest="site.manifest"> </html>
AddType text/cache-manifest manifest
CACHE MANIFEST # v2 CACHE: index.html images/logo.png NETWORK: login.php FALLBACK: /login.php /offline.html
var appCache = window.applicationCache; appCache.update(); if (appCache.status == window.applicationCache.UPDATEREADY) appCache.swapCache();
handleFileSelect = function(event) {
var files = event.target.files;
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
$('#thumbnails').append(
['<img width="100" height="100" class="thumb" src="',
e.target.result, '" title="', theFile.name, '"/>']
.join(''));
};
})(f);
reader.readAsDataURL(f);
}
}
if (window.webkitNotifications.checkPermission() != 0) {
window.webkitNotifications.requestPermission();
}
if (window.webkitNotifications.checkPermission() == 0) {
window.webkitNotifications.createNotification(
'', 'Obvestilo', $('#notification_text').val()
).show();
};
if (Modernizr.canvas) {
var c = document.createElement('canvas');
var context = c.getContext('2d');
// do something
}
.no-audio #audio {
display: none; /* Don't show Audio options */
}
.audio #audio button {
/* Style the Play and Pause buttons nicely */
}
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<html>
<body>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">
</script>
<script>
CFInstall.check({ mode: "inline", node: "prompt" });
</script>
</body>
</html>