Session expire

Inform user

[Alternative Future]

Hello to the forum,

I am looking for some examples on how to inform the user that their session is about to expire. We currently use java event timer server side, and would like to avoid refreshing the page just in case the user is half way through filling out a form before getting called away from their desk. I am looking for any nifty but not too client side intense examples.

TIA,

-Gs

[mehh]

you could put something like:

<script type="text/javascript">
var t=setTimeOut("alert('Warning!\nYour session is about to time out.')",[ time ])
</script>

in the document head.
replace [ time ] with how long the user has left. You could use a server side script to do this.

[Alternative Future]

Hi mehh,

Thanks for your example, the problem with this sort of timeout alert is that it remains after the timer has timed out and can be misleading when the user returns to the browser - it might make them think there is still time to log back into the system even though the session has expired in the background. What other options are there for a graceful session expire - ones that are not annoying or misleading or just downright ugly.

Once again thanks mehh.

Again TIA,

-Gs

[Fotiman]

Have a look at the Yahoo UI Library's Container family of components, particularly SimpleDialog. This will let you create a sort of "inline" dialog similar to an alert box, but that will not stick around when the page redirects.

[Alternative Future]

Now we are talking Fotiman,

This is the sort of ideas I am looking for :) it is quite imilar to the one I found called gracefuldemo. But I must admit I have never looked around the yahoo ui container - well pleased you have pointed that out to me :)

Thanks so much...

Any other ideas keep em coming folks.

TIA,

-Gs

[Alternative Future]

No more suggestions or examples? :(

[mehh]

you could always make your own version of an alert bar at the top of the screen.
Ive had this kicking around on my hard drive for too long (to use this you will need two images. one called warn_i.png which is an exclamation mark and another called error_i.png which is an error sign):

 alerts={
 messages:new Array(),
 newMessage:function (m,type){
 type=(type)?type:"error";
 var mc=document.createElement("div");
 var b=document.body;
 b.insertBefore(mc,b.childNodes[0]);
 var i=document.createElement("img");
 i.src=type+"_i.png"
 mc.appendChild(i);
 mc.appendChild(document.createTextNode(m));
 mc.className=type;
 mc.style.height="0px";
 mc.style.overflow="hidden";
 mc.onclick=function(){alerts.ex(this.index,1)}
 l=this.messages.length;
 mc.index=l;
 this.messages.push(mc);
 this.ex(l,0)
 },
 ex:function (e,m){
 ele=this.messages[e];
 if(m==0&&parseInt(ele.style.height)<30)
 {
 ele.style.height=(parseInt(ele.style.height)+6)+"px";
setTimeout("alerts.ex("+e+","+m+")",100)
 }
 else if(m==1&&parseInt(ele.style.height)>0)
 {
 ele.style.height=(parseInt(ele.style.height)-6)+"px";
 setTimeout("alerts.ex("+e+","+m+")",100)
}
 else if(m==0) ele.style.height="30px";
 else if(m==1) ele.parentNode.removeChild(ele);
 }
 }

for you you could do something like

<style type="text/css">
 .error,.warn{
 line-height:30px;
 width:100%;
 float:left;
 clear:both;}
 .error img,.warn img{vertical-align:-4px;padding: 0 20px 0 5px}
 .error{background-color:#FCC}
 .warn{background-color:#FFC;}
</style>
<script type="text/javascript">
setTimeout('alerts.newMessage("Your Session is about to expire","warn")',[ time ]);
setTimeout('alerts.ex(0,1);alerts.newMessage("Your Session has expired")',[ time ]);
</script>

[Alternative Future]

Another nice example thanks mehh