Can I force a page timeout / redirection?

I'd like to put some code on a page, so if a user is sitting on the page for longer than ten minutes with no activity it will redirect them to another page. If possible, maybe I could show a box pop-up letting them know they have been idle for ten minutes and ask if they want to remain on the page.

Does anyone have any ideas on how I could do this, or sample code? My pages are on a ColdFusion server, but I can use jquery, JavaScript or anything else client based too.

Thank you.
earwig75Asked:
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:
You mean something like this?
...
<script>
setTimeout(function() {
  if (confirm('Are you done')) {
     window.location = 'http://www.more.exciting.site.com';
  }
}, 600000);
</script>
</body>
</html>

Open in new window

earwig75Author Commented:
I have something like that now... but I want to force the redirection if they don't reply to the pop-up alert within a minute....Also, if they click cancel on the alert, I want the redirect timer to start over... does that make sense?
Julian HansenCommented:
Then you will need to do a popup window rather than an alert (i.e. a styled <div> that looks like a popup) - what framework are you using (if any)
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

earwig75Author Commented:
It's coldfusion, I'm not aware of any frameworks.
onlyamir007Commented:
please check the script I just wrote

on document.ready it will call function and on click it should reset the time

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var s = true;
$(document).ready(function() {

if(s){

	timeoutWindow(3000);
	alert("readyCalled");
	s =  false;
}
});


$(document).click(function() {
	alert("clickedcalled");
	timeoutWindow(1000)
});

function timeoutWindow(tm){
alert("Mehere");
setTimeout(function() {
  if (confirm('Are you done' + tm)) {
     window.location = 'http://www.cnn.com';
  }
}, tm);	
}
</script>

Open in new window

onlyamir007Commented:
sorry to mention I took some code from @Julian Hansen
Julian HansenCommented:
Here is some sample code I banged together.

It is still a bit buggy but it demonstrates the concept.

The code works but the countdown timer doesn't. You move your mouse or press keys and you are fine. Any period of longer than 5 seconds without activity a popup is shown giving you the option of continuing on the page or heading off to Google. If you don't choose any option another timer determines the redirect.

Sample code is here
CSS
<style type="text/css">
.overlay {
  background: rgba(0,0,0,.75);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.popup-window {
  position: absolute;
  width: 25%;
  margin-left: 37.5%;
  top: 25%;
  background: white;
  color: #333;
  padding: 20px;
}
.popup-item {
  display: none;
}
</style>

Open in new window

HTML for the Popup
<div class="overlay popup-item">
  <div class="popup-window popup-item">
    <p>You are about to be redirected <span id="countdown"></span>.</p>
    <div style="text-align: right">
      <a href="" id="No">No!</a> <a href="" id="Yes">Ok</a>
    </div>
  </div>
</div>

Open in new window

JavaScript for the sample is here
<script>
var lastTime = new Date().getTime();
var popupTime = 0;
var popupWindow = false;
var POPUP_TIMEOUT = 5000;
var timer = setInterval(function() {
  var now = new Date().getTime();
  if (now - lastTime > 5000) {
    if (popupTime > 0) {
      if (now - popupTime > 5000) {
        byebye();
      }
    }
    else {
      popupTime = new Date().getTime();
    }
    popup(now-popupTime);
  }
}, 1000);

function popup(timeout)
{
  if (popupWindow) {
    // This is not working correctly
    $('#countdown').html(parseInt((POPUP_TIMEOUT - timeout)/1000));
  }
  else {
    $('.popup-item').show();
	popupWindow = true;
  }
}

function byebye()
{
  window.location = 'http://www.google.com';
}

$(function() {
  $(document).on("click keydown mousemove", function() {
    lastTime = new Date().getTime();
  });
  
  $('.popup-item a').click(function(e) {
    e.preventDefault();
    if ($(this).attr('id') == 'No') {
      lastTime = new Date().getTime();
    }
    else {
      byebye();
    }
    $('.popup-item').hide();
	popupWindow = false;
    popupTime = 0;
  });
});
</script>

Open in new window

earwig75Author Commented:
Julian, that appears to be working, other than the countdown that displays. Was that what you were referring to when you said it was buggy? I don't need the countdown to display, so removing the span makes this work nicely. I am confused about how to clean up the code though. Is the .html necessary in this function? I am fine with just the pop-up warning with no countdown... when  try to clean that up, the pop-up doesn't display at all.

function popup(timeout)
{
  if (popupWindow) {
    // This is not working correctly
    $('#countdown'[b]).html[/b](parseInt((POPUP_TIMEOUT - timeout)/1000));
  }
  else {
    $('.popup-item').show();
	popupWindow = true;
  }
}

Open in new window

Julian HansenCommented:
You can change the popup function to the following
function popup(timeout)
{
  if (!popupWindow) {
    $('.popup-item').show();
    popupWindow = true;
  }
}

Open in new window


I have updated the sample to reflect this

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
earwig75Author Commented:
I closed this, but after more testing, I see it won't redirect the page if they open a new tab, or go away from the browser, it just "spins". Once they visit the page again, the redirect happens. If you have time and know of a solution for this, that would be great.
earwig75Author Commented:
I am using this method for redirection, it works with both IE and firefox.
function byebye(url) { 
	url="anotherpage.html";
    if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
    {
        document.open();
		document.write('\x3Cscript type="text/javascript">window.location.href = "anotherpage.html";\x3C/script>'); 
		document.close();
        var referLink = document.createElement("a");
        referLink.href = url;
        document.body.appendChild(referLink);
        referLink.click();
    }
    else { window.location.replace(url); } // All other browsers
}

Open in new window

Julian HansenCommented:
if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
Probably overkill unless you specifically need to support IE8.

As for the browser not redirecting when tab is not in focus - this probably has to do with the modern browsers giving non-focused tabs low priorty to prevent javascript processes consuming cpu cycles in the background. I have noticed this with flash SWF's as well.

Don't know of a workaround offhand but will take a look around.
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.