Doctype y Javascript

Stoneplus · #1 (**permalink**) 21/07/2009, 17:30

Hola a todos,

espero me puedan ayudar con mi problema. ya que llevo buen rato intentando solucionarlo y nada

.

Tengo un código javascript que sirve para crear un layer flotante y que éste te siga cuando te mueves por la web, me dejo entender? osea que cuando usas la barra de Scroll para bajar, el layer baja contigo. Sucede que el código NO funciona cuando pongo uso el doctype :

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "hxxp://www_w3_org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

El código SI funciona cuando no declaro ningún doctype.

El código del problema:

Código PHP:

   
function closeDiv() { 
        document.getElementById("floatLayer").style.left = "-1000px"; 
        return false; 
    } 
 
     
    var topMargin = 150; 
    var slideTime = 2500; 
    var ns6 = (!document.all && document.getElementById); 
    var ie4 = (document.all); 
    var ns4 = (document.layers); 
 
    function layerObject(id,left) { 
        if (ns6) { 
            this.obj = document.getElementById(id).style; 
            this.obj.left = left; 
            return this.obj; 
            } 
        else if(ie4) { 
            this.obj = document.all[id].style; 
            this.obj.left = left; 
            return this.obj; 
            } 
        else if(ns4) { 
            this.obj = document.layers[id]; 
            this.obj.left = left; 
            return this.obj; 
            } 
        } 
 
    function layerSetup() { 
        floatLyr = new layerObject("floatLayer", pageWidth * .1); 
        window.setInterval("main()", 10) 
        } 
 
    function floatObject() { 
        if (ns4 || ns6) { 
            findHt = window.innerHeight; 
        } else if(ie4) { 
            findHt = document.body.clientHeight; 
           } 
        }  
 
    function main() { 
        if (ns4) { 
            this.currentY = document.layers["floatLayer"].top; 
            this.scrollTop = window.pageYOffset; 
            mainTrigger(); 
            } 
        else if(ns6) { 
            this.currentY = parseInt(document.getElementById("floatLayer").style.top); 
            this.scrollTop = scrollY; 
            mainTrigger(); 
        } else if(ie4) { 
            this.currentY = floatLayer.style.pixelTop; 
            this.scrollTop = document.body.scrollTop; 
            mainTrigger(); 
           } 
        } 
 
    function mainTrigger() { 
        var newTargetY = this.scrollTop + this.topMargin; 
        if ( this.currentY != newTargetY ) { 
            if ( newTargetY != this.targetY ) { 
                this.targetY = newTargetY; 
                floatStart(); 
            } 
            animator(); 
            } 
        } 
 
    function floatStart() { 
        var now = new Date(); 
        this.A = this.targetY - this.currentY; 
        this.B = Math.PI / ( 2 * this.slideTime ); 
        this.C = now.getTime(); 
        if (Math.abs(this.A) > this.findHt) { 
            this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt; 
            this.A = this.A > 0 ? this.findHt : -this.findHt; 
            } 
        else { 
            this.D = this.currentY; 
           } 
        } 
 
    function animator() { 
        var now = new Date(); 
        var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D; 
        newY = Math.round(newY); 
        if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) { 
        if ( ie4 )document.all.floatLayer.style.pixelTop = newY; 
        if ( ns4 )document.layers["floatLayer"].top = newY; 
        if ( ns6 )document.getElementById("floatLayer").style.top = newY+"px"; 
           } 
        } 
 
    function start() { 
        if(ns6||ns4) { 
            pageWidth = innerWidth; 
            pageHeight = innerHeight; 
            layerSetup(); 
            floatObject(); 
            } 
        else if(ie4) { 
            pageWidth = document.body.clientWidth; 
            pageHeight = document.body.clientHeight; 
            layerSetup(); 
            floatObject(); 
           } 
        } 
         
 
window.onload=start

El HTML:

Código HTML:

<div id="floatLayer" style="LEFT: 135px; WIDTH: 10px; height:auto;POSITION: absolute; TOP: 464px; HEIGHT: 270px; BACKGROUND-COLOR: #000000;">
	<a onclick="return closeDiv()">cerrar</a>
</div>

NOTA: Todo esto ocurre en Internet Explorer (6, 7 y 8), porque en Firefox y Chrome el código funciona perfectamente use o no Doctype.

NOTA 2: Cuando digo NO FUNCIONA quiero decir que el layer no te sigue, se queda estático.

zerokilled · #2 (**permalink**) 21/07/2009, 23:13

una vez tuve este mismo problema. sucede que el scrollTop del objeto body devuelve 0 aun cuando se hace scroll. no comprendo bien por que esto sucede pero me parece que es porque el DOCTYPE le indica al navegador cual es el elemento raiz del documento y a partir de este elemento es que sea crea el scroll. por tanto, el elemento raiz es <HTML> y desde este leemos scrollTop. lo curioso es por que esto solamente sucede en internet explorer, lo cual puede que mi explicacion no sea certera.

en todo caso, para solucionarlo tienes arreglar la funcion main

Código:

    function main() {
        if (ns4) {
            this.currentY = document.layers["floatLayer"].top;
            this.scrollTop = window.pageYOffset;
            mainTrigger();
            }
        else if(ns6) {
            this.currentY = parseInt(document.getElementById("floatLayer").style.top);
            this.scrollTop = scrollY;
            mainTrigger();
        } else if(ie4) {
            this.currentY = floatLayer.style.pixelTop;
            this.scrollTop = document.documentElement.scrollTop;
            mainTrigger();
           }
        }

Stoneplus · #3 (**permalink**) 22/07/2009, 00:17

Cita:

Iniciado por zerokilled

una vez tuve este mismo problema. sucede que el scrollTop del objeto body devuelve 0 aun cuando se hace scroll. no comprendo bien por que esto sucede pero me parece que es porque el DOCTYPE le indica al navegador cual es el elemento raiz del documento y a partir de este elemento es que sea crea el scroll. por tanto, el elemento raiz es <HTML> y desde este leemos scrollTop. lo curioso es por que esto solamente sucede en internet explorer, lo cual puede que mi explicacion no sea certera.

en todo caso, para solucionarlo tienes arreglar la funcion main

Código:

    function main() {
        if (ns4) {
            this.currentY = document.layers["floatLayer"].top;
            this.scrollTop = window.pageYOffset;
            mainTrigger();
            }
        else if(ns6) {
            this.currentY = parseInt(document.getElementById("floatLayer").style.top);
            this.scrollTop = scrollY;
            mainTrigger();
        } else if(ie4) {
            this.currentY = floatLayer.style.pixelTop;
            this.scrollTop = document.documentElement.scrollTop;
            mainTrigger();
           }
        }

Uff, funcionó

Por un momento pense que nadie respondería, ya me ha pasado.

Mil gracias, no sabía como solucionar esto.