Javascript image scroller not working with DOCTYPE

Question

Hi there guys.

I've been searching the net hard for some javascript code that allows me to automatically scroll images non-stop horizontally on a webpage. After a long time searching, I finally came across something that was close enough. I then customised it as much as possible to make it do exactly what I wanted it to do.

This testing was done on a page without a DOCTYPE, so when I moved it over to a page that had a DOCTYPE, the javascript got messed up and refused to scroll. It just showed a single stationary image (on safari and firefox)

I've uploaded both webpages to my MobileMe site so you guys can have a look.

The page without a DOCTYPE: web.me.com/zubby

The page with a DOCTYPE: web.me.com/zubby/2.html

the javascript is also detailed below. I'll be extremely thankful if someone can help me out with this.

I only uploaded the relevant files so firebug will probably complain about non-existent functions.

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

The probable reason is that you don't have quotes around the attributes in the last line of your 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>');

Also, I strongly advice you to add semicolons to your Javascript.

Lastly, use a library to do all of this and get more sleep.

Answer 2

In IE it works. The reason is that with doctype, setting css declaration left works differently, seems that only a number is not enough...to make it work, in this function autoscroll()

Change

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

to

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

Also, two of your scripts don't load, menu.js and js/prettyPhoto.js