Monday, May 9, 2011

Timeout message before session expire

Here a javascript solution for detecting session expire.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
 
<style type="text/css">
        .message
        {
            border: 1px solid #CCCCCC;
            position: absolute;
            width: 400px;
            border: 1px solid #c93;
            background: #ffc;
            padding: 5px;
            left: 0px;
            top: -170px;
        }
    </style>    
<script language="javascript" type="text/javascript">
        function ShowAlert() {
            //get the height and width of the screen
            var windowWidth = document.documentElement.clientWidth;
            var windowHeight = document.documentElement.clientHeight;

            //get the height and width of the message box
            var popupHeight = $("#TimeoutMessage").height();
            var popupWidth = $("#TimeoutMessage").width();

            //show the message box
            $("#TimeoutMessage").animate({
                "top": windowHeight / 2 - popupHeight / 2,
                "left": windowWidth / 2 - popupWidth / 2
            }, 1000);

            //close the message box when cross red image is clicked
            $("#close_message").click(function() {
                $("#TimeoutMessage").fadeOut("slow");
            });

            setTimeout('Redirect()', 300000); //15 minutes in milliseconds
        }

        function Redirect() {
            window.location = "../../logout.aspx";
        }

    </script>
  
</head>
<body>
    <form id="form1" runat="server">
     <div id="TimeoutMessage" class="message">

        <p>
            You will be logged out due to inactivity in 5 minutes.<br /><br />
            Please refresh this page, or click on an action to refresh your session.</p>
    </div>
 
    </form>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            setTimeout('ShowAlert()', <%=((Session.Timeout * 60) * 1000) - 300000 %>);
        });
    </script>
</body>
</html>
at

2 comments:

Subscribe to: Post Comments (Atom)

How to Create Events Using Microsoft Graph API with Delegated Permissions and MSAL.js

Microsoft Graph API provides powerful capabilities to interact with Microsoft 365 services. In this guide, we’ll explore how to create calen...