HTML and CSS Reference
In-Depth Information
<div id="time">
<span id="hours"></span><span id="colon1">:</span>
<span id="min"></span><span id="colon2">:</span>
<span id="sec"></span>
<br />
<input id="Send" type="button" value="Send Time to Server" />
<br /><br />
<img src="Images/HTML5.png" width="125" height="125" />
Notice the markup shown in bold. The <html> tag contains a manifest attribute that points to the
Clock.cachemanifest file. You need to add the manifest attribute in all the web forms (or MVC views) that
are part of the offline application.
Also notice that the <head> section contains references to StyleSheet.css and the jQuery library. There
is also a <script> block that contains the jQuery code responsible for displaying the clock (the code isn't
shown in the listing for the sake of clarity). The <body> section uses Ads.js to display advertisements,
followed by markup to display the clock. Recollect that the CACHE section of the Clock.cachemanifest ile
contains all these style sheet, script, and image files.
The remaining markup from the <body> section includes a few <span> elements that render hours,
minutes, and seconds. The clock is displayed using the jQuery code shown in Listing 8-6.
Listing 8-6. jQuery Code that Displays the Clock
$(document).ready(function () {
if (!Modernizr.applicationcache) {
alert("This browser doesn't support HTML5 Offline Applications!");
var months = [ "January", "February", "March", "April", "May", "June",
"July", "August", "September", "October",
"November", "December" ];
var days= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
var today = new Date();
$('#date').html(days[today.getDay()] + " " + today.getDate() + ' ' +
months[today.getMonth()] + ' ' + today.getFullYear());
setInterval(function () {
var seconds = new Date().getSeconds();
$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
setInterval( function() {
var minutes = new Date().getMinutes();
$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
Search WWH ::

Custom Search