Image Scroller

[Anna2]

Hello,

I've got a problem with the image scroller on my website.

It worked fine from my Mac and PC in Safari, Explorer, Chrome and Firefox, but when it went online it didn't work properly in Safari.

Only Safari had the problem. In all the other browsers it was fine. In Safari though, the images were all squashed up and there were large gaps between them.

The example on the site where I got the script works fine in Safari though - http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../imagery/imgscroll3h.htm

Does anyone know if there is anything I should change in the script to make it work in Safari too. I changed the image size and spacing a lot from the example, so maybe that has messed it up.

Thanks in advance..

Here's a link to my site, where the problem is. http://annanicola.eu/

<script type="text/javascript">
data=[
["images/beach31wm","Alt / Title text for image 6","greece","Alt / Title text for image 7","beeflows42wm"],
["images/ifestos58wm","Alt / Title text for image 8","greece"],
["images/ladybugvetch20wm","Alt / Title text for image 9","wildlife"],
["images/limanaki13wm","Alt / Title text for image 10","marina"],
["images/prow37wm","Alt / Title text for image 10","marina"],
["images/wetland21wm","Alt / Title text for image 10","greece"],
["images/speed119wm","Alt / Title text for image 10","marina"],
["images/redadmiral86wm","Alt / Title text for image 12","wildlife"] // no comma at end of last index
]

imgPlaces=3 // number of images visible
imgWidth=320 // width of the images
imgHeight=180 // height of the images
imgSpacer=20 // space between the images

dir=0 // 0 = left, 1 = right

newWindow=0 // 0 = Open a new window for links 0 = no  1 = yes



moz=document.getElementById&&!document.all

step=1
timer=""
speed=50
nextPic=0
initPos=new Array()
nowDivPos=new Array()

function initHIS3(){

for(var i=0;i<imgPlaces+1;i++){ // create image holders
newImg=document.createElement("IMG")
newImg.setAttribute("id","pic_"+i)
newImg.setAttribute("src","")
newImg.style.position="absolute"
newImg.style.width=imgWidth+"px"
newImg.style.height=imgHeight+"px"
newImg.style.border=0
newImg.alt=""
newImg.i=i
newImg.onclick=function(){his3Win(data[this.i][2])}
document.getElementById("display_area").appendChild(newImg)
}

containerEL=document.getElementById("his3container")
displayArea=document.getElementById("display_area")
pic0=document.getElementById("pic_0")

containerBorder=(document.compatMode=="CSS1Compat"?0arseInt(containerEL.style.borderWidth)*2)
containerWidth=(imgPlaces*imgWidth)+((imgPlaces-1)*imgSpacer)
containerEL.style.width=containerWidth+(!moz?containerBorder:"")+"px"
containerEL.style.height=imgHeight+(!moz?containerBorder:"")+"px"

displayArea.style.width=containerWidth+"px"
displayArea.style.clip="rect(0,"+(containerWidth+"px")+","+(imgHeight+"px")+",0)"
displayArea.onmouseover=function(){stopHIS3()}
displayArea.onmouseout=function(){scrollHIS3()}

imgPos= -pic0.width

for(var i=0;i<imgPlaces+1;i++){
currentImage=document.getElementById("pic_"+i)

if(dir==0){imgPos+=pic0.width+imgSpacer} // if left

initPos[i]=imgPos
if(dir==0){currentImage.style.left=initPos[i]+"px"} // if left

if(dir==1){ // if right
document.getElementById("pic_"+[(imgPlaces-i)]).style.left=initPos[i]+"px"
imgPos+=pic0.width+imgSpacer
}

if(nextPic==data.length){nextPic=0}

currentImage.src=data[nextPic][0]
currentImage.alt=data[nextPic][1]
currentImage.i=nextPic
currentImage.onclick=function(){his3Win(data[this.i][2])}
nextPic++
}

scrollHIS3()
}

timer=""
function scrollHIS3(){
clearTimeout(timer)
for(var i=0;i<imgPlaces+1;i++){
currentImage=document.getElementById("pic_"+i)

nowDivPos[i]=parseInt(currentImage.style.left)

if(dir==0){nowDivPos[i]-=step}
if(dir==1){nowDivPos[i]+=step}

if(dir==0&&nowDivPos[i]<= -(pic0.width+imgSpacer) || dir==1&&nowDivPos[i]>containerWidth){

if(dir==0){currentImage.style.left=containerWidth+imgSpacer+"px"}
if(dir==1){currentImage.style.left= -pic0.width-(imgSpacer*2)+"px"}

if(nextPic>data.length-1){nextPic=0}

currentImage.src=data[nextPic][0]
currentImage.alt=data[nextPic][1]
currentImage.i=nextPic
currentImage.onclick=function(){his3Win(data[this.i][2])}

nextPic++

}
else{
currentImage.style.left=nowDivPos[i]+"px"
}

}
timer=setTimeout("scrollHIS3()",speed)

}

function stopHIS3(){
clearTimeout(timer)
}

function his3Win(loc){
if(loc==""){return}
if(newWindow==0){
location=loc
}
else{
//window.open(loc)
newin=window.open(loc,'win1','left=430,top=340,width=300,height=300') // use for specific size and positioned window
newin.focus()
}
}

// add onload="initHIS3()" to the opening BODY tag

// -->
</script>


<body onload="initHIS3()">
<DIV id="his3container" style="position:relative;  width:0px;height:0px; border:20px solid  black;overflow:hidden;background-color:black;">

<div id="display_area" style="position:absolute; left:0; top:0; width:0px; height:0px; clip:rect(0,0,0,0)"></div>

</DIV>
</body>

 

[Dunmail]

I've not run the code but I noticed this line:

containerBorder=(document.compatMode=="CSS1Compat"?0arseInt(containerEL.style.borderWidth)*2)

OarseInt should be parseInt and I'd pass it a radix as a second parameter so

containerBorder=(document.compatMode=="CSS1Compat"?parseInt(containerEL.style.borderWidth, 10)*2)

In addition you are using the ternary operator on this line but there's bits missing, it should be something like:

val= (test) ? true: false;

If you are prepared to get depressed then run the code through jslint, though you really need to understand what it's telling you. I just tried it and it got to line 15 before there were too many errors for it to continue!