Book Image

HTML5 Data and Services Cookbook

Book Image

HTML5 Data and Services Cookbook

Overview of this book

HTML5 is everywhere. From PCs to tablets to smartphones and even TVs, the web is the most ubiquitous application platform and information medium bar. Its becoming a first class citizen in established operating systems such as Microsoft Windows 8 as well as the primary platform of new operating systems such as Google Chrome OS. "HTML5 Data and Services Cookbook" contains over 100 recipes explaining how to utilize modern features and techniques when building websites or web applications. This book will help you to explore the full power of HTML5 - from number rounding to advanced graphics to real-time data binding. "HTML5 Data and Services Cookbook" starts with the display of text and related data. Then you will be guided through graphs and animated visualizations followed by input and input controls. Data serialization, validation and communication with the server as well as modern frameworks with advanced features like automatic data binding and server communication will also be covered in detail.This book covers a fast track into new libraries and features that are part of HTML5!
Table of Contents (21 chapters)
HTML5 Data and Services Cookbook
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

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