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
To know more about this JQuery plugin check these sites JQuery Idletimer-plugin and JQuery tooltip demo page idletimer-plugin Demo
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;"> </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 Email
|
|||
2 comments :
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.
Great tutorial. i really needed this ! Suresh can you please make idle message tutorial in asp.net MVC ? where if user is idle then logout after showing the alert ? pleaseeeeeee
Note: Only a member of this blog may post a comment.