HTML5 Data and Services Cookbook

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"> ...