Web Designing Tutorial - Learn HTML, CSS, Java Script, Flash Website Designing Tips: Unobtrusive JavaScript Dynamic Clock

Friday, October 17, 2008

Unobtrusive JavaScript Dynamic Clock

In this tutorial, I present an easy way to add a little extra flair to your site by adding some dynamic clock functionality. Using unobtrusive JavaScript, a bit of (X)HTML markup, and a dash of PHP (optional), we will create a dynamic clock that degrades gracefully to a static date/time-stamp when JavaScript is unavailable. No need to get all verbose with this one, so let’s dive right in..

Step 1: The JavaScript

Place the following code into a JavaScript file called “xClock.js” (or whatever) and upload to your server:

// Unobtrusive JavaScript Dynamic Clock
// http://perishablepress.com/press/2008/03/04/unobtrusive-javascript-dynamic-clock/

function xClock() {
  xC = new Date;
  xV = vClock(xC.getHours()) + ":" + vClock(xC.getMinutes()) + ":" + vClock(xC.getSeconds());
  document.getElementById("xClock").innerHTML = xV;
  setTimeout("xClock()", 1000);
}
function vClock(v) {
  return (v > 9) ? "" + v : "0" + v;
}

// addLoadEvent @ http://simonwillison.net/2004/May/26/addLoadEvent/

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
     window.onload = func;
  } else {
     window.onload = function() {
        if (oldonload) {
           oldonload();
        }
        func();
     }
  }
}
addLoadEvent(xClock);

The first portion of the code comprises the dynamic clock, while the second portion is an extremely useful “addLoadEvent” function provided by Simon Willison. After the web page has loaded, the addLoadEvent function will execute the xClock function. Next, let’s add some markup..

Step 2: The Markup

This specifics of this step will vary depending on your desired page layout, but essentially we want to create an empty <span> or <div> (or whatever) and give it an id="xClock", like so:

<span id="xClock"></span> will output this: (after completion of step #3)

Simply place an empty <span> with an id="xClock" wherever you would like the dynamic clock to be displayed. For example, you could place the target element in your sidebar using something similar to the following:

<h4><?php echo date("l, F j, Y ~ "); ?><span id="xClock"></span></h4>

This code does a couple of things. In the first line, we begin by wrapping the clock output in warm & fuzzy <h4> heading. We then use PHP to echo the date, which is formatted as “Weekday, Month Day, Year”. The date information is then proceeded by the required element for the dynamic xClock itself (i.e., <span id="xClock"></span>). The end result would present todays date and current time as:

Tuesday, March 4, 2008 ~

Of course, as completely unobtrusive code, the xClock functionality degrades gracefully when JavaScript is unavailable — the clock simply disappears! This is why echoing the date via PHP is good idea. It ensures that some chronological information is displayed even when the dynamic clock is unavailable. Of course, if you wanted to get really fancy, you could use a little <noscript> action to echo a static instance of the hour, minute and second that the page was created. Adding this to our previous example, we get:

<h4><?php echo date("l, F j, Y ~ "); ?><span id="xClock"></span>
<noscript><?php echo date("h:i:s", time(); ?></noscript></h4>

..which, when JavaScript is unavailable, will output the following static date and time:

Tuesday, March 4, 2008 ~ 11:33:07

The only difference between this non-JS output and the previous, JS-enabled output is the dynamic property of the clock. Not too shabby!

Step 3: Call the Script

Finally, we need to call the xClock.js script itself by placing the following element into the <head> or footer section of your document:

<script src="http://domain.tld/js/xClock.js" type="text/javascript" ></script>

Once this is in place, load the target page in a browser and check that everything is working. If everything went according to plan, your site should now be sporting a new dynamic clock for all the world to see. You may also want to disable JavaScript in your browser and check the formatting of the static timestamp. If needed, it is also possible to adjust the default “timeout” setting, which is currently set at 1000 ms. With a little imagination, the layout/design possibilities for adding a sense of time to your blog are endless!

via :perishablepress

Labels: java script, javascript