Botón cancelar en el navegador

crenpeva · #1 (**permalink**) 30/09/2019, 10:54

Soy programador de backend, pero también me gusta el frontend, actualmente estoy diseñando mi sitio, pero tengo una duda.
Tengo una informe que genera un listado de unas 50 a 100 paginas dependiendo del rango de fecha y algunos otros parámetros. Puse una imagen dando vueltas (típica rueda) que cuando la pagina termina de cargarse esta desaparece.
El tema es que también quiero que desaparezca cuando le doy cancelar en el navegador, y no lo hace. Estoy usando :
$( window ).on( "load", function() {
console.log( "2 - Ha ocurrido window.load: ventana lista" );
var el = document.getElementById("container");
el.style.display = 'none';
});

Y funciona perfecto pero solo cuando la pagina se termina de cargar no asi al cancelar. Como lo hago para que funcione en ambos casos.

ArturoGallegos · #2 (**permalink**) 30/09/2019, 13:47

1.- cuando preguntes, publica todo el código no solo una parte
2.- si utilizas jquery aprovéchalo al máximo, no tiene caso hacer unas cosas con vanilla y otras con jquery
3.- revisar la documentación antes de cualquier cosa suele ser buena idea.

Si revisas el listado de eventos en javascript puedes encontrar uno que dice click
https://developer.mozilla.org/es/doc...dEventListener

Has uso de este en lugar de load

4 y mas importante, dejas mucho a la especulación por lo que me pregunto, realmente hacer desaparecer ese loader es lo que necesitas?

crenpeva · #3 (**permalink**) 01/10/2019, 11:33

Hola a todos.
El punto 4 no lo entendí mucho, pero interpreto como que, si ya hice el "cancel" a la mitad de la carga de la pagina, debo dejar pintado al medio de la pagina la imagen "loader" para indicar que la cancele?.
Que se estila hacer entonces?,
1- inicio la carga de una pagina web que generará mas de 50 paginas, doy cancelar en
el navegador a la mitad de la carga (aprox).
2- pinto una imagen "loader con div".
3- cancelo la carga a la mitad
4- oculto la imagen O, la dejo pintada al medio de la pagina?, que se hace entonces?

-----------------------------------------------------------------------------------------------------
código de mi pagina, favor obviar que la lógica de negocio (query) está en la pagina, es solo a modo de ejemplo, lo mismo para el estilo.
-----------------------------------------------------------------------------------------------------
<html>
<head>
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg .tg-0lax{text-align:left;vertical-align:top}
/*-----------------------------------------------*/
body {
margin: 0;
padding: 0;
}

.container {
position: absolute;
top:46%;
left:48%;

width: 120px;
height: 150px;

position:fixed; /* necesita informacion de ancho*/

background: rgba(0, 0, 0, 0.9);
border: 1px solid white;
padding: 10px 0 10px 0;

-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;

-webkit-box-shadow: -1px -1px 12px 14px rgba(0,0,0,0.75);
-moz-box-shadow: -1px -1px 12px 14px rgba(0,0,0,0.75);
box-shadow: -1px -1px 12px 14px rgba(0,0,0,0.75);

z-index: 100;
}
.datos {
z-index: -100;
}

.ball {
width: 10px;
height: 10px;
margin: 10px auto;
border-radius: 50px;
}

.ball:nth-child(1) {
background: red;
-webkit-animation: right 1s infinite ease-in-out;
-moz-animation: right 1s infinite ease-in-out;
animation: right 1s infinite ease-in-out;
}

.ball:nth-child(2) {
background: red;
-webkit-animation: left 1.1s infinite ease-in-out;
-moz-animation: left 1.1s infinite ease-in-out;
animation: left 1.1s infinite ease-in-out;
}

.ball:nth-child(3) {
background: red;
-webkit-animation: right 1.05s infinite ease-in-out;
-moz-animation: right 1.05s infinite ease-in-out;
animation: right 1.05s infinite ease-in-out;
}

.ball:nth-child(4) {
background: red;
-webkit-animation: left 1.15s infinite ease-in-out;
-moz-animation: left 1.15s infinite ease-in-out;
animation: left 1.15s infinite ease-in-out;
}

.ball:nth-child(5) {
background: red;
-webkit-animation: right 1.1s infinite ease-in-out;
-moz-animation: right 1.1s infinite ease-in-out;
animation: right 1.1s infinite ease-in-out;
}

.ball:nth-child(6) {
background: red;
-webkit-animation: left 1.05s infinite ease-in-out;
-moz-animation: left 1.05s infinite ease-in-out;
animation: left 1.05s infinite ease-in-out;
}

.ball:nth-child(7) {
background: red;
-webkit-animation: right 1s infinite ease-in-out;
-moz-animation: right 1s infinite ease-in-out;
animation: right 1s infinite ease-in-out;
}

@-webkit-keyframes right {
0% {
-webkit-transform: translate(-15px);
}
50% {
-webkit-transform: translate(15px);
}
100% {
-webkit-transform: translate(-15px);
}
}

@-webkit-keyframes left {
0% {
-webkit-transform: translate(15px);
}
50% {
-webkit-transform: translate(-15px);
}
100% {
-webkit-transform: translate(15px);
}
}

@-moz-keyframes right {
0% {
-moz-transform: translate(-15px);
}
50% {
-moz-transform: translate(15px);
}
100% {
-moz-transform: translate(-15px);
}
}

@-moz-keyframes left {
0% {
-moz-transform: translate(15px);
}
50% {
-moz-transform: translate(-15px);
}
100% {
-moz-transform: translate(15px);
}
}

@keyframes right {
0% {
transform: translate(-15px);
}
50% {
transform: translate(15px);
}
100% {
transform: translate(-15px);
}
}

@keyframes left {
0% {
transform: translate(15px);
}
50% {
transform: translate(-15px);
}
100% {
transform: translate(15px);
}
}
/*-----------------------------------------------*/
</style>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>
$( window ).on( "load", function() {
console.log( "2 - Ha ocurrido window.load: ventana lista" );
var el = document.getElementById("container");
el.style.display = 'none';
});

</script>

</head>
<body>

<div class="container" id="container">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>

<div class="datos">
<script language="JavaScript">
var Digital=new Date();
var hours=Digital.getHours();
var minutes=Digital.getMinutes();
var seconds=Digital.getSeconds();
document.write('hora:'+ hours+':'+minutes+':'+seconds);
</script>

<cfquery name="pol" datasource="my_datasource">
select c_sequen secuencia, product producto, policy poliza, proposal propuesta
from cu_datosbasicos
where rownum < 5001
</cfquery>

<cfset i=0>
<table class="tg">
<tr>
<th class="tg-0lax">ID</th>
<th class="tg-0lax">SECUENCIA</th>
<th class="tg-0lax">PRODUCTO</th>
<th class="tg-0lax">POLIZA</th>
<th class="tg-0lax">PROPUESTA</th>
</tr>
<cfoutput query="pol">
<cfset i=i+1>
<tr>
<th class="tg-0lax">#i#</th>
<th class="tg-0lax">#pol.secuencia#</th>
<th class="tg-0lax">#pol.producto#</th>
<th class="tg-0lax">#pol.poliza#</th>
<th class="tg-0lax">#pol.propuesta#</th>

<th class="tg-0lax">#pol.secuencia#</th>
<th class="tg-0lax">#pol.producto#</th>
<th class="tg-0lax">#pol.poliza#</th>
<th class="tg-0lax">#pol.propuesta#</th>

<th class="tg-0lax">#pol.secuencia#</th>
<th class="tg-0lax">#pol.producto#</th>
<th class="tg-0lax">#pol.poliza#</th>
<th class="tg-0lax">#pol.propuesta#</th>

<th class="tg-0lax">#pol.secuencia#</th>
<th class="tg-0lax">#pol.producto#</th>
<th class="tg-0lax">#pol.poliza#</th>
<th class="tg-0lax">#pol.propuesta#</th>

<th class="tg-0lax">#pol.secuencia#</th>
<th class="tg-0lax">#pol.producto#</th>
<th class="tg-0lax">#pol.poliza#</th>
<th class="tg-0lax">#pol.propuesta#</th>

</tr>
</cfoutput>
</table>
</div>

</body>
</html>

ArturoGallegos · #4 (**permalink**) 01/10/2019, 12:04

El punto 4 me refería, a ver si ahora si me doy a entender, a que no se te entiende bien si ya tienes bien planteado el flujo de tu aplicación, con tu codigo me haz respondido que no.

Es correcto ocultar el loader al momento de cancelar, pero no es llamarle cancelar porque si, algo mas debe suceder., quizás el momento de ocultar el loader no es ese click, sino cuando se complete esa acción que se desencadena tras ese click.

punto 2.- si utilizas jquery aprovéchalo, no mezcles jquery con javascript vanilla cuando no es necesario.

te voy a añadir un punto 5, si utilizas una librería, jquery en este caso, sírvete revisar su documentación, no es solo usar por usar, debes entender que hace, como lo hace y porque lo hace., de tarea y con esto seguro resuelves tu problema, investiga las funciones remove, css, show, hide, también y ya de paso investiga métodos de acceder al dom y sus eventos desde jquery, -> $()

Opción 2:
Espera un poco mas, siempre hay alguien que viene y te da código solucionado, en lugar de mandarte a estudiar,

PS: Siempre es un gusto ayudar a resolver problemas/errores, incluso aprendemos de ello y te diviertes, pero no cuando no se muestra un conocimiento mínimo y/o un esfuerzo por realizarlo.

crenpeva · #5 (**permalink**) 01/10/2019, 13:00

Punto 4: si, al cargar la pagina que aparezca un loader, cuando se termine de cargar, que el loader desaparezca (jquery, etc), si la cancelo a la mitad, que el loader también desaparezca, eso es lo que necesito, solo tengo lo primero.
Investigaré las alternativas que me sugieres.
Gracias.