conveyor belt slideshow problem in IE

[djrazr]

1) Script Title: conveyor belt slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rightslide.htm

3) Describe problem: Just started building my first website, and i came across this script to run my photos on my website. In firefox, everything works great, no issues. When i open up in IE, it's really shaky, and the photos are not evenly lined up, each photo in 3 parts, top, middle, bottom.

If it make a difference i have my photos hosted on photobucket, and i'm using xsite pro to build my website.

thanks

[jscheuer1]

Unless the images are large in either dimensions or byte size, there shouldn't be a problem. Sounds like the style for the page may have set all images to display block. Look in your stylesheet. If you see something like so:

img {
	display: block;
}

If you see anything like that, get rid of the display: block; part and see what happens.

Or it might be that the height for the conveyor isn't sufficient:

<script type="text/javascript">

/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/


//Specify the slider's width (in pixels)
var sliderwidth="300px"
//Specify the slider's height
var sliderheight="150px"

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[djrazr]

Didnt find anything regarding display: block

What byte size / dimension should the pics be?

Sorry, i'm new to all this and this is my first website, i've built.

thanks

[jscheuer1]

It varies. I'd go for like no more than 200 x 200 and under 10,000 bytes per image, at that size, 10 images tops. Smaller images (by either byte size or dimensions) could be much more numerous.

But there could easily be some other problem, even if the images are 'too large', and that might not be an issue even if they are. So we really need to see the page:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[djrazr]

My website is not hosted yet. Would the source page work?

[jscheuer1]

I could well need the images. We can try that though. But you could just put it up somewhere and post a link to it.

[djrazr]

This is Firefox. Everything works great, good speed
http://www.screencast.com/users/djra...7-3a460de4103f


This is IE 8. Choppy and slower
http://www.screencast.com/users/djra...2-5a91a4c78992

source code

<p><script type="text/javascript"> 
 
/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
 
 
//Specify the slider's width (in pixels)
var sliderwidth="900px"
//Specify the slider's height
var sliderheight="300px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#ffffff"
 
//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<img src="http://i799.photobucket.com/albums/yy272/profitpt/photo.jpg" border=1></a>'
leftrightslide[1]='<img src="http://i799.photobucket.com/albums/yy272/profitpt/P1000942-12.jpg" border=1></a>'
leftrightslide[2]='<img src="http://i799.photobucket.com/albums/yy272/profitpt/thorseybefore3.jpg" border=1></a>'
leftrightslide[3]='<img src="http://i799.photobucket.com/albums/yy272/profitpt/thorsey2.jpg" border=1></a>'
leftrightslide[4]='<img src="http://i799.photobucket.com/albums/yy272/profitpt/jim12.jpg" border=1></a>'
leftrightslide[5]='<img src="http://i799.photobucket.com/albums/yy272/profitpt/P10009412.jpg" border=1></a>'
leftrightslide[6]='<img src="http://i799.photobucket.com/albums/yy272/profitpt/InProgressFrontShot151poundsGone-12.jpg" border=1></a>'
leftrightslide[7]='<img src="http://i799.photobucket.com/albums/yy272/profitpt/June302008-12.jpg" border=1></a>'
leftrightslide[8]='<img src="http://i799.photobucket.com/albums/yy272/profitpt/albert12.jpg" border=1></a>'
leftrightslide[9]='<img src="http://i799.photobucket.com/albums/yy272/profitpt/albert_after12.jpg" border=1></a>'
leftrightslide[10]='<img src="http://i799.photobucket.com/albums/yy272/profitpt/pattie7-21-060122.jpg" border=1></a>'
leftrightslide[11]='<img src="http://i799.photobucket.com/albums/yy272/profitpt/patty2.jpg" border=1></a>'
leftrightslide[12]='<img src="http://i799.photobucket.com/albums/yy272/profitpt/meHalloween.jpg" border=1></a>'
leftrightslide[13]='<img src="http://i799.photobucket.com/albums/yy272/profitpt/IMG_0886.jpg" border=1></a>'
 
 
 
//Specify gap between each image (use HTML):
var imagegap=" "
 
//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=2
 
 
////NO NEED TO EDIT BELOW THIS LINE////////////
 
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
 
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
 
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
 
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
 
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
 
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}
 
 
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script></p>
</td></tr></table></td>
<td class="XSP_RIGHT_PANEL_SPC" id="XSP_RIGHT_PANEL" rowspan="2"><div class="XSP_RIGHT_PANEL"><div align=center></div>
 
</div></td></tr>
<tr><td class="XSP_LEFT_PANEL_2" id="XSP_LEFT_PANEL" style="FONT-SIZE:1px;" height=1><div class="XSP_LEFT_PANEL"><p></p>
 
</div></td></tr>
 
<tr><td colspan="3" class="XSP_FOOTER_PANEL"><p class="center">©Copyright Pro-Fitpt.com. All Rights
Reserved.</p></td></tr></table>
 
<script language="javascript" type="text/javascript"> 
<!--
document.getElementById("XSP_LEFT_PANEL_SPC").innerHTML = document.getElementById("XSP_LEFT_PANEL").innerHTML;
document.getElementById("XSP_LEFT_PANEL").innerHTML = "&nbsp;";
//-->
</script>
 
</body>
</html>

[jscheuer1]

You cannot put this script inside a p element. It must go inside a block level element other than p. The reason being that a p is unique of all block level elements in that it will self close the moment it encounters another block level element inside of it. There are several generated by this script.

But that's not really a problem, except perhaps for layout.

I ran your code several ways, including a valid HTML 5 version, with another script that can do a similar effect, as well as the way it was posted. In all cases it was OK in both browsers. It wasn't incredibly smooth, but not real choppy either. The images are beyond the upper limits of dimensions and byte size as I previously stated for the number of images involved, so perhaps that could be worked on to good effect. But as I also mentioned, there's no guarantee that will help. Look into image optimization - a process whereby images for the web may be reduced in byte size at the price of resolution. The trick is to not reduce them enough in byte size as to make the loss of resolution noticeable.

One minor thing I can tell you is that since all of the images are 300px in height, and they all have the border=1 attribute, accounting for the top and bottom borders, the height of the conveyor should be set at 302, not 300 as you currently have it:

//Specify the slider's width (in pixels)
var sliderwidth="900px"
//Specify the slider's height
var sliderheight="302px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#ffffff"

But that has no effect over the smoothness in either browser here. It just makes it so you can see the entire image and borders for each image.

Note: Computers vary, so my results might not be identical to yours.