Displaying the dynamic time that has elapsed

It is very common on every major site to have these great counters that display timestamps on various elements on the page. For example, this would be "you opened this page 3 hours ago" or "commented 2 minutes ago". That is why, this feature, besides the name "dynamic time elapsed", is also known as "time ago".

Getting ready

We are going to use a jQuery plugin called timeago that has especially been designed for this purpose that can be retrieved from http://timeago.yarp.com/.

How to do it...

We will create a simple page where we will display the passed time by performing the following steps:

1. Because timeago is a jQuery plugin, we first need to include jQuery and then add the timeago plugin:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
    </script>
    <script src="jquery.timeago.js" type="text/javascript"></script>

2. Just as an example, add the following HTML:

           <p> Debian was first announced <abbr class='timeago' title="1993-08-16T00:00:00Z">16 August 1993</abbr>
             </p>
             <p> You opened this page <span class='page-opened' /> </p>
              <p> This is done use the time element
                 <time datetime="2012-12-12 20:09-0700">8:09pm on December 12th, 2012</time>
             </p>

3. This will enable us to get an overview of the basic features provided by the timeago plugin. Afterwards, let's add the following JavaScript:

    $(document).ready(function() {
             jQuery.timeago.settings.allowFuture = true;
             var now= new Date();
             $(".timeago").timeago();
             $(".page-opened").text( $.timeago(now));
             $("time").timeago();
             //$("some-future-date") $.timeago(new Date(999999999999));
         });

And that is it; you now have a fully working time example that will calculate the time since a given date and update it, and additionally, the second part selected with page-opened will be autoupdated as the user spends more time on the page.

How it works…

The first thing you might be wondering is about the abbr and time tags. The first one, in actuality, is a representation of "abbreviation" and optionally provides a full description for it. If the full description is present, the title attribute must contain this full description and nothing else. The full description is usually presented as a tool tip in the browsers, but this is a noting standard. Why have we picked the abbr tag to display time? Well, there is the new HTML5 time element named time that had some controversies surrounding it, as it was pulled from the spec but then gotten back. This element is more semantically correct and, additionally, represents the date in a machine-readable format that can be used by browsers to enable something like the "add to calendar" feature. The rationale for the use of the abbr element is only supported for older browsers, but this becomes more and more irrelevant as time passes. Currently, most modern browsers for desktops and mobiles provide support for the semantically correct time element—even IE 9+ has support for it.

The rest of the HTML consists of standard, well-known tags and a few markers, such as different CSS classes added in order to later select those elements.

Let's take a look at the JavaScript; first we use the standard jQuery document-ready function:

$(document).ready(function() {

Afterwards, we set the setting for allowFuture to true to enable the timeago plugin to work with future dates, as this has not been set by default:

jQuery.timeago.settings.allowFuture = true;

If timeago is applied directly on the selected abbr or time elements, there is no need for us to do anything else as the calculations are done automatically:

 $(".timeago").timeago();
 $("time").timeago();

You can also notice that we can get the text for a given date directly from JavaScript, and work with it in whatever way we see fit:

$(".page-opened").text( $.timeago(now));

There's more...

There are a few questions that come in mind when working on internationalized and localized applications. One of them is time zone support that timeago handles automatically. The only thing we need to make sure of is that our timestamps follow the ISO 8601 (http://en.wikipedia.org/wiki/ISO_8601) time format and have a full time zone designator (http://en.wikipedia.org/wiki/ISO_8601#Time_zone_designators). The other issue that often comes up is language support, but we are mostly covered in that area as there are localized versions of the plugin for many languages, and you can even create your own version and contribute it to the community. To do this, you can use the code hosted on https://github.com/rmm5t/jquery-timeago/tree/master/locales.

There are a few other implementations that perform a similar job, like for example, pretty date by John Resig available at his blog at http://ejohn.org/blog/javascript-pretty-date/.