Solved

Merging Javascript Popup with Javavscript countdown?

Posted on 2012-04-06
3
260 Views
Last Modified: 2012-04-23
Hi All,

I currently have a javascript popup that appears when the user is approaching the end of their session and asks if they would like to renew the session. At the moment the popup just says that the session will time out in 50 seconds. What I would really like is for the seconds to count down until the session expires.

The Javascript popup is also not very pretty so if there is a more elegant way of doing it that won't get blacked by popup blockers then feel free.

This is the current code:

<?php
  $cookie_life = 60;
  session_set_cookie_params(60);
  session_name('test_session');    
  session_start();    
  
  session_regenerate_id(true);
?>

<script type="text/javascript">

var xmlhttp_session;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp_session=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp_session=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp_session.onreadystatechange=cfunc;
xmlhttp_session.open("GET",url,true);
xmlhttp_session.send();
}

function extend_session()
{
loadXMLDoc("session_extend.php",function()
  {
  if (xmlhttp_session.readyState==4 && xmlhttp_session.status==200)
    {
      //document.getElementById("myDiv").innerHTML=xmlhttp_session.responseText;
      lefttime = <?php echo $cookie_life; ?>;
      show_session_alert = true;
    }
  });
}

var lefttime=<?php echo $cookie_life; ?>; 
var interval; 
var show_session_alert = true;
interval = setInterval('check_session()',10000); 


function check_session() 
{ 
   lefttime = lefttime - 10; 
   if (show_session_alert && (lefttime <= 50)) {
     show_session_alert = false;

     if (confirm("Your session will expire in "+lefttime+" seconds! Do You want to extend Your session?")) { 
       extend_session();  
     }     
   }   
}


</script>
page 1

Open in new window


This is a countdown script that I like Javascript Countdown


The only problem with this is that it looks like it's called from a div element which I think is not possible on the javascript popup.

Is there any way to merge these two to get the result I'm looking for or is there a better way to do it that won't get flagged by popup blockers?

Thanks
0
Comment
Question by:Mulith
  • 2
3 Comments
 
LVL 20

Accepted Solution

by:
Proculopsis earned 500 total points
ID: 37815573
You could try a simple hidden div, as in this jsfiddle.
0
 
LVL 1

Author Comment

by:Mulith
ID: 37815622
Hi Proculopsis,

Yeah that looks pretty good. If the page scrolls down quite a long way would i be able to get it to popup in the center of the users screen even if they are way down the page?

Would I then need to create a function to hide the div again when the user clicks "Extend Session" or "Cancel" within the div?
0
 
LVL 1

Author Comment

by:Mulith
ID: 37846732
Still heard nothing on this ... Could anyone else help?
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

680 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question