PDA

View Full Version : Two Conveyor Belts on one page



neod
02-21-2005, 05:59 AM
Conveyor Belt Slideshow
http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm
--------------------------------------------------------------

Note: Please don't flame me for asking something that you
have already said you won't help with. Sorry, I had too, I'm desperate.

My problem is that I really need two scripts, it's a requirement of my layout. And no, it's not a commercial work. I have changed all the variable names that I could find. So now, the changed vars script works, but the original doesn't (it does when I remove the changed vars one, naturally). Although both divs load with the correct size (obvious white space).

Here's the code if someone can look for the error:

<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<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="140px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=1
//configure background color:
slidebgcolor="transparent"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://members.jcom.home.ne.jp/cozy.o/"><img src="slide1.gif" border=0></a>'
leftrightslide[1]='<a href="http://members.jcom.home.ne.jp/cozy.o/scroll/index.html"><img src="slide2.gif" border=0></a>'
leftrightslide[2]='<a href="http://members.jcom.home.ne.jp/cozy.o/new/main.html"><img src="slide3.gif" border=0></a>'
leftrightslide[3]='<a href="http://members.jcom.home.ne.jp/cozy.o/java/java.html"><img src="slide4.gif" border=0></a>'
leftrightslide[4]='<a href="http://members.jcom.home.ne.jp/cozy.o/hot/index.html"><img src="slide5.gif" border=0></a>'

//Specify gap between each image (use HTML):
var imagegap=""

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=0


////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>
</td>
<td bgcolor="#000000" width="50">&nbsp;</td>
<td>
<script type="text/javascript">

//Specify the slider's width (in pixels)
var swid2="300px"
//Specify the slider's height
var hit2="140px"
//Specify the slider's slide speed (larger is faster 1-10)
var ccspeed=1
//configure background color:
sbcol="transparent"

//Specify the slider's images
var slcon2=new Array()
var fslide=''
slcon2[0]='<a href="http://members.jcom.home.ne.jp/cozy.o/"><img src="hslide1.gif" border=0></a>'
slcon2[1]='<a href="http://members.jcom.home.ne.jp/cozy.o/scroll/index.html"><img src="hslide2.gif" border=0></a>'
slcon2[2]='<a href="http://members.jcom.home.ne.jp/cozy.o/new/main.html"><img src="hslide3.gif" border=0></a>'
slcon2[3]='<a href="http://members.jcom.home.ne.jp/cozy.o/java/java.html"><img src="hslide4.gif" border=0></a>'
slcon2[4]='<a href="http://members.jcom.home.ne.jp/cozy.o/hot/index.html"><img src="hslide5.gif" border=0></a>'

//Specify gap between each image (use HTML):
var imggap=""

//Specify pixels gap between each slideshow rotation (use integer):
var slgap=0


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspd2=ccspeed
slcon2='<nobr>'+slcon2.join(imggap)+'</nobr>'
var iedom2=document.all||document.getElementById
if (iedom2)
document.write('<span id="temp2" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+slcon2+'</span>')
var acwid2=''
var c_slide, ff_slide

function fillup2(){
if (iedom2){
c_slide=document.getElementById? document.getElementById("test22") : document.all.test22
c_slide2=document.getElementById? document.getElementById("test33") : document.all.test33
c_slide.innerHTML=c_slide2.innerHTML=slcon2
acwid2=document.all? c_slide.offsetWidth : document.getElementById("temp2").offsetWidth
c_slide2.style.left=acwid2+slgap+"px"
}
else if (document.layers){
ff_slide=document.ff_slidemenu.document.ff_slidemenu2
ff_slide2=document.ff_slidemenu.document.ff_slidemenu3
ff_slide.document.write(slcon2)
ff_slide.document.close()
acwid2=ff_slide.document.width
ff_slide2.left=acwid2+slgap
ff_slide2.document.write(slcon2)
ff_slide2.document.close()
}
lefttime2=setInterval("slideleft2()",30)
}
window.onload=fillup2

function slideleft2(){
if (iedom2){
if (parseInt(c_slide.style.left)>(acwid2*(-1)+8))
c_slide.style.left=parseInt(c_slide.style.left)-copyspd2+"px"
else
c_slide.style.left=parseInt(c_slide2.style.left)+acwid2+slgap+"px"

if (parseInt(c_slide2.style.left)>(acwid2*(-1)+8))
c_slide2.style.left=parseInt(c_slide2.style.left)-copyspd2+"px"
else
c_slide2.style.left=parseInt(c_slide.style.left)+acwid2+slgap+"px"

}
else if (document.layers){
if (ff_slide.left>(acwid2*(-1)+8))
ff_slide.left-=copyspd2
else
ff_slide.left=ff_slide2.left+acwid2+slgap

if (ff_slide2.left>(acwid2*(-1)+8))
ff_slide2.left-=copyspd2
else
ff_slide2.left=ff_slide.left+acwid2+slgap
}
}


if (iedom2||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom2){
write('<div style="position:relative;width:'+swid2+';height:'+hit2+';overflow:hidden">')
write('<div style="position:absolute;width:'+swid2+';height:'+hit2+';background-color:'+sbcol+'" onMouseover="copyspd2=0" onMouseout="copyspd2=ccspeed">')
write('<div id="test22" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test33" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+swid2+' height='+hit2+' name="ff_slidemenu" bgColor='+sbcol+'>')
write('<layer name="ff_slidemenu2" left=0 top=0 onMouseover="copyspd2=0" onMouseout="copyspd2=ccspeed"></layer>')
write('<layer name="ff_slidemenu3" left=0 top=0 onMouseover="copyspd2=0" onMouseout="copyspd2=ccspeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>
</td>
</tr>
</table>

And I hate Flash... and I wanna prove that I can do this without it.

I'm hoping that someone has tried it successfully before, or may be this would help those who try it in the future.

Thanks in advance!

windowontheweb
02-21-2005, 06:33 AM
Yes, you did change all the variables you could find (which wasn't a waste, by the way), but you still have two 'event handlers' on the same page which are canceling each other out ('window.onload=fillup' & 'window.onload=fillup2'). This is actually addressed in the dynamicdrive.com FAQ section under "Top script related questions of Dynamic Drive", (click here) (http://www.wsabstract.com/javatutors/multiplejava3.shtml) , but I'll be merciful and explain how to fix it:
1. Copy down both event handlers ('window.onload=fillup' & 'window.onload=fillup2').
2. Delete them from the script.
3. Add the following code (in red) to the <body> tag on your page to make it look like this:
<body onload="fillup();fillup2()" >
Happy coding... :)

neod
02-21-2005, 06:56 AM
Thanks a bunch.

Yes I do know about the onload handler, just not enough to figure out the fact that being unique is not limited to an inline declaration.

Btw, I was gonna come here and ask if this actually was a handler issue since I put in this and Urs Dudli and Peter Gehrig's image scroller (http://www.24fun.com/downloadcenter/imgscroller/imgscroller.html) on the same page and it would still only run the later script.

Thanks again. :)