Foros del Web - oscurecer pagina mientras está en "Loading..."

Foros del Web (http://www.forosdelweb.com/)

- Frameworks JS (http://www.forosdelweb.com/f127/)

- - oscurecer pagina mientras está en "Loading..." (http://www.forosdelweb.com/f127/oscurecer-pagina-mientras-esta-loading-569198/)

Greco2

25/03/2008 16:53

oscurecer pagina mientras está en "Loading..."

Hola, antes que todo les comento que estoy recien metiendome en esto de Ajax y es bastante poco lo que se, me he bajado el framework PROTOTYPE y estoy empesando recien.

En las FAQ del foro encontré la forma de mostrar la amosa imagen de "Loading..." en una esquina, lo que deseo es mostrar esa misma imagen pero centrada en la pantalla, supongo que eso lo tendré que hacer con css pero lo que necesito tambien es que cuando este visible la imagen "LOADING..." la pagina se "oscurezca" o bien se ponga mas "pálida", algo asi como el efecto de algunas paginas cuando muestran una ventana modal o algunas galerias de imagenes.

Si alguien me puede dar unas indicaciones de como realizarlo, si es que se puede solamente con PROTOTYPE o tendre que usar otros archivos mas.

Saludos

Greco2

25/03/2008 17:42

Re: oscurecer pagina mientras está en "Loading..."

ya pude solucionar parte dle problema, lo que pude hacer es mostrar un DIV centrado horizontal y verticalmente en la página, dicho div es el que muestra el gif que indica que se esta cargando, ahora lo unico que me falta es poder oscurecer la pagina mientras se esta haciendo la operacion.

Si alguien puede darme una pequeña ayuda o indicaciones ya que busque en internet y encontré un articulo que mostraba como hacerlo con PROTOTYPE (que tambien estoy usando) y con EFFECT.JS de SCRIPT.ACULO.US pero lamentablemente estaba incompleto.

Saludos.

PD. El codigo que ocupé para centrar el div horizontal y vertical es el siguiente:

Cita:

.load{
position: absolute;
left: 50%;
top: 50%;
width: 50px;
height: 50px;
margin-top: -25px;
margin-left: -25px;
overflow: none;
border: 0px solid;
display:none;
}

MaBoRaK

28/03/2008 07:35

Re: oscurecer pagina mientras está en "Loading..."

loading...................

Podemos hacer algo a la rápida.

Código PHP:

   var osc = document.createElement("div");

osc.style.position="absolute";

osc.style.filter="alpha(opacity=50)";

osc.style.opacity=0.5;

osc.style.width="100%";

osc.style.height="100%";

osc.style.display="none";

osc.innerHTML="<div style='text-align:center;'>Loading.....</div>";

document.body.appendChild(osc);

 
//ahora lo implementamos en tu ajax.

 
osc.style.display="";  //mostrará el loading

//aca creas tu objeto ajax, variables, etc etc

ajax.blablablabla

ajax.onreadystatechange=function()

{

  if(ajax.status==4)

 {

      osc.style.display="none";  

 }

};

Creo que con eso ya tienes una idea de como hacerlo. Espero te sirva.

http://maborak.com/logo/logo.gif
http://maborak.com/logo/logo2.gif
http://maborak.com/logo/logo3.gif
http://maborak.com/logo/logo4.gif
http://maborak.com/logo/logo5.gif

connection closed.

Greco2

01/04/2008 17:17

Re: oscurecer pagina mientras está en "Loading..."

Muchas gracias por la ayuda, cualquier duda posteo aqui.

ofnocron

27/02/2011 19:15

Respuesta: oscurecer pagina mientras está en "Loading..."

EN HEAD:

Código HTML:

<script language='JavaScript'>

function muestra_oculta(id){

if (document.getElementById){

var el = document.getElementById(id); 

el.style.display = (el.style.display == 'none') ? 'block' : 'none'; 

}

}

window.onload = function(){

muestra_oculta('cargando');

}
 </script>

EN BODY:

Código HTML:

<div id='cargando' style='background:#4D5154;position: fixed;left: 43%;top: 200px;width: 235px;height: 17px;vertical-align:middle;text-align:center;margin-top: -25px;margin-left: -25px;overflow: none;border: 1px solid #212529;z-index:7777;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;-khtml-border-radius: 3px;box-shadow:0px 0px 30px gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px gray;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);'>

Cargando... espere por favor</div>

DEMO:

Código HTML:

http://inpic.blogspot.com

La zona horaria es GMT -6. Ahora son las 06:40.