Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

 
 
Thread Tools Search this Thread Display Modes
Prev Previous Post   Next Post Next
Old May 1, 2012, 05:21 AM   #1
Anna2
macrumors newbie
 
Join Date: May 2012
Location: Greece
Image Scroller

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.c...mgscroll3h.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/


Code:
<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>
Anna2 is offline   0 Reply With Quote

 
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
What's that game? Side scroller Rikyrik81 iPhone and iPod touch Apps 0 Mar 14, 2014 07:03 AM
Possible to access Origional image file from texted image? (to view metadata) inck243 iPhone Tips, Help and Troubleshooting 2 Dec 7, 2013 11:47 PM
Sotryboard and scroller, how do I arrange my objects? thedon1 iPhone/iPad Programming 7 Jun 9, 2013 12:01 PM
capture overlay image whenever image move new position or new scale karthees iPhone/iPad Programming 1 Mar 27, 2013 01:38 PM
Shuriken Chicken - hand made side scroller is now FREE! chenpo iPhone and iPod touch Apps 0 Jul 29, 2012 08:01 AM

Forum Jump

All times are GMT -5. The time now is 06:47 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC