aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

JQuery show alert when user idle on website for sometime in

Jun 23, 2012

In this article I will explain how to show alter message when user idle or inactive for sometime on website in using JQuery.

In previous articles I explained many articles on JQuery. Now I will explain how to show alert message when user idle for sometime on website in using 

Generally in banking sites if we stay ideal for sometime automatically we will get alert like your idle for this much time on site and your session is going to expire within 5 minutes or something else we can implement this functionality easily by using available
 JQuery plug-in. For that first create new website write the following code in your aspx page 

<html xmlns="">
<head runat="server">
<title>Show alert message when user idle for sometime on webiste</title>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="jquery.idle-timer.js"></script>
<script type="text/javascript">

$(function() {
var timeout = 5000;
$(document).bind("idle.idleTimer", function() {
$("#status").html("User is idle :(").css("backgroundColor", "silver");
alert("user idle for more than "+ (timeout/1000)+" secs")
$(document).bind("active.idleTimer", function() {
$("#status").html("User is active :D").css("backgroundColor", "yellow");

<form runat="server" id="form1">
<h1></h1><h3>Showing User Active & Idle Status based on Time</h3>
<div id="status" style="padding: 5px;">&nbsp;</div>
If you observe above code in header section I added some of script files and css files by using those files we have a chance to show alert messages when user idle for more than 5 secs (Here I taken 5 sec time you can change it based on your requirement) on website using JQuery in and you can get those files from attached folder.

Now run your application and check the output.


Download sample code attached

To know more about this JQuery plugin check these sites JQuery Idletimer-plugin and JQuery tooltip demo page idletimer-plugin Demo

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Anonymous said...

Your approach doesn't work if the user opens multiple tabs. i.e If i open a new tab and continue my work with it by ignoring activity in my old tab, then the system will kick me out.

Nabil said...

Great tutorial. i really needed this ! Suresh can you please make idle message tutorial in MVC ? where if user is idle then logout after showing the alert ? pleaseeeeeee

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.