[SOLUCIONADO] cuenta regresiva script y php por inactividad

Ilidam · #1 (**permalink**) 21/11/2013, 13:23

Hola buenas tardes alguin sabe como hacer para que en una pagina despues de x tiempo por ejemplo que pasan 10 minutos sin hacer nada me muestre un div que contenga una cuenta regresiva de 2 a 3 minutos al llegar a cero me manda a una pagina pero si doy clic en un boton k no direccione

el problema es...Ya tengo mi div aun no lo tengo oculto y dentro de el la cuenta regresiva lo que pasa es que cuando recien entro a la pagina me lo muestra pero como hacer k al entrar a la pagina no me muestre el div solo asta k hayan pasado 10 minutos sin hacer nada en la pagina lo que tengo es esto

Código PHP:

Ver original<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" src="js/jquery-1.5.1.min.js"></script>
<style>
    
 .alerta {
 position: fixed; /* Le damos el valor Fixed para que flote */
 background: rgba(255, 255, 255, 255); /* Color de fondo de la capa */
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 z-index: 999;
}
.flota{
 background: white; /*Color de fondo del contenedor*/
 border-radius: 2px; /* Redondeado */
 box-shadow: 0px 0px 0px 2px white, 0 5px 14px black; /* Sombra exterior */
 z-index: 9999;
 
    position:absolute;
    left:428px;
    top:182px;
    width:223px;
    height:138px;
    z-index:1;
}
 
.close{
 position: absolute;
 display: block;
 top: -15px;
 right: -15px;
 cursor: pointer;
 background: url(images/eliminar.png) 0px 0px no-repeat; /* Imagen del boton */
 width: 30px;
 height: 30px;
 overflow: hidden;
 text-indent: -9999px;
}
</style>
<script>
    $(document).ready(function() {
 $(".close").click(function(){ //Le decimos que al dar click en ".close"...
    $(".alerta").hide("drop"); //Oculte el contenedor ".overlay" lentamente(slow)
  event.preventDefault(); // Anulamos el enlace...
 });
});
</script>
<script type="text/javascript">
function display_c(start){
window.start = parseFloat(start);
var end = 0 // change this to stop the counter at a higher value
var refresh=1000; // Refresh rate in milli seconds
if(window.start >= end ){
mytime=setTimeout('display_ct()',refresh)
}
else {
    window.location="../login.html";
}
}
 
function display_ct() {
// Calculate the number of days left
var days=Math.floor(window.start / 86400);
// After deducting the days calculate the number of hours left
var hours = Math.floor((window.start - (days * 86400 ))/3600)
// After days and hours , how many minutes are left
var minutes = Math.floor((window.start - (days * 86400 ) - (hours *3600 ))/60)
// Finally how many seconds left after removing days, hours and minutes.
var secs = Math.floor((window.start - (days * 86400 ) - (hours *3600 ) - (minutes*60)))
 
var x = window.start + "(" + minutes + ":" + secs + " Minutos " + ")";
 
 
document.getElementById('ct').innerHTML = x;
window.start= window.start- 1;
 
tt=display_c(window.start);
}
</script>
</head>
<body onload="display_c(120);">
HOLA
<div class="alerta" id="busca" ><!-- Mostrar div DURANTE 10 min de inactividad mientras este oculto-->
    <div  class="flota" style=" width:397px; height:244px; "> 
        <div class="close"> 
            <a href="#">Cerrar</a> 
        </div>
<span id='ct'></span>
  </div>
</div>
 
</body>
</html>

Dalam · #2 (**permalink**) 21/11/2013, 13:26

Tienes algun problema con usar jquery?

Ilidam · #3 (**permalink**) 21/11/2013, 13:35

No. ese codigo ya funciona bien pero lo que kiero es que por ejemplo a la ora de accesar a la pagina el div k contine la cuenta regresiva este oculto "No k se muestre al entrar a la pagina k es lo k hace ahorita" solo quiero k se muestre el div con la cuenta regresiva despues de haber pasado 10 minutos de inactividad
y el detalle k tengo ese query es:
nose como mostrar el div oculto sin tener k dar clic en algun link o boton
en la cuenta regresi como borrar el 120(2:00 minutos) y solo dejar 2:00 minutos

Dalam · #4 (**permalink**) 21/11/2013, 13:43

para quitar el 120, en la linea 74 tienes que quitar el window.start +

actual:
var x = window.start + "(" + minutes + ":" + secs + " Minutos " + ")";

modificado:
var x = "(" + minutes + ":" + secs + " Minutos " + ")";

Si quieres quitar tambien los parentesis:
var x = minutes + ":" + secs + " Minutos ";

Dalam · #5 (**permalink**) 21/11/2013, 13:58

luego para que te muestre el div pasado 10 minutos puedes hacerlo con

setTimeout(document.getElementById('ct').style.dis play = 'inline',600);

Dalam · #6 (**permalink**) 21/11/2013, 14:04

lo que si que te digo es que a lo que llamas inactividad no es exactamente eso
para hacerlo real, deberias chequear los eventos que se producen en el navegador que no se mueva el raton por ejemplo

Ilidam · #7 (**permalink**) 21/11/2013, 14:15

bueno lo primero ya quedo lo de la cuenta regresiva ahora ese codigo el de
setTimeout(document.getElementById('ct').style.dis play = 'inline',10); lo puse en la linea 85 y no se dispara la accion para mostrar el div flotante oculto

Código Javascript:

Ver original<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" src="js/jquery-1.5.1.min.js"></script>
<style>
    
 .alerta {
 position: fixed; /* Le damos el valor Fixed para que flote */
 background: rgba(255, 255, 255, 255); /* Color de fondo de la capa */
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 z-index: 999;
}
.flota{
 background: white; /*Color de fondo del contenedor*/
 border-radius: 2px; /* Redondeado */
 box-shadow: 0px 0px 0px 2px white, 0 5px 14px black; /* Sombra exterior */
 z-index: 9999;
 
    position:absolute;
    left:428px;
    top:182px;
    width:223px;
    height:138px;
    z-index:1;
}
 
.close{
 position: absolute;
 display: block;
 top: -15px;
 right: -15px;
 cursor: pointer;
 background: url(images/eliminar.png) 0px 0px no-repeat; /* Imagen del boton */
 width: 30px;
 height: 30px;
 overflow: hidden;
 text-indent: -9999px;
}
</style>
<script>
    $(document).ready(function() {
 $(".close").click(function(){ //Le decimos que al dar click en ".close"...
    $(".alerta").hide("drop"); //Oculte el contenedor ".overlay" lentamente(slow)
  event.preventDefault(); // Anulamos el enlace...
 });
});
 
</script>
 
<script type="text/javascript">
 function display_c(start){
window.start = parseFloat(start);
var end = 0 // change this to stop the counter at a higher value
var refresh=1000; // Refresh rate in milli seconds
if(window.start >= end ){
mytime=setTimeout('display_ct()',refresh)
}
else {
    window.location="../login.html";
}
}
 
function display_ct() {
// Calculate the number of days left
var days=Math.floor(window.start / 86400);
// After deducting the days calculate the number of hours left
var hours = Math.floor((window.start - (days * 86400 ))/3600)
// After days and hours , how many minutes are left
var minutes = Math.floor((window.start - (days * 86400 ) - (hours *3600 ))/60)
// Finally how many seconds left after removing days, hours and minutes.
var secs = Math.floor((window.start - (days * 86400 ) - (hours *3600 ) - (minutes*60)))
 
var x = minutes + ":" + secs + " Minutos ";
 
 
document.getElementById('ct').innerHTML = x;
window.start= window.start- 1;
 
tt=display_c(window.start);
}
 
setTimeout(document.getElementById('busca').style.display = 'inline',10);//aki puse esto
</script>
 
</head>
<body onload="display_c(120);">
HOLA
<div class="alerta" id="busca" style="display:none"><!-- Mostrar div DURANTE 10 min de inactividad mientras este oculto-->
    <div  class="flota" style=" width:397px; height:244px; "> 
        <div class="close"> 
            <a href="#">Cerrar</a> 
        </div>
<span id='ct'></span>
  </div>
</div>
 
</body>
</html>

y eso del raton como es

IsaBelM · #8 (**permalink**) 21/11/2013, 15:32

tienes dos opciones

usar una cuenta regresiva y resetearla con el evento onmousemove
almacenar el timestamp de la última actividad y compararla cada x tiempo con el timestamp actual

Ilidam · #9 (**permalink**) 21/11/2013, 15:56

Cita:

Iniciado por IsaBelM

tienes dos opciones

usar una cuenta regresiva y resetearla con el evento onmousemove
almacenar el timestamp de la última actividad y compararla cada x tiempo con el timestamp actual

La primera opcion de que manerase podria utilizar xk tengo una duda..la cuenta regresiva que muestro en el codigo ya funciona muy bien pero esta dentro de un div oculto y no logro mostrar el div despues de 5 minutos que entre a la pagina
y ademas nose si una vez k me kede eso cuando se abra la capa flotante la cuenta regresiva se inicie en ese momento o ya estara en 0 porque desde hace 5 minutos ya navegaba en la pagina

Ilidam · #10 (**permalink**) 21/11/2013, 17:12

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" src="js/jquery-1.5.1.min.js"></script>
<style>

.alerta {
position: fixed; /* Le damos el valor Fixed para que flote */
background: rgba(255, 255, 255, 255); /* Color de fondo de la capa */
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999;
}
.flota{
background: white; /*Color de fondo del contenedor*/
border-radius: 2px; /* Redondeado */
box-shadow: 0px 0px 0px 2px white, 0 5px 14px black; /* Sombra exterior */
z-index: 9999;

position:absolute;
left:428px;
top:182px;
width:223px;
height:138px;
z-index:1;
}

.close1{
position: absolute;
display: block;
top: -15px;
right: -15px;
cursor: pointer;
background: url(images/eliminar.png) 0px 0px no-repeat; /* Imagen del boton */
width: 30px;
height: 30px;
overflow: hidden;
text-indent: -9999px;
}
</style>
<script>
$(document).ready(function() {
setTimeout(function() {
$(".alerta").fadeIn(1000);
},5000);
});

$(document).ready(function() {
$(".close1").click(function(){ //Le decimos que al dar click en ".close"...
$(".alerta").hide("drop"); //Oculte el contenedor ".overlay" lentamente(slow)
event.preventDefault(); // Anulamos el enlace...
});
});

</script>

<script type="text/javascript">
function display_c(start){
window.start = parseFloat(start);
var end = 0 // change this to stop the counter at a higher value
var refresh=1000; // Refresh rate in milli seconds
if(window.start >= end ){
mytime=setTimeout('display_ct()',refresh)
}
else {
window.location="../login.html";
}
}

function display_ct() {
// Calculate the number of days left
var days=Math.floor(window.start / 86400);
// After deducting the days calculate the number of hours left
var hours = Math.floor((window.start - (days * 86400 ))/3600)
// After days and hours , how many minutes are left
var minutes = Math.floor((window.start - (days * 86400 ) - (hours *3600 ))/60)
// Finally how many seconds left after removing days, hours and minutes.
var secs = Math.floor((window.start - (days * 86400 ) - (hours *3600 ) - (minutes*60)))

var x = minutes + ":" + secs + " Minutos ";

document.getElementById('ct').innerHTML = x;
window.start= window.start- 1;

tt=display_c(window.start);
}

setTimeout(document.getElementById('busca').style. display = 'inline',10);//aki puse esto
</script>

</head>
<body onload="display_c(124);">
HOLA
<div class="alerta" id="busca" style="display:none">
<div class="flota" style=" width:397px; height:244px; ">
<div class="close1">
<a href="#">Cerrar</a>
</div>
<center>
<br><br>
EL SISTEMA SE CERRARA POR SEGURIDAD EN
<br><br>
<span id='ct'></span>
<br><br>
CANCELAR OPERACION
<input type="submit" value="CONTINUAR">

</center>
</div>
</div>

</body>
</html>

Dalam · #11 (**permalink**) 21/11/2013, 18:19

Aqui lo tienes

Código HTML:

Ver original<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">if(typeof jQuery==='undefined'){document.write(unescape("<scri"+"pt src='js/jquery-1.3.2.min.js' type='text/javascript'></scri"+"pt>"));}</script>
<style>
 .alerta {
 position: fixed; /* Le damos el valor Fixed para que flote */
 background: #FFF; /* Color de fondo de la capa */
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 z-index: 999;
 display:none;
}
.flota{
 opacity:1.0; /* opacidad del 60% */
 filter:alpha(opacity=100); /* Opacidad para IE8 y earlier */
 background: white; /*Color de fondo del contenedor*/
 border-radius: 8px; /* Redondeado */
 box-shadow: 0px 0px 0px 1px black, 5px 5px 14px black; /* Sombra exterior */
 position:absolute;
 left:50%;
 top:50%;
 margin-left:-112px;
 margin-top:-70px;
 width:224px;
 height:140px;
 z-index:1;
 color:#000;
}
 
.flota h2 {
    margin:auto;
    text-align:center;
}
.flota span {
    text-align:center;
    width:100%;
    position:inherit;
    margin-top:20%;
    font-size:36px;
}
 
.close{
 position: absolute;
 display: block;
 top: 0;
 right: 2;
 cursor: pointer;
 background: url(images/eliminar.png) 0px 0px no-repeat; /* Imagen del boton */
 width: auto;
 height: 30px;
 overflow: hidden;
}
</style>
<script>
    $(document).ready(function() {
        $(".close").click(function(){ //Le decimos que al dar click en ".close"...
            $(".alerta").hide("drop"); //Oculte el contenedor ".overlay" lentamente(slow) 
            window.clearInterval(mytime); // Delete interval
            display_c(600000); // Redefine time for new session expire
            event.preventDefault(); // Anulamos el enlace...
         });
    });
</script>
<script type="text/javascript">
function display_c(start){
window.start = parseFloat(start);
var end = 0 // change this to stop the counter at a higher value
var refresh=1000; // Refresh rate in milli seconds
var timeShow = 119;
if(window.start >= end ){
    if(window.start <= timeShow){
        $(".alerta").show();
    }
    mytime=setTimeout('display_ct()',refresh)
}
else {
    window.location="../login.html";
}
}
 
function display_ct() {
// Calculate the number of days left
var days=Math.floor(window.start / 86400);
// After deducting the days calculate the number of hours left
var hours = Math.floor((window.start - (days * 86400 ))/3600)
// After days and hours , how many minutes are left
var minutes = Math.floor((window.start - (days * 86400 ) - (hours *3600 ))/60)
// Finally how many seconds left after removing days, hours and minutes.
var secs = Math.floor((window.start - (days * 86400 ) - (hours *3600 ) - (minutes*60)))
 
var x = minutes + ":" + secs + " Minutos ";
 
 
document.getElementById('ct').innerHTML = x;
window.start = window.start - 1;
 
tt=display_c(window.start);
}
function wait(time) {
    setTimeout('display_ct()',refresh);
}
</script>
</head>
<body onload="display_c(600000);">
HOLA
<div class="alerta" id="busca" ><!-- Mostrar div DURANTE 10 min de inactividad mientras este oculto-->
    <div  class="flota" style=" width:397px; height:244px; "> 
        <div class="close"> 
            <a href="#">Cerrar</a> 
        </div>
        <h2>La sessi&oacute;n caducara en </h2>
<span id='ct'></span>
  </div>
</div>
 
</body>
</html>

Como veras e cambiado el evento onload de la etiqueta body, que ahora sera el tiempo total, osea la suma del tiempo que se muestra el div y el tiempo que espera para mostrarlo.

En la funcion display_c, e agragado la variable timeShow, que es el tiempo entre que se muestra el div y se realiza la redireccion a login.

E insertado un clearInterval en el codigo jquery y un relanzamiento de la funcion display_c() para cuando se pulse el vinculo cerrar

Ilidam · #12 (**permalink**) 22/11/2013, 10:21

Hola Dalam muchas gracias por tu ayuda oye exactamente que hace el codigo k publicaste ya lo puse en mi pagina y eh esperado mas de 10 minutos y no me hace nada y nuevamente gracias

Dalam · #13 (**permalink**) 22/11/2013, 10:46

Perdona Ilidam lo puse en milisegundos tienes que cambiarlo por segundos tanto en la etiqueta body como en el jQuery

linea 63 quedaria

display_c(600); // Redefine time for new session expire

y el body

<body onload="display_c(600);">

Prueba con 130 para que veas lo que hace y sobrepase el tiempo de mostrar el div oculto

Pruebalo y me cuentas

Ilidam · #14 (**permalink**) 22/11/2013, 11:07

ok ya lo probe y funciona muy bien... de casualidad sabes como le puedo hacer k si cancelo la cuenta regresiva se actulize mi variable de sesion como si acava de entrar al sistema??

Dalam · #15 (**permalink**) 22/11/2013, 11:17

Puedes hacer una peticion AJAX a tu servidor para que asi se actualice el session_cache_expire de php y empiece a contar de nuevo el tiempo de expiracion.

Tambien te aconsejo que mires lo del movimiento del raton y otros eventos del navegador, por que el usuario puede estar viendo un texto extenso y el sistema no le da tiempo suficiente para que lo termine.

Ilidam · #16 (**permalink**) 22/11/2013, 11:39

ah ok me pondre a investigar eso de seeion_cahe_expire xk desconozco de eso y lo del movimiento del raton igual tendre k investigar muchas gracias por tu ayuda

Dalam · #17 (**permalink**) 22/11/2013, 11:47

mira aqui tienes la informacion oficial de php
http://php.net/manual/es/function.se...che-expire.php

y aqui los eventos de jquery que puedes capturar
http://api.jquery.com/category/events/

Ten en cuenta de que no solo es movimiento del raton, tambien el usuario podria estar usando las flechas de direccion del teclado y no mover el raton.
pero creo que para tus propositos te servira con lo que tienes y con un script que sea llamado mediante AJAX para que reinicie la cuenta de session expire

IsaBelM · #18 (**permalink**) 22/11/2013, 14:22

dónde se está evaluado la inactividad?? la sesión (php) expirará cuando se cumpla el tiempo de inactividad asignada, pero en el cliente sólo veo un contador regresivo.

la segunda opción que te sugerí llevada a código

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
position: relative;
}

html, body {
width: 100%;
height: 100%;
}

#expirado {
display: none;
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
var tstampActual = 0;
var comprobar = 10000;

function actividad() {

var tstamp = new Date().getTime();

if (Math.abs(tstampActual - tstamp) > comprobar) {

document.getElementById('expirado').style.display = 'block';

} else {

document.getElementById('expirado').style.display = 'none';

}
}

window.addEventListener('load', function() {

document.body.addEventListener('mousemove', function() {

tstampActual = new Date().getTime();

}, false);

setInterval(function() {actividad()}, comprobar);
});

</script>
</head>
<body>

<div id="expirado">El tiempo ha expirado</div>

</body>
</html>

si hay 10 segundos de inactividad, aparece una leyenda