JavaScript scroller ne fonctionne pas avec DOCTYPE

Question

J'ai cherché sur le net difficile pour un code javascript qui me permet de faire défiler automatiquement les images non-stop horizontalement sur une page Web. Après une longue recherche, j'ai finalement trouvé quelque chose qui était assez proche. Je l'ai ensuite personnalisé autant que possible pour le faire exactement ce que je voulais qu'il fasse.

Ce test a été effectué sur une page sans DOCTYPE, donc quand je l'ai déplacé sur une page qui avait un DOCTYPE, le javascript a été foiré et a refusé de faire défiler. Il a juste montré une seule image stationnaire (sur safari et firefox)

J'ai téléchargé deux pages Web sur mon site MobileMe afin que vous puissiez y jeter un coup d'œil.

La page sans DOCTYPE: web.me.com/zubby

La page avec un DOCTYPE: web.me.com/zubby/2.html

le javascript est également détaillé ci-dessous. Je serai extrêmement reconnaissant si quelqu'un peut m'aider avec cela.

J'ai seulement téléchargé les fichiers pertinents afin que firebug se plaindra probablement des fonctions inexistantes.

var pic = new Array(); 

function banner(name, width, link){ 
    this.name = name 
    this.width = width 
    this.link = link 
    }; 

pic[0] = new banner('images/cellarpics/cellarbynightsmall.jpg',203,'images/cellarpics/cellarbynightsmall.jpg'); 
pic[1] = new banner('images/cellarpics/insidecellarnewsmall.jpg',203,'images/cellarpics/insidecellarnewsmall.jpg'); 
pic[2] = new banner('images/cellarpics/mainshotwebsmall.jpg',203,'images/cellarpics/mainshotwebsmall.jpg'); 
pic[3] = new banner('images/cellarpics/MicroCelllar2tileopensmall.jpg',203,'images/cellarpics/MicroCelllar2tileopensmall.jpg'); 
pic[4] = new banner('images/cellarpics/openmicrosmall.jpg',203,'images/cellarpics/openmicrosmall.jpg'); 
pic[5] = new banner('images/cellarpics/topopenweb1small.jpg',203,'images/cellarpics/topopenweb1small.jpg'); 
pic[6] = new banner('images/cellarpics/topweb2small.jpg',203,'images/cellarpics/topweb2small.jpg'); 
pic[7] = new banner('images/cellarpics/topwebclosed1small.jpg',203,'images/cellarpics/topwebclosed1small.jpg'); 
/* 
pic[8] = new banner('http://www.sxc.hu/pic/s/d/da/da9l/290444_yellow_rose.jpg',102,'http://www.sxc.hu/pic/m/d/da/da9l/290444_yellow_rose.jpg') 
*/ 

var speed = 10; 

var kk = pic.length; 
var ii; 
var hhh; 
var nnn; 
var myInterval; 
var myPause; 
var mode = 0; 


var imgArray = new Array(kk); 
var myLeft = new Array(kk); 

for (ii=0;ii<kk;ii++){ 
imgArray[ii] = new Image() 
imgArray[ii].src = pic[ii].name 
imgArray[ii].width = pic[ii].width 

    hhh=0 
    for (nnn=0;nnn<ii;nnn++){ 
     hhh=hhh+pic[nnn].width 
    }; 
    myLeft[ii] = hhh 
}; 

function ready(){ 
    for (ii=0;ii<kk;ii++){ 
     if (document.images[ii].complete == false){ 
      return false  
      break 
     }; 
    }; 
return true 
}; 


function startScrolling(){ 
    if (ready() == true){  
     window.clearInterval(myPause) 
     myInterval = setInterval("autoScroll()",speed) 
    }; 
}; 


function autoScroll(){ 
    for (ii=0;ii<kk;ii++){ 
     myLeft[ii] = myLeft[ii] - 1 

    if (myLeft[ii] == -(pic[ii].width)){ 
     hhh = 0 
     for (nnn=0;nnn<kk;nnn++){ 
      if (nnn!=ii){ 
       hhh = hhh + pic[nnn].width 
      };  
     }; 
     myLeft[ii] = hhh 
    }; 


     document.images[ii].style.left = myLeft[ii] 
    }; 
    mode = 1 
}; 

function stop(){ 
    if (mode == 1){ 
     window.clearInterval(myInterval) 
    }; 
    if (mode == 0){ 
     window.clearInterval(myPause) 
    }; 
}; 

function go(){ 
    if (mode == 1){ 
     myInterval = setInterval("autoScroll()",speed) 
    }; 
    if (mode == 0){ 
     myPause = setInterval("startScrolling()",3000) 
    }; 
}; 

myPause = setInterval("startScrolling()",100) 

for (ii=0;ii<kk;ii++){ 
document.write('<a href="' + pic[ii].link + '" target="_blank"><img style="height:131px;position:absolute;top:0;left:' + myLeft[ii] + ';" src="' + pic[ii].name + '" onMouseOver="stop()" onMouseOut="go()" /></a>'); 
}; 

Answer 1

Dans IE cela fonctionne. La raison est que, avec doctype, déclaration de mise en css gauche fonctionne différemment, semble que seul un nombre ne suffit pas ... pour le faire fonctionner, dans cette fonction de défilement automatique()

changement

document.images[ii].style.left = myLeft[ii]

à

document.images[ii].style.left = myLeft[ii] + "px"

en outre, deux de vos scripts ne se charge pas, menu.js et js/prettyPhoto.js

Answer 2

La raison probable est que vous n'avez pas des guillemets autour des attributs dans la dernière ligne de votre code:

document.write('<a href = ' + pic[ii].link + 'target="_blank" ><img space=0 hspace=0 vspace=0 border=0 height=131 style=position:absolute;top:0;left:0' + myLeft[ii] + '; src=' + pic[ii].name + ' onMouseOver=stop() onMouseOut=go()></a>') 

document.write('<a href="' + pic[ii].link + '" target="_blank"><img style="height:131px;position:absolute;top:0;left:' + myLeft[ii] + ';" src="' + pic[ii].name + '" onMouseOver="stop()" onMouseOut="go()" /></a>'); 

Aussi, je vous conseille vivement d'ajouter des points-virgules à votre Javascript. Enfin, utilisez une bibliothèque pour faire tout cela et obtenir plus de sommeil.