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

LVL 1
AleksAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
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.
AleksAuthor Commented:
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.
Julian HansenCommented:
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

HTML5 and CSS3 Fundamentals

Build a website from the ground up by first learning the fundamentals of HTML5 and CSS3, the two popular programming languages used to present content online. HTML deals with fonts, colors, graphics, and hyperlinks, while CSS describes how HTML elements are to be displayed.

AleksAuthor Commented:
Testing ...
AleksAuthor Commented:
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

Julian HansenCommented:
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

AleksAuthor Commented:
I get a syntax error here:

  toastr.subscribe(function(response) {

Open in new window

Julian HansenCommented:
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

AleksAuthor Commented:
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.
Julian HansenCommented:
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

AleksAuthor Commented:
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 ?
Julian HansenCommented:
Just do the following before calling the new toast
  toastr.options = {
    "timeOut": 3000
  }

Open in new window

I have updated sample here

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
AleksAuthor Commented:
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

Julian HansenCommented:
Looks correct. Good luck with it.
AleksAuthor Commented:
Works fine :)  .. thank you  !
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.