Conveyer belt direction

[Gmann]

1) Script Title: Image Conveyer belt

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

3) Describe problem:
Hello everyone
I have been fiddling with this conveyer belt script for some time now, the first thing I did was edit the variables etc, so I could get more than one on the page. Then I decided to use text, instead of pictures, easily changed in the array. Then I changed the direction to scroll to the right, which worked fairly easily.

Now im working on a way to get it to scroll vertically. I've been looking through the code, made a variable for height, and changed the script to read height instead of left-ness. It seems to scroll fairly well, except the second copy of the array (cross_slide2) doesn't follow after it, like the horizontal scroll bars do. Theres a large gap, and wait, until it finishes scrolling off the bottom before it repeats from the top.

I posted the page here: http://www.angelfire.com/blog/gmann/test.htm
Its choppy on firefox, but not ie, however other way around when its straight from my hard drive (weird but not important)

I was hoping someone could have a look through the vertical code (which has been labeled fillup g) and possibly tell me what im missing
Thanks heaps in advance, Gmann

[jscheuer1]

I've got a few scripts that do that kind of thing. See:

http://home.comcast.net/~jscheuer1/s...oo_c_slide.htm

and:

http://home.comcast.net/~jscheuer1/s...ee_v_slide.htm

[Gmann]

Thanks for the link to those champ. However im not a pro at javascript, i know just enough to get by, and i couldn't understand the scripting. Not sure if the boxes with the marquee is quite what im after. When i tried to edit the code, bad things happened in droves. weird loading screen, words changing boxes at will.

i think im very close to recreating them with this code, perhaps im just one or two lines of code out. Could you pretty pretty please have a quick look at my code and see if theres any major reason its not repeating properly? I think its something to do with height checking int he stylesheet part? This is my raw code able to be pasted numerous times. Any help would be greatly appreciated


<script type="text/javascript">

/***********************************************
COPY PASTE THIS CODE IN THE APPROPRIATE CELL, REPLACE ALL @ WITH THE SCRIPT CODE, EG A, B, C, A1, A2, B5 ETC.
*fillup(), slideleft(), leftrightslide(), temp name, iedom#, test number, crossslide
* Conveyor belt slideshow script- &#169; 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
THIS IS FULLUP @
***********************************************/


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

//Specify the slider's images
var leftrightslide@=new Array()
var finalslide@=''
leftrightslide@[0]='<font face="couri" size="2">g'
leftrightslide@[1]='m g'
leftrightslide@[2]='a r'
leftrightslide@[3]='n t'
leftrightslide@[4]='<a href="www.google.com">n</a>'

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

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


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

var copyspeed=slidespeed@
leftrightslide@=''+leftrightslide@.join(imagegap@)+''
var iedom@=document.all||document.getElementById
if (iedom@)
document.write('<span id="temp@" style="visibility:hidden;position:absolute;bottom:-100px;left:-9000px">'+leftrightslide@+'</span>')
var actualwidth@=''
var actualheight@=''
var cross_slide@, ns_slide@

function fillup@(){
if (iedom@){
cross_slide@=document.getElementById? document.getElementById("test@8") : document.all.test@8
cross_slide2@=document.getElementById? document.getElementById("test@9") : document.all.test@9
cross_slide@.innerHTML=cross_slide2@.innerHTML=leftrightslide@
actualwidth@=document.all? cross_slide@.offsetWidth :
document.getElementById("temp@").offsetWidth
actualheight@=document.all? cross_slide@.offsetHeight :
document.getElementById("temp@").offsetHeight
cross_slide2@.style.bottom=actualheight@+slideshowgap@+"px"
}
else if (document.layers){
ns_slide@=document.ns_slide@menu.document.ns_slide@menu4
ns_slide2@=document.ns_slide@menu.document.ns_slide@menu5
ns_slide@.document.write(leftrightslide@)
ns_slide@.document.close()
actualwidth@=ns_slide@.document.width
actualheight@=ns_slide@.document.height
ns_slide2@.bottom=actualheight@+slideshowgap@
ns_slide2@.document.write(leftrightslide@)
ns_slide2@.document.close()
}
lefttime=setInterval("slideleft@()",30)
}


function slideleft@(){
if (iedom@){
if (parseInt(cross_slide@.style.bottom)>(actualheight@*(-1)+8))
cross_slide@.style.bottom=parseInt(c...de@.style.bottom)-copyspeed+"px"
else
cross_slide@.style.bottom=parseInt(c...e2@.style.bottom)+actualheight@+slideshowgap@+"px"

if (parseInt(cross_slide2@.style.bottom)>(actualheight@*(-1)+8))
cross_slide2@.style.bottom=parseInt(...e2@.style.bottom)-copyspeed+"px"
else
cross_slide2@.style.bottom=parseInt(...de@.style.bottom)+actualheight@+slideshowgap@+"px"

}
else if (document.layers){
if (ns_slide@.bottom>(actualheight@*(-1)+8))
ns_slide@.bottom-=copyspeed
else
ns_slide@.bottom=ns_slide2@.bottom+actualheight@+slideshowgap@

if (ns_slide2@.bottom>(actualheight@*(-1)+8))
ns_slide2@.bottom-=copyspeed
else
ns_slide2@.bottom=ns_slide@.bottom+actualheight@+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@+'">')
write('<div id="test@8" style="position:absolute;left:0px;bottom:0px"></div>')
write('<div id="test@9" style="position:absolute;left:-1000px;bottom:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth@+' height='+sliderheight@+' name="ns_slide@menu" bgColor='+slidebgcolor@+'>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

[jscheuer1]

Why do you have so many email addresses in your code? Anyways, I figured that was an error that crept in because of the way the forum parses the @ symbol when it isn't inside of a code block. Correcting for that, I still couldn't figure our what was wrong with your code but, was able to get mine to do what I think you wanted yours to:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

/* Marquee Styles - set one block for each marquee */

#marqueecontainer0 {
width: 10px; /*marquee0 width */
height: 300px; /*marquee0 height */
color:#444444;
background-color:#EAEAEA;
padding: 2px;
padding-left: 4px;
}

#marqueecontainer1 {
width: 18.75em; /*marquee1 width */
height: 9.375em; /*marquee1 height */
color:#0000ff;
background-color: #cccccc;
border: 2px solid blue;
padding: 2px;
padding-left: 4px;
}

#marqueecontainer2 {
width: 12.5em; /*marquee2 width */
height: 5em; /*marquee2 height */
border: 1px solid black;
padding: 2px;
padding-left: 4px;
font-family:verdana, arial, sans-serif;
font-size:90%;
}

.marq_noscript { /* Marquee style for non-javascript enabled browsers - do not change */
overflow:hidden;
}

/* End Marquee Styles */

h4 { /* optional style for H4 element */
margin-top:1em;
}

</style>

<script type="text/javascript">

/***********************************************
* OOCC Vertical Cross browser Marquee - © John Davenport Scheuer
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
* Modified from Cross browser Marquee II - © Dynamic Drive
* in http://www.dynamicdrive.com/forums username - jscheuer1
* For multiple use, continuous content, and functionality in Opera and NS 7
***********************************************/

//////// NO NEED TO EDIT ////////////
function cross_marquee(delayb4scroll, marqueespeed, pauseit, imagemarquee, direction){
if(!document.getElementById||!document.removeChild)
return;
if(!cross_marquee.ar)
cross_marquee.ar=[];
cross_marquee.ar[this.mqid=cross_marquee.ar.length]=this;
this.delayb4scroll=delayb4scroll? delayb4scroll : 300;
this.marqueespeed=marqueespeed? marqueespeed : 1;
this.pauseit=pauseit? pauseit : 0;
this.factor=imagemarquee? 0 : 8;
this.copyspeed=this.marqueespeed
this.pausespeed=(this.pauseit==0)? this.copyspeed: 0;
this.direct=direction=='up'? 'top' : 'bottom';
if(document.getElementById('marqueecontainer'+this.mqid)){
document.write('<\/div><\/div>');
document.getElementById('marqueecontainer'+this.mqid).parentNode.removeChild(document.getElementById('marqueecontainer'+this.mqid));
}
else{
alert('You are missing one or more of the divisions:\n<div id="marqueecontainer'+this.mqid+'" style="overflow:auto;">\n'+
'<div class="marq_noscript">\n from your markup.')
return;
}
document.write('<div id="marqueecontainer'+this.mqid+'" style="position:relative;overflow:hidden;" onMouseover="cross_marquee.ar['+this.mqid+'].copyspeed=cross_marquee.ar['+this.mqid+'].pausespeed;" onMouseout="cross_marquee.ar['+this.mqid+'].copyspeed=cross_marquee.ar['+this.mqid+'].marqueespeed;">\n'+
'<div id="vmarquee_0_'+this.mqid+'" style="position: absolute; width: 98%;"><\/div><div id="vmarquee_1_'+this.mqid+'" style="position: absolute;'+this.direct+':0px; width: 98%;">')

this.cross_marquee=document.getElementById("vmarquee_1_"+this.mqid)
this.cross_marquee2=document.getElementById("vmarquee_0_"+this.mqid)
this.marqueeheight=document.getElementById("marqueecontainer"+this.mqid).offsetHeight;
var cacheobj=this;
setTimeout(function(){cacheobj.runtime=setInterval("cross_marquee.ar["+cacheobj.mqid+"].scrollmarquee()",30)},this.delayb4scroll);
}

cross_marquee.prototype.scrollmarquee=function(){
if(!this.factor&&this.cross_marquee2.innerHTML==''){
this.ims=this.cross_marquee.getElementsByTagName('img');
for (var i_tem = 0; i_tem < this.ims.length; i_tem++)
if(typeof this.ims[i_tem].complete=='boolean'&&!this.ims[i_tem].complete)
return;
this.cross_marquee.innerHTML=this.cross_marquee.innerHTML.replace(/\n|\f/g, '').replace(/> </g, '><');
}
if(this.cross_marquee2.innerHTML==''||this.cross_marquee2.innerHTML!=this.cross_marquee.innerHTML)
this.cross_marquee2.innerHTML=this.cross_marquee.innerHTML;
if(!this.actualheight||this.actualheight!=this.cross_marquee.offsetHeight||this.actualheight!=this.cross_marquee2.offsetHeight){
this.cross_marquee.style[this.direct]=0;
this.actualheight=this.cross_marquee.offsetHeight;
this.cross_marquee2.style[this.direct]=this.actualheight+this.factor+'px';
}
if(this.marqueeheight<this.actualheight){
if(parseInt(this.cross_marquee.style[this.direct])<this.actualheight*-1+this.factor)
this.cross_marquee.style[this.direct]=parseInt(this.cross_marquee2.style[this.direct])+this.actualheight+this.factor+"px";
if(parseInt(this.cross_marquee2.style[this.direct])<this.actualheight*-1+this.factor)
this.cross_marquee2.style[this.direct]=parseInt(this.cross_marquee.style[this.direct])+this.actualheight+this.factor+"px";
this.cross_marquee2.style[this.direct]=parseInt(this.cross_marquee2.style[this.direct])-this.copyspeed+"px";
this.cross_marquee.style[this.direct]=parseInt(this.cross_marquee.style[this.direct])-this.copyspeed+"px";
}
else{
this.cross_marquee2.style[this.direct]=this.marqueeheight*-1-28+'px';
if (parseInt(this.cross_marquee.style[this.direct])>this.actualheight*-1-28)
this.cross_marquee.style[this.direct]=parseInt(this.cross_marquee.style[this.direct])-this.copyspeed+"px";
else
this.cross_marquee.style[this.direct]=this.marqueeheight+this.factor+"px";
}
}

</script>
</head>
<body>

<!-- Begin Marquee Instance 0 - do not edit these two div tags for style, use the stylesheet -->
<div id="marqueecontainer0" style="overflow:auto;">
<div class="marq_noscript">
<script type="text/javascript">
/*///////////////////////// Explanation of Parameters ///////////////////////////
* delayb4scroll - Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
* marqueespeed - Specify marquee scroll speed (larger is faster 1-10)
* pauseit - Pause marquee onMousever (0=no. 1=yes)?
* imagesonly - Will marquee be used as an images only slide show? (true or false)
* direction - Use 'up' for a marquee that moves up, 'down' for one that moves down
*
* usage: new cross_marquee(delayb4scroll, marqueespeed, pauseit, imagesonly, direction)
* /////////////////////////////////////////////////////////////////////////////*/
new cross_marquee(1000, 1, 1, true, 'down');
</script>
<!-- Scroller Contents 0 Start Here -->

<font face="courier new" size="2">g<br>m<br>g<br>a<br>r<br>n<br>t<br><a href="www.google.com">n</a><br>
g<br>m<br>g<br>a<br>r<br>n<br>t<br><a href="www.google.com">n</a><br>
g<br>m<br>g<br>a<br>r<br>n<br>t<br><a href="www.google.com">n</a></font>

<!-- End Scroller Contents 0 - DO NOT remove two trailing division end tags below -->
</div></div>
<!-- End Marquee Instance 0 -->

<br>

<!-- Begin Marquee Instance 1 - do not edit these two div tags for style, use the stylesheet -->
<div id="marqueecontainer1" style="overflow:auto;">
<div class="marq_noscript">
<script type="text/javascript">
// usage: new cross_marquee(delayb4scroll, marqueespeed, pauseit, imagesonly, direction)
new cross_marquee(3000, 1, 1, false, 'up');
</script>
<!-- Scroller Contents 1 Start Here -->

<h4>Your second scroller contents:</h4>
Ornare sed fringilla lacus tortor viverra, porttitor dolor ligula phasellus, 
interdum nunc, lectus id aenean bibendum vestibulum donec. 
Elit dapibus integer dictum, ipsum fringilla. 
Maecenas elit purus orci, urna tincidunt feugiat ultricies morbi. 
Lacus pulvinar suspendisse placerat, facilisis porttitor ultrices feugiat. 
Per fusce, ut phasellus integer aenean et duis lectus, dolor volutpat 
elit vivamus, at neque consectetuer, nullam amet libero dolor in sem. 
Diam sed tincidunt id lacus pellentesque vitae, ullam eleifend, metus et, nulla ipsum.

<!-- End Scroller Contents 1 - DO NOT remove two trailing division end tags below -->
</div></div>
<!-- End Marquee Instance 1 -->

<br>

<!-- Begin Marquee Instance 2 - do not edit these two div tags for style, use the stylesheet -->
<div id="marqueecontainer2" style="overflow:auto;">
<div class="marq_noscript">
<script type="text/javascript">
// usage: new cross_marquee(delayb4scroll, marqueespeed, pauseit, imagesonly, direction)
new cross_marquee(1000, 1, 1, false, 'up');
</script>
<!-- Scroller Contents 2 Start Here -->

<div>Thank you for visiting <a href="http://www.dynamicdrive.com">Dynamic Drive.</a></div>
<p>If you find this script useful, please consider linking to us by <a href="../link.htm">clicking here.</a></p>
<p>Visit our partner <a href="http://javascriptkit.com">JavaScript Kit</a> for JavaScript tutorials.</p>
<!--[if IE]>
<div style="font-size:50%;"></div>
<![endif]-->
<!-- End Scroller Contents 2 - DO NOT remove two trailing division end tags below -->
</div></div>
<!-- End Marquee Instance 2 -->

</body>
</html>

[Gmann]

Hiya again, The @ symbols are there to differentiate between variables and stuff, i just use word, find and replace @ with the appropriate character, and paste in the code, gives me a completely seperate instance of code.
Your probably 100% correct about the forum reading it as an e-mail.

Your code, does indeed seem to do exactly what I wanted yay.
It seems like this code is about 20 times shorter than my modified code, since it all relies on the same script, so you get props from me for being awesome.

I had a quick play around, and it seems easy enough to edit and stick in with the rest of the scripts.

Thanks for your help, hopefully I don't have any other problems.

You are a champion.