Help with Conveyor Belt Script in IE

**avonti** · 01-29-2007, 01:45 AM

1) Conveyor Belt Slide show

2) http://www.dynamicdrive.com/dynamici...rightslide.htm

3) The slide show does not display as I would like in IE6 but works fine in Firefox.

Is anyone able to tell be how to make the conveyor belt fit the total width of the page after it comes to the end and starts again. At the moment in IE it leaves half a page gap and then starts again from the middle of the page.
Also with a transparent image background the slider background color does not show. I just get the page color to show (In IE)

you can visit my page at http://www.standard-poodle.com to see the problem

With Thanks
Angela

**jscheuer1** · 01-29-2007, 05:10 AM

Get rid of the red style:

Code:

#slideshowfront {
	position: relative;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	width: 720px;
	clear: both;
	top: 30px;
}

With your DOCTYPE, the green styles will center the element anyway. The text-align:center; shouldn't apply to block level elements (like the slide show script created elements) but, IE often gets this wrong. That is why, with text-align:center;, the slide show appears to originate from the center of the element.

**avonti** · 01-29-2007, 05:32 AM

I am just learning CSS, this is my first website using it. Removing the red code has fixed it.
Kind Regards
Angela

**moechaing** · 06-30-2008, 05:45 AM

Hi Gurus,

I've got similar problem. The script works very well in Firefox or Safari but not working IE7. You can try checking the page at http://www.spa.com.mm/test/page/KeyPersonal.php
Any clue or hint for this?

Regards,

**jscheuer1** · 06-30-2008, 11:34 AM

Originally Posted by moechaing

Hi Gurus,

I've got similar problem. The script works very well in Firefox or Safari but not working IE7. You can try checking the page at http://www.spa.com.mm/test/page/KeyPersonal.php
Any clue or hint for this?

Regards,

Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

You can fix that by adding the credit back like so:

Code:

		<td height="64" colspan="7" align="center" background="images/keyper8.jpg"><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
***********************************************/

var sliderwidth="531px"
//Specify the slider's height
var sliderheight="64px"
//Specify the slider's slide spe . . .

Now onto your problem, there are actually two basic issues here:

First, you have unclosed span tags in your array, ex:

Code:

leftrightslide[0]='<span id="1"><a href="javascript:display(0)"><img src="../page/ani/slider0.jpg" border=0></a>'

Fix all of those by closing them, ex:

Code:

leftrightslide[0]='<span id="1"><a href="javascript:display(0)"><img src="../page/ani/slider0.jpg" border=0></a></span>'

Just taking care of that will get it working, albeit poorly in IE. But you will now have a version the centering problem that was mentioned previously in this thread.

So, for this second problem, remove the align="center" attribute from the containing table cell here:

Code:

		<td height="64" colspan="7" align="center" background="images/keyper8.jpg"><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
***********************************************/

var sliderwidth="531px"
//Specify the slider's height
var sliderheight="64px"
//Specify the slider's slide spe . . .

That will fix the centering bug of the script for IE, but will also move the display to the left. To fix that, we can do several things. The easiest is to edit the script here (addition red):

Code:

if (iedom||document.layers){
with (document){
document.write('<table align="center" 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:'+sliderwi . . .

We can actually add align="center" there, because it just centers the table, not its contents as did the td tag. Now IE 7, FF and Safari should be happy.

**moechaing** · 07-01-2008, 09:27 AM

Thanks sir.
Modified the page as suggested and it worked perfectly for both IE and Firefox.
You really are a guru.

**mrag** · 07-04-2008, 01:47 AM

Hello...pretty complete newb here, More a cobble together person that does this instead of crossword puzzles.

My problem is still as stated above:

Is anyone able to tell be how to make the conveyor belt fit the total width of the page after it comes to the end and starts again. At the moment in IE it leaves half a page gap and then starts again from the middle of the page.

I'm also using: http://www.dynamicdrive.com/dynamici...rightslide.htm

and sample can be seen at: http://www.renacad.com/play

In trying to help, I've adjusted the speed, height and background. Main question, why in IE is there a "start-over gap" in IE and also out of curiousity, is there a way to align the images to the "middle" of the belt (halign="center" ?? for lack of a better sentence).

(as a real, unpaid amateur at this-done for brain exercise and the grand kids, these IE and FFx "differences" should drive normal people over the wall. Last week I loved IE because it didn't give me scroll bars where FFx did. This week IE is sending me to drink (well, that part might not be too bad) and those are the only two browsers I ever want to hear about) TIA...Al

**jscheuer1** · 07-04-2008, 07:02 AM

You have a similar problem alright. This time it appears to be caused by the <center> tag inside of which all, or almost all of the rest of the page elements are located.

It looks like you can fix your Conveyor by adding (highlighted):

Code:

 . . . 
if (iedom||document.layers){
with (document){
document.write('<table align="center" border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="text-align:left;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>

<!--/////end conveyor belt photo line///////--> . . .

**mrag** · 07-04-2008, 08:57 AM

Brilliant-issued solved. I am amazed at how you can read through all that code and see there is a "text-align: left;" missing. To me it's like looking at Einstein's blackboard and noticing in the middle of a 40 line formula that an extra square root is needed. Much thanks.