Foros del web, para los que viven de bits

vljc2004 · 13-may-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 · 13-may-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>

13-may-2008, 19:43	#1 (permalink)
vljc2004 Fecha de Ingreso: mayo-2006 Mensajes: 115	precarcarga obscureciendo pantalla 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.

13-may-2008, 20:45	#2 (permalink)
Panino5001 Colaborador Fecha de Ingreso: mayo-2004 Ubicación: Buenos Aires Mensajes: 1.312	Re: precarcarga obscureciendo pantalla 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> __________________ http://www.disegnocentell.com.ar

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado