TIME AGO USING JQUERY
No doubts, you have seen social networks and some news sites count time elapsed since field was updated. Some though, use the scripting language approach. Here is a more effective plugin for time ago developed by McGeary Ryan. This plugin can also count time from now all in real time. I will teach this tutorial in two parts.VIEW SCREEN SHOT
Download Source Code
This tutorial requires two plugins
- jQuery plugin
- timeago plugin
- This plugin requires you to enter the time of update as value to the attribute called "title"
- Time must be in ISO 8601 timestamp format
- If you use MySQL I think this is not a problem. When database is updated allow MySQL to automatically add current timestamp.
PART ONE – Time ago tutorial
<html><head>
<title>Time ago tutorial – By Ohwofosirai Desmond</title>
<script src="jquery-1.5.1.min.js"></script>
<script src="jquery.timeago.js"></script>
<script>
$(document).ready(function() {
$("abbr.interval").timeago();
// you can use $(“time.interval”).timeago() for html 5 example
});
</script>
</head>
<body>
<abbr class="interval" title="2012-04-17T09:24:17Z">May 23, 2012</abbr>
</body>
</html>
This plugin actually creates a new DOM element “abbr”.
Timeago plugin supports html 5 time tag. That means in place of “abbr”, you can use “time”. See example below:
<time class="interval" datetime="2012-04-17T09:24:17Z">May 23, 2012</time>
Note: time tag works only with html 5 supported browsers.
Unlike the server side approach, you don’t need to refresh your page. Time ago updates automatically every minute. Like this? Leave a comment…
PART TWO – jQuery Time from now
<Html><head>
<title>Time ago tutorial – By Ohwofosirai Desmond</title>
<script src="jquery-1.5.1.min.js"></script>
<script src="jquery.timeago.js"></script>
<script>
$(document).ready(function() {
$.timeago.settings.allowFuture = true;
$("abbr.interval").timeago();
});
</script>
</head>
<body>
<abbr class="interval" title="2012-07-17T09:24:17Z">May 23, 2012</abbr>
</body>
</html>
jQuery time ago, facebook-like time ago, jquery time interval, time from now, elapsed time jquery
0 comments:
Post a Comment