Aspdotnet-Suresh

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

JQuery show alert when user idle on website for sometime in asp.net

Jun 23, 2012
Introduction

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

Description:
  
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 asp.net using 
JQuery.

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="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Show alert message when user idle for sometime on webiste</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></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");
});
$.idleTimer(timeout);
});

</script>
</head>
<body>
<form runat="server" id="form1">
<h1>Aspdotnet-Suresh.com</h1><h3>Showing User Active & Idle Status based on Time</h3>
<div id="status" style="padding: 5px;">&nbsp;</div>
</form>
</body>
</html>
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 asp.net and you can get those files from attached folder.

Now run your application and check the output.

Demo

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 Asp.net, C#.net, 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

0 comments :

Give your Valuable Comments

Other Related Posts

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