precarcarga obscureciendo pantalla

vljc2004 · #1 (**permalink**) 13/05/2008, 19:43

Hola, estoy intentando hacer con ajax una precarga, cuando den click a una liga la pantanlla se obscuresca y una vez q cargue la pantalla vuelva a la normalidad mostrando la hoja requerida

lo que hago en mi hoja principal pongo un <div><body></body></div> que me encierra toda la pagina pero en mi

Código PHP:

  if (ajax.readyState==1) 
                {  
 
}

no se como cargar una hoja degrada o de que forma se haga, ya ando un poco desesperado por he intentando de varias formas y no me sale, por su ayuda muchas gracias.

Panino5001 · #2 (**permalink**) 13/05/2008, 20:45

Podrías usar algo así:

Código PHP:

  <!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=iso-8859-1" />
<title>test</title>
<script>
function $(id){
    return document.getElementById(id);    
}



function set_opacity(div, val) {
  if (div.filters) {  //For IE
    val *= 100;
    try {
      div.filters.item("DXImageTransform.Microsoft.Alpha").opacity = val;
    } catch (e) { 
      // If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
      div.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity='+val+')';
    }
  } else {
    div.style.opacity = val;
    div.style.MozOpacity = val;  //This is for older Mozilla Browsers
  }
} 

function getWindowData(){
    var widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal;
    if (typeof window.innerWidth != 'undefined'){
        widthViewport= window.innerWidth;
        heightViewport= window.innerHeight;
    }else if(typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth !='undefined' && document.documentElement.clientWidth != 0){
        widthViewport=document.documentElement.clientWidth-25;
        heightViewport=document.documentElement.clientHeight;
    }else{
        widthViewport= document.getElementsByTagName('body')[0].clientWidth-25;
        heightViewport=document.getElementsByTagName('body')[0].clientHeight;
    }
    xScroll=self.pageXOffset || (document.documentElement.scrollLeft+document.body.scrollLeft);
    yScroll=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop);
    widthTotal=Math.max(document.documentElement.scrollWidth-25,document.body.scrollWidth-25,widthViewport);
    heightTotal=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight,heightViewport);
    return [widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal];
    }
    
function alargar(){
    var pagina=getWindowData();
    if(!$('overlay')){
    ov=document.createElement('div');
    ov.id='overlay';
    ov.style.zIndex='90';
    ov.style.backgroundColor='black';
    try{set_opacity(ov, 0.5);}catch(e){}
        document.getElementsByTagName('body')[0].appendChild(ov);
        set_opacity($('overlay'), 0.5);
    }
document.getElementById('overlay').style.position='absolute';
document.getElementById('overlay').style.height=pagina[5]+'px';
document.getElementById('overlay').style.width=pagina[4]+'px';;
document.getElementById('overlay').style.top=document.getElementById('overlay').style.left=0;

}
function cerrar(){
document.getElementsByTagName('body')[0].removeChild($('overlay'));
}
/*Ejemplo de cómo eliminar la opacidad*/
window.onload=function(){
setInterval(function(){if($('overlay'))cerrar();},10000);
}
</script>
</head>

<body>
<a href="javascript:alargar()">oscurecer</a>
</body>
</html>