Subscribe For Free Updates!

We'll not spam mate! We promise.

Aug 27, 2012

ASP.Net Tutorials:Show Alert Box Through JQuery


Show Alert Box Through JQuery in
To day  I will explain how to show alert message using JQuery when user is idle or inactive for sometime on your website in ASP.NET .
Most of the Time Some Customers Require a Feature that if a user on their Web site is Idle or hasn't performed any activity for a period of 5 minutes ,then show an Alert box message or may be an expired user Session alert. (due to it requirement of customer).

Like in corporate sites or business Sites if we stay ideal for sometime automatically we will get an alert like your idle for this much time on this particular site and your session is going to expire within 5 minutes or something .
We can implement this functionality easily by using available JQuery plug-in.
For that first create new website in visual studio and 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">

$undefinedfunctionundefined) {
var timeout = 5000;
$undefineddocument).bindundefined"idle.idleTimer", functionundefined) {
$undefined"#status").htmlundefined"User is idle :undefined").cssundefined"backgroundColor", "silver");
alertundefined"user idle for more than "+ undefinedtimeout/1000)+" secs")
$undefineddocument).bindundefined"active.idleTimer", functionundefined) {
$undefined"#status").htmlundefined"User is active :D").cssundefined"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>

In the header section I added some of script files. By using those files we have a chance to show alert messages when user is idle for more than 5 secs (Here I took 5 sec time) on website using JQuery in and you can DOWNLOAD SAMPLE CODE From Bottom (attached).
Now Fress F5 anf run your application and check the output.
Sample OUT PUT
Show Alert Box Through JQuery in

For more  Information about this JQuery plugin check  JQuery Idletimer-plugin and JQuery tooltip demo page idletimer-plugin

Plese Feel Free to Socializer This Post


Post a Comment

Become a Fan

visual studio learn