Question

I want to alert the user that the session timeout is about to expire. I want to have a popup with an OK button and show the seconds ticking down on the popup. Can i do this with just java script?
Im OK with using C# code behind also.

Right now it detects session timeout and pops up telling them the session has expired.

<script type="text/javascript">
    var sessionTimeout = "<%= Session.Timeout %>";

    function DisplaySessionTimeout() {
        sessionTimeout = sessionTimeout - 1;

        if (sessionTimeout >= 0)
          window.setTimeout("DisplaySessionTimeout()", 60000);
        else {
            alert("Your current Session is over due to inactivity.");
        }
    }
</script>

Answer 1

Yes, you can do this via JavaScript. Here’s a simple counter implementation that was inspired from this StackOverflow answer I found a while back:

function Counter(options) {
    var timer;
    var instance = this;
    var seconds = options.seconds || 10;
    var onUpdateStatus = options.onUpdateStatus || function() {};
    var onCounterEnd = options.onCounterEnd || function() {};
    var onCounterStart = options.onCounterStart || function() {};

    function decrementCounter() {
        onUpdateStatus(seconds);
        if (seconds === 0) {
            stopCounter();
            onCounterEnd();
            return;
        }
        seconds--;
    };

    function startCounter() {
        onCounterStart();
        clearInterval(timer);
        timer = 0;
        decrementCounter();
        timer = setInterval(decrementCounter, 1000);
    };

    function stopCounter() {
        clearInterval(timer);
    };

    return {
        start : function() {
            startCounter();
        },
        stop : function() {
            stopCounter();
        }
    }
};

… and an example of how to use it:

var countdown = new Counter({
    // number of seconds to count down
    seconds: 3,

    onCounterStart: function () { 
        // show pop up with a message 
        ... 
    },

    // callback function for each second
    onUpdateStatus: function(second) {
        // change the UI that displays the seconds remaining in the timeout 
        ... 
    },

    // callback function for final action after countdown
    onCounterEnd: function() {
        // show message that session is over, perhaps redirect or log out 
        ... 
    }
});
countdown.start();

Once the server is ready to alert the user, just create the timer and it’ll start counting down. You can customize what happens on each event: when timer starts, when a second ticks by, and when the countdown is done.