Link to home
Start Free TrialLog in
Avatar of Aleks
AleksFlag for United States of America

asked on

Jquery idle timer

I am using the script below to show a warning to the user after 30 min. And when they move the mouse it shows another alert, this all works well.

I have two questions:

1. The .idletimer is the amount of time before it shows the warning - OK ... then .. what is the "timeout"  for ?
2. How can I add code to my script so that it redirects the user after X amount of seconds ?   I want to redirect them to:  ../Sessionended.asp

If it gives the warning at 30 min I think logging them out at 35 min would be reasonable ?  give them 5 min to move the mouse after the warning.

Script:

<script>


    $(document).ready(function () {

        // Set idle time
        $( document ).idleTimer( 1800000 );

    });

    $( document ).on( "idle.idleTimer", function(event, elem, obj){
        toastr.options = {
            "positionClass": "toast-top-right",
            "timeOut": 1900000
        }

        toastr.warning('You have been idle for too long, to stayed logged in please move your mouse.','Idle for too long');
        $('.custom-alert').fadeIn();
        $('.custom-alert-active').fadeOut();

    });

    $( document ).on( "active.idleTimer", function(event, elem, obj, triggerevent){
        // function you want to fire when the user becomes active again
        toastr.clear();
        $('.custom-alert').fadeOut();
        toastr.success('Great to see you back!','You are back. ');



    });
</script>

Open in new window

Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

The timeOut is linked to the toastr component (https://github.com/CodeSeven/toastr#user-content-timeouts)

The toastr has a subscribe property you can set to a callback - this is called by toastr when something happens - it passes in a response object as an argument.

If response.state = 'hidden'; you know it has been hidden and therefore the time limit has expired.

So you can set the timeOut for the toastr to 300 and then subscribe a callback and check for hidden and then do your redirect there.
Avatar of Aleks

ASKER

So the change is not on this script but somewhere else ?
I am not familiar with jquery just yet so any further help is greatly appreciated.
Untested but maybe something like this
<script>
$(document).ready(function () {
  // Set idle time
  $( document ).idleTimer( 1800000 );
});

$( document ).on( "idle.idleTimer", function(event, elem, obj){
  toastr.options = {
    "positionClass": "toast-top-right",
    "timeOut": 300,
    "subscribe": function(response) {
      if (response.state == 'hidden') {
        window.location = '../Sessionended.asp';
      }
    }
  }

  toastr.warning('You have been idle for too long, to stayed logged in please move your mouse.','Idle for too long');
  $('.custom-alert').fadeIn();
  $('.custom-alert-active').fadeOut();
});

$( document ).on( "active.idleTimer", function(event, elem, obj, triggerevent){
  // function you want to fire when the user becomes active again
  toastr.clear();
  $('.custom-alert').fadeOut();
  toastr.success('Great to see you back!','You are back. ');
});
</script>

Open in new window

Avatar of Aleks

ASKER

Testing ...
Avatar of Aleks

ASKER

I am using the code blow to test it (8 seconds).  I changed the timeout to 8000 so that the alert also stays there for 8 seconds.
The problem is it doesn't redirect, or at least it takes longer?
Where do I set how much time after the 8 seconds will it take for the page to redirect automatically ?

This is the timeline:  

idle for 8 seconds:  Show the yellow alert "you have been idle for too long, etc ...
keep the yellow alert on until user moves the mouse of 8 more seconds pass
if user moves the mouse green alert 'Great to see you back' comes up and stays only for 3 seconds
If user doesn't do anything when the yellow alert goes away (8 seconds after it showed) page is redirected.

<script>
$(document).ready(function () {
  // Set idle time
  $( document ).idleTimer( 8000 );
});

$( document ).on( "idle.idleTimer", function(event, elem, obj){
  toastr.options = {
    "positionClass": "toast-top-right",
    "timeOut": 5000,
    "subscribe": function(response) {
      if (response.state == 'hidden') {
        window.location = '../Sessionended.asp';
      }
    }
  }

  toastr.warning('You have been idle for too long, to stayed logged in please move your mouse.','Idle for too long');
  $('.custom-alert').fadeIn();
  $('.custom-alert-active').fadeOut();
});

$( document ).on( "active.idleTimer", function(event, elem, obj, triggerevent){
  // function you want to fire when the user becomes active again
  toastr.clear();
  $('.custom-alert').fadeOut();
  toastr.success('Great to see you back!','You are back. ');
});
</script>

Open in new window

I just saw subscribe is a method not a property.
<script>
$(document).ready(function () {
  // Set idle time
  $( document ).idleTimer( 8000 );
});

$( document ).on( "idle.idleTimer", function(event, elem, obj){
  toastr.options = {
    "positionClass": "toast-top-right",
    "timeOut": 5000
    }
  }
  // Set your call back here
  toastr.subscribe(function(response) {
      if (response.state == 'hidden') {
        window.location = '../Sessionended.asp';
      }
  });
  toastr.warning('You have been idle for too long, to stayed logged in please move your mouse.','Idle for too long');
  $('.custom-alert').fadeIn();
  $('.custom-alert-active').fadeOut();
});

$( document ).on( "active.idleTimer", function(event, elem, obj, triggerevent){
  // function you want to fire when the user becomes active again
  toastr.clear();
  $('.custom-alert').fadeOut();
  toastr.success('Great to see you back!','You are back. ');
});
</script>

Open in new window

Avatar of Aleks

ASKER

I get a syntax error here:

  toastr.subscribe(function(response) {

Open in new window

There is an extra } in the code. I have no way of testing this short of rebuilding an app from scratch as you have only posted partial code and no reference links to libraries. So syntax errors are likely - a simple bit of debugging should get you past them.
<script>
$(document).ready(function () {
  // Set idle time
  $( document ).idleTimer( 8000 );
});

$( document ).on( "idle.idleTimer", function(event, elem, obj){
  toastr.options = {
    "positionClass": "toast-top-right",
    "timeOut": 5000
    }

  // } removed
  // Set your call back here
  toastr.subscribe(function(response) {
      if (response.state == 'hidden') {
        window.location = '../Sessionended.asp';
      }
  });
  toastr.warning('You have been idle for too long, to stayed logged in please move your mouse.','Idle for too long');
  $('.custom-alert').fadeIn();
  $('.custom-alert-active').fadeOut();
});

$( document ).on( "active.idleTimer", function(event, elem, obj, triggerevent){
  // function you want to fire when the user becomes active again
  toastr.clear();
  $('.custom-alert').fadeOut();
  toastr.success('Great to see you back!','You are back. ');
});
</script>

Open in new window

Avatar of Aleks

ASKER

That's ok. Ill test. Sytnax error is gone but there are two problems.

1. I get the idle alert, I move my mouse and it goes away and I get the notification 'great to see you back',  at the end of the 5 seconds that goes away and I am redirected anyways.

2. The first alert stays up for 5 seconds, that's ok, if I don't do anything I am redirected. OK
BUT. If I move the mouse the notification 'great to see you back'  also stays on for 5 seconds.

in reality I will leave the first notification on for 5 minutes, we need to separate the time both are displayed. The first one should be 5 min, if nothing happens redirect. The second one should be only 3 seconds and stay on the page.
I see the problem I thought we could shortcut this by using the timeout linked to the toastr but it is just getting complicated. Easier just to use a standard javascript Timer.

I put a sample together - you can view it here

<script>
var timer;
$(document).ready(function () {
  // Set idle time
  $(document).idleTimer(8000);
});

$(document).on('idle.idleTimer', function(event, elem, obj){
  toastr.options = {
    "positionClass": "toast-top-right",
    "timeOut": 5000
  }

  toastr.warning('You have been idle for too long, to stayed logged in please move your mouse.','Idle for too long');
  $('.custom-alert').fadeIn();
  $('.custom-alert-active').fadeOut();
  timer = setTimeout(function() {
    window.location = 'http://www.experts-exchange.com';
  }, 5000);
});

$(document).on("active.idleTimer", function(event, elem, obj, triggerevent){
  // function you want to fire when the user becomes active again
  clearTimeout(timer);
  toastr.clear();
  $('.custom-alert').fadeOut();
  toastr.success('Great to see you back!','You are back. ');
});
</script>

Open in new window

Avatar of Aleks

ASKER

Ok. Seems to work but let me see if I understand.

idleTimer(8000:  The amount of time before the idle alert shows up
"timeOut": 5000: The amount of time the alert will show
timer = setTimeout(function() {
    window.location = 'http://www.experts-exchange.com';
  }, 5000); The amount of time after the alert shows until it redirects.


All that works well apparently, the only problem I found is this scenario:

I am idle 8000 and the idle alert shows, then I move my mouse and the 'Great to see you back' alert shows, the problem is that such alert stays on for as long as the yellow alert was on. I only want that alert to be on for 3000.

How can we have a separate timer for the second alert ?
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Aleks

ASKER

Thanks Julian.

I just want to make sure I am doing all correctly before I implement this. From the script below it means that:

1. Time out before yellow warning (idle) shows is 30 secs
2. Warning shows for 10 seconds
3. User is redirected when warning goes away (10 seconds) if user doesn't move the mouse
4. If user moves mouse green alert shows for 3 seconds

If it looks OK to you then we are all set.

<script>
var timer;
$(document).ready(function () {
  // Set idle time
  $(document).idleTimer(30000);
});

$(document).on('idle.idleTimer', function(event, elem, obj){
  toastr.options = {
    "positionClass": "toast-top-right",
    "timeOut": 10000
  }

  toastr.warning('You have been idle for too long, to stayed logged in please move your mouse.','Idle for too long');
  $('.custom-alert').fadeIn();
  $('.custom-alert-active').fadeOut();
  timer = setTimeout(function() {
    window.location = '../Signout.asp';
  }, 10000);
});

$(document).on("active.idleTimer", function(event, elem, obj, triggerevent){
	toastr.options = {
    "timeOut": 3000
  }
  // function you want to fire when the user becomes active again
  clearTimeout(timer);
  toastr.clear();
  $('.custom-alert').fadeOut();
  toastr.success('Great to see you back!','You are back. ');
});
</script>

Open in new window

Looks correct. Good luck with it.
Avatar of Aleks

ASKER

Works fine :)  .. thank you  !