Implement Jquery Timeago with PHP

Almost, all social media websites change posting time frequently without refreshing the web page. You can see these phrases:  seconds ago, one minute ago, two minutes ago and hours ago in the same post while time is passing and the page did not reload. Jquery developers developed timeago plugin to implement this feature in your site.

The best two plugins is:

1. Timeago plugin

2. Livestamp.js plugin

jQuery Timeago plugin :

It automatically updates fuzzy timestamps. It receives the time in an ISO 8601 timestamp.

How to implement Timeago plugin :

Step1 : include jquery.js and the timeago.js files in the head of your file

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.timeago2.js"></script>

Step2 : Attach the timeago functionality in DOM ready to time elements that have a class named 'ago' or any name you choose.

<script>
$(document).ready(function() {
  jQuery("time.ago").timeago();
});
</script> 

After these javascript lines, every time element with 'ago' class and an ISO 8601 timestamp in the datetime attribute will be changed to view time ago phrases. So, this element :

<time class="ago" datetime="2016-3-22T09:24:17Z">March 22, 2016</time>

Will be converted into:

<time class="ago" datetime="2016-3-22T09:24:17Z" title="March 22, 2016">6 months ago</time>

Timeago Options :

Allow future :

You can allow timestamps in the future by changing the allowFuture setting to true.

jQuery.timeago.settings.allowFuture = true;

Disable past times :

You can disable past timestamps by changing the value of allowPast setting to false and add a phrase that appears when the timestamp in the past.

jQuery.timeago.settings.strings.inPast = "time over";
jQuery.timeago.settings.allowPast = false;

 

jQuery Livestamp plugin:

It is a Jquery plugin that automatically updates time ago text depending on Moment.js. It can receive the time in UNIX timestamp and  ISO 8601 timestamps.

How to implement Livestamp plugin :

Load jquery.js library, Moment.js, and livestamp.js in the head of your file

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/moment.js"></script>
<script type="text/javascript" src="js/livestamp.min.js"></script>

Once you loaded those files, the livestamp.js plugin will update any element with a data-livestamp attribute that has correct Unix timestamp into the desired format.

<span data-livestamp="1475383267"></span>.
<span data-livestamp="2015-3-22T09:24:17Z"></span>

Will be updated to

<span>4 hours ago</span>
<span>2 years ago</span>

Livestmp.js allows future time by default .

If you have any questions you can make a comment.Have a nice code.

Share this Article on Social Media

All of my Scripts are ready to customized as per your requirement. Feel free to contact for script customization.

Contact me at discussdesk@gmail.com

"Note : It will be charged as per your customization requirement :)"

Get Updates, Scripts & Other Tutorials to Directly to your Email

Over 20000+ Happy Readers already subscribed. (We don't send spam email). Every email subscriber can get our latest updates and download our 100+ scripts.

Comments