PDA

View Full Version : Copy and Paste Vertical Scroller



OzWaz
05-15-2017, 08:23 AM
I have copied and pasted the code from this website(http://www.javascriptkit.com/script/script2/verticalscroller.shtml) but having embedded into a webpage I cannot find how to make it function.

It seems like some other components are missing particularly a section where it calls up the content to go into the scroll boxes

Could somebody please give me some assist with this?

Thanks

jscheuer1
05-15-2017, 03:16 PM
That's a pretty old script and will not work in any modern browser. With a little tweaking, however, it can:


<script>

//Vertical Scroller v1.2- by Brian of www.ScriptAsylum.com
//Updated for bug fixes
//Visit JavaScript Kit (http://javascriptkit.com) for script

//ENTER CONTENT TO SCROLL BELOW.
(function(){
var content='<p>Visit <a href="http://www.javascriptkit.com">JavaScript Kit</a> for JavaScript tutorials and over 400 free scripts</p><p><a href="http://freewarejava.com">Freewarejava.com</a>- direct links to Java applets and resources</p><p>Stay up to date on current news and events. Visit <a href="http://www.msnbc.com">MSNBC.com</a></p><p><a href="http://www.dynamicdrive.com">Dynamic Drive</a> is your definitive source for DHTML scripts and components.</p>';

var boxheight=150; // BACKGROUND BOX HEIGHT IN PIXELS.
var boxwidth=150; // BACKGROUND BOX WIDTH IN PIXELS.
var boxcolor="#FFF6e9"; // BACKGROUND BOX COLOR.
var speed=50; // SPEED OF SCROLL IN MILLISECONDS (1 SECOND=1000 MILLISECONDS)..
var pixelstep=2; // PIXELS "STEPS" PER REPITITION.
var godown=false; // TOP TO BOTTOM=TRUE , BOTTOM TO TOP=FALSE

// DO NOT EDIT BEYOND THIS POINT

var txt='';
txt+='<div id="ref" style="position:relative; width:'+boxwidth+'px; height:'+boxheight+'px; background-color:'+boxcolor+';" ></div>';
txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'px; height:'+boxheight+'px; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
txt+='<div id="inner" style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'px; overflow:hidden; cursor:default;">'+content+'</div>';
txt+='</div>';
document.write(txt);

function getElHeight(el){
return (el.style.height)? parseInt(el.style.height):parseInt(el.offsetHeight);
}

function getPageLeft(el){
var x;
x = 0;
while(el.offsetParent!=null){
x+=el.offsetLeft;
el=el.offsetParent;
}
x+=el.offsetLeft;
return x;
}

function getPageTop(el){
var y;
y=0;
while(el.offsetParent!=null){
y+=el.offsetTop;
el=el.offsetParent;
}
y+=el.offsetTop;
return y;
}

function scrollbox(){
inner.style.top=parseInt(inner.style.top)+((godown)? pixelstep: -pixelstep)+'px';
if(godown){
if(parseInt(inner.style.top)>boxheight)inner.style.top=-elementheight+'px';
}else{
if(parseInt(inner.style.top)<2-elementheight)inner.style.top=boxheight+2+'px';
}}

window.addEventListener('resize', function(){
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
}, false);

window.addEventListener('load', function(){
outer=document.getElementById('outer');
inner=document.getElementById('inner');
ref=document.getElementById('ref');
elementheight=getElHeight(inner);
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
inner.style.top=((godown)? -elementheight : boxheight)+'px';
inner.style.clip='rect(0px, '+(boxwidth-4)+'px, '+(elementheight)+'px, 0px)';
outer.style.visibility="visible";
setInterval(scrollbox,speed);
}, false);
})();
</script>

<p align="center">This free script provided by<br />
<a href="http://www.javascriptkit.com">JavaScript
Kit</a></p>

If you want more help, please post a link to the page on your site that has this code on it.

OzWaz
05-17-2017, 08:35 AM
I had no luck John with the new code supplied so I have uploaded the page to one of my web sites so you can see what I am doing wrong

See- http://goofygoogle.com/docs/scroller.html

Many Thanks

Warren

jscheuer1
05-18-2017, 01:57 AM
Well I did modify the code a few times, and settled on this:


<script>

//Vertical Scroller v1.2- by Brian of www.ScriptAsylum.com
//Updated for bug fixes
//Visit JavaScript Kit (http://javascriptkit.com) for script

//ENTER CONTENT TO SCROLL BELOW.
(function(){
var content='<p>Visit <a href="http://www.javascriptkit.com">JavaScript Kit</a> for JavaScript tutorials and over 400 free scripts</p><p><a href="http://freewarejava.com">Freewarejava.com</a>- direct links to Java applets and resources</p><p>Stay up to date on current news and events. Visit <a href="http://www.msnbc.com">MSNBC.com</a></p><p><a href="http://www.dynamicdrive.com">Dynamic Drive</a> is your definitive source for DHTML scripts and components.</p>';

var boxheight=150; // BACKGROUND BOX HEIGHT IN PIXELS.
var boxwidth=150; // BACKGROUND BOX WIDTH IN PIXELS.
var boxcolor="#FFF6e9"; // BACKGROUND BOX COLOR.
var speed=50; // SPEED OF SCROLL IN MILLISECONDS (1 SECOND=1000 MILLISECONDS)..
var pixelstep=2; // PIXELS "STEPS" PER REPITITION.
var godown=false; // TOP TO BOTTOM=TRUE , BOTTOM TO TOP=FALSE

// DO NOT EDIT BEYOND THIS POINT

var txt='';
txt+='<div id="ref" style="position:relative; width:'+boxwidth+'px; height:'+boxheight+'px; background-color:'+boxcolor+';" ></div>';
txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'px; height:'+boxheight+'px; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
txt+='<div id="inner" style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'px; overflow:hidden; cursor:default;">'+content+'</div>';
txt+='</div>';
document.write(txt);

function getElHeight(el){
return (el.style.height)? parseInt(el.style.height):parseInt(el.offsetHeight);
}

function getPageLeft(el){
var x;
x = 0;
while(el.offsetParent!=null){
x+=el.offsetLeft;
el=el.offsetParent;
}
x+=el.offsetLeft;
return x;
}

function getPageTop(el){
var y;
y=0;
while(el.offsetParent!=null){
y+=el.offsetTop;
el=el.offsetParent;
}
y+=el.offsetTop;
return y;
}

function scrollbox(){
inner.style.top=parseInt(inner.style.top)+((godown)? pixelstep: -pixelstep)+'px';
if(godown){
if(parseInt(inner.style.top)>boxheight)inner.style.top=-elementheight+'px';
}else{
if(parseInt(inner.style.top)<2-elementheight)inner.style.top=boxheight+2+'px';
}}

window.addEventListener('resize', function(){
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
}, false);

window.addEventListener('load', function(){
outer=document.getElementById('outer');
inner=document.getElementById('inner');
ref=document.getElementById('ref');
elementheight=getElHeight(inner);
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
inner.style.top=((godown)? -elementheight : boxheight)+'px';
inner.style.clip='rect(0px, '+(boxwidth-4)+'px, '+(elementheight)+'px, 0px)';
outer.style.visibility="visible";
setInterval(scrollbox,speed);
}, false);
})();
</script>

<p align="center">This free script provided by<br />
<a href="http://www.javascriptkit.com">JavaScript
Kit</a></p>

You should not try more than one version on the same page, though I'm not certain that was the problem. In fact looking at it closer, it looks like you added extra line breaks. In any case, it's clear this latest version works:

http://jscheuer1.com/demos/tidbits/jkitscroller.htm

OzWaz
05-18-2017, 10:44 PM
RE:- [QUOTE=jscheuer1;321737] Well I did modify the code a few times, and settled on this:

Thanks John

I have a copied and pasted the new code and put it up back on the same webpage but still the scroll does not work.

I clicked on the link that you have at the bottom of your last response [http://jscheuer1.com/demos/tidbits/jkitscroller.htm] and I see that the scroll works perfectly.

So what am I doing wrong (or not understanding) Iím sure it must be some small thing:confused:

Thanks

jscheuer1
05-19-2017, 03:45 AM
Same problem as before. Somehow extra line breaks (and it looks like non-standard code as well) have been introduced. Where the page on your site has:


txt+='<div id="ref" style="position:relative; width:'+boxwidth+'px;
txt+height:'+boxheight+'px; background-color:'+boxcolor+';" ></div>';
txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'px;
txt+height:'+boxheight+'px; visibility:hidden;
txt+background-color:'+boxcolor+'; overflow:hidden" >'; ='<div
txt+id="inner" style="position:absolute; visibility:visible; left:2px;
txt+top:2px; width:'+(boxwidth-4)+'px; overflow:hidden;
txt+cursor:default;">'+content+'</div>';
txt+='</div>';

It needs to be:


txt+='<div id="ref" style="position:relative; width:'+boxwidth+'px; height:'+boxheight+'px; background-color:'+boxcolor+';" ></div>';
txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'px; height:'+boxheight+'px; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
txt+='<div id="inner" style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'px; overflow:hidden; cursor:default;">'+content+'</div>';
txt+='</div>';

OzWaz
05-19-2017, 08:12 AM
Okay I have it working now

Thanks for all your assistance

Warren

jscheuer1
05-19-2017, 02:28 PM
Great! And for you, or anyone else interested in this particular bit of code, I discovered some strict errors that I've fixed in this version (additions highlighted):


<script>

//Vertical Scroller v1.2- by Brian of www.ScriptAsylum.com
//Updated for bug fixes
//Visit JavaScript Kit (http://javascriptkit.com) for script

//ENTER CONTENT TO SCROLL BELOW.
(function(){
var content='<p>Visit <a href="http://www.javascriptkit.com">JavaScript Kit</a> for JavaScript tutorials and over 400 free scripts</p><p><a href="http://freewarejava.com">Freewarejava.com</a>- direct links to Java applets and resources</p><p>Stay up to date on current news and events. Visit <a href="http://www.msnbc.com">MSNBC.com</a></p><p><a href="http://www.dynamicdrive.com">Dynamic Drive</a> is your definitive source for DHTML scripts and components.</p>';

var boxheight=150; // BACKGROUND BOX HEIGHT IN PIXELS.
var boxwidth=150; // BACKGROUND BOX WIDTH IN PIXELS.
var boxcolor="#FFF6e9"; // BACKGROUND BOX COLOR.
var speed=50; // SPEED OF SCROLL IN MILLISECONDS (1 SECOND=1000 MILLISECONDS)..
var pixelstep=2; // PIXELS "STEPS" PER REPITITION.
var godown=false; // TOP TO BOTTOM=TRUE , BOTTOM TO TOP=FALSE

// DO NOT EDIT BEYOND THIS POINT

var txt='', outer, inner, ref, elementheight;
txt+='<div id="ref" style="position:relative; width:'+boxwidth+'px; height:'+boxheight+'px; background-color:'+boxcolor+';" ></div>';
txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'px; height:'+boxheight+'px; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
txt+='<div id="inner" style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'px; overflow:hidden; cursor:default;">'+content+'</div>';
txt+='</div>';
document.write(txt);

function getElHeight(el){
return (el.style.height)? parseInt(el.style.height):parseInt(el.offsetHeight);
}

function getPageLeft(el){
var x;
x = 0;
while(el.offsetParent!=null){
x+=el.offsetLeft;
el=el.offsetParent;
}
x+=el.offsetLeft;
return x;
}

function getPageTop(el){
var y;
y=0;
while(el.offsetParent!=null){
y+=el.offsetTop;
el=el.offsetParent;
}
y+=el.offsetTop;
return y;
}

function scrollbox(){
inner.style.top=parseInt(inner.style.top)+((godown)? pixelstep: -pixelstep)+'px';
if(godown){
if(parseInt(inner.style.top)>boxheight)inner.style.top=-elementheight+'px';
}else{
if(parseInt(inner.style.top)<2-elementheight)inner.style.top=boxheight+2+'px';
}}

window.addEventListener('resize', function(){
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
}, false);

window.addEventListener('load', function(){
outer=document.getElementById('outer');
inner=document.getElementById('inner');
ref=document.getElementById('ref');
elementheight=getElHeight(inner);
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
inner.style.top=((godown)? -elementheight : boxheight)+'px';
inner.style.clip='rect(0px, '+(boxwidth-4)+'px, '+(elementheight)+'px, 0px)';
outer.style.visibility="visible";
setInterval(scrollbox,speed);
}, false);
})();
</script>

OzWaz
05-20-2017, 12:22 AM
Hi John

Yes it does the job really well.

I have one small request and please feel comfortable in declining, but the only other feature I would really like was to be able to use a mouse over function to halt the Scroller and let it continue when the cursor was removed.

I noticed in some of the other scroll code that is around have this feature i.e.(" onmouseover="sspeed=0;" onmouseout=" )

Iíve tried to compare the codes to see where I might be able to insert it to garnish this facility but alas I am a stranger to JavaScript and J query so hopelessly out of my depth.

Is it possible you could show me what and where to insert a mouse over capability?


Regards and Thanks

Warren

jscheuer1
05-20-2017, 03:54 AM
Sure:


<script>

//Vertical Scroller v1.2- by Brian of www.ScriptAsylum.com
//Updated for bug fixes
//Visit JavaScript Kit (http://javascriptkit.com) for script

//ENTER CONTENT TO SCROLL BELOW.
(function(){
var content='<p>Visit <a href="http://www.javascriptkit.com">JavaScript Kit</a> for JavaScript tutorials and over 400 free scripts</p><p><a href="http://freewarejava.com">Freewarejava.com</a>- direct links to Java applets and resources</p><p>Stay up to date on current news and events. Visit <a href="http://www.msnbc.com">MSNBC.com</a></p><p><a href="http://www.dynamicdrive.com">Dynamic Drive</a> is your definitive source for DHTML scripts and components.</p>';

var boxheight=150; // BACKGROUND BOX HEIGHT IN PIXELS.
var boxwidth=150; // BACKGROUND BOX WIDTH IN PIXELS.
var boxcolor="#FFF6e9"; // BACKGROUND BOX COLOR.
var speed=50; // SPEED OF SCROLL IN MILLISECONDS (1 SECOND=1000 MILLISECONDS)..
var pixelstep=2; // PIXELS "STEPS" PER REPITITION.
var godown=false; // TOP TO BOTTOM=TRUE , BOTTOM TO TOP=FALSE

// DO NOT EDIT BEYOND THIS POINT

var txt='', outer, inner, ref, elementheight, mouseisover;
txt+='<div id="ref" style="position:relative; width:'+boxwidth+'px; height:'+boxheight+'px; background-color:'+boxcolor+';" ></div>';
txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'px; height:'+boxheight+'px; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
txt+='<div id="inner" style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'px; overflow:hidden; cursor:default;">'+content+'</div>';
txt+='</div>';
document.write(txt);

function getElHeight(el){
return (el.style.height)? parseInt(el.style.height):parseInt(el.offsetHeight);
}

function getPageLeft(el){
var x;
x = 0;
while(el.offsetParent!=null){
x+=el.offsetLeft;
el=el.offsetParent;
}
x+=el.offsetLeft;
return x;
}

function getPageTop(el){
var y;
y=0;
while(el.offsetParent!=null){
y+=el.offsetTop;
el=el.offsetParent;
}
y+=el.offsetTop;
return y;
}

function scrollbox(){
if(mouseisover){return;}
inner.style.top=parseInt(inner.style.top)+((godown)? pixelstep: -pixelstep)+'px';
if(godown){
if(parseInt(inner.style.top)>boxheight)inner.style.top=-elementheight+'px';
}else{
if(parseInt(inner.style.top)<2-elementheight)inner.style.top=boxheight+2+'px';
}}

window.addEventListener('resize', function(){
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
}, false);

window.addEventListener('load', function(){
outer=document.getElementById('outer');
outer.addEventListener('mouseover', function(){mouseisover = true;}, false);
outer.addEventListener('mouseout', function(){mouseisover = false;}, false);
inner=document.getElementById('inner');
ref=document.getElementById('ref');
elementheight=getElHeight(inner);
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
inner.style.top=((godown)? -elementheight : boxheight)+'px';
inner.style.clip='rect(0px, '+(boxwidth-4)+'px, '+(elementheight)+'px, 0px)';
outer.style.visibility="visible";
setInterval(scrollbox,speed);
}, false);
})();
</script>

OzWaz
05-22-2017, 12:10 AM
Thanks Again that excellent

You may like to look at the final product (see my Goofy Google link above) Thanks to your big contribution

Regards

Warren

jscheuer1
05-22-2017, 02:27 AM
One thing I just noticed - I think it's because you have images, is that until the images are loaded (only happens when the images aren't cached - like anytime someone visits for the first time), you see them beneath the scroller briefly until the images load. There's an easy fix for that (working from your existing code, but applicable to anyone using this - changes/additions highlighted in two places):


<script>

<!-- Vertical Scroller v1.2- by Brian of www.ScriptAsylum.com - Visit JavaScript Kit (http://javascriptkit.com) for script-->


<!-- ENTER CONTENT TO SCROLL after {var content='} BELOW -->.
(function(){
var content='<p class="frame2"><a href="#"><img src="img/a.png" width="200" height="250"></a></p><p class="frame2"><a href="#"><img src="img/b.png" width="200" height="250"></a></p><p class="frame2"><a href="#"><img src="img/c.png" width="190" height="250"></a></p><p class="frame2"><a href="#"><img src="img/d.png" width="200" height="250"></a></p>';

var boxheight=250; // BOX HEIGHT IN PIXELS.
var boxwidth=220; // BOX WIDTH IN PIXELS.
var boxcolor="#FFF6e9"; // BACKGROUND BOX COLOR.
var speed=30; // SPEED OF SCROLL IN MILLISECONDS (1 SECOND=1000 MILLISECONDS)..
var pixelstep=2; // PIXELS "STEPS" PER REPITITION.
var godown=false; // TOP TO BOTTOM=TRUE , BOTTOM TO TOP=FALSE

// DO NOT EDIT BEYOND THIS POINT

var txt='', outer, inner, ref, elementheight, mouseisover;
txt+='<div id="ref" style="position:relative; width:'+boxwidth+'px; height:'+boxheight+'px; background-color:'+boxcolor+';" ></div>';
txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'px; height:'+boxheight+'px; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
txt+='<div id="inner" style="position:absolute; visibility:hidden; left:2px; top:2px; width:'+(boxwidth-4)+'px; overflow:hidden; cursor:default;">'+content+'</div>';
txt+='</div>';
document.write(txt);

function getElHeight(el){
return (el.style.height)? parseInt(el.style.height):parseInt(el.offsetHeight);
}

function getPageLeft(el){
var x;
x = 0;
while(el.offsetParent!=null){
x+=el.offsetLeft;
el=el.offsetParent;
}
x+=el.offsetLeft;
return x;
}

function getPageTop(el){
var y;
y=0;
while(el.offsetParent!=null){
y+=el.offsetTop;
el=el.offsetParent;
}
y+=el.offsetTop;
return y;
}

function scrollbox(){
if(mouseisover){return;}
inner.style.top=parseInt(inner.style.top)+((godown)? pixelstep: -pixelstep)+'px';
if(godown){
if(parseInt(inner.style.top)>boxheight)inner.style.top=-elementheight+'px';
}else{
if(parseInt(inner.style.top)<2-elementheight)inner.style.top=boxheight+2+'px';
}}

window.addEventListener('resize', function(){
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
}, false);

window.addEventListener('load', function(){
outer=document.getElementById('outer');
outer.addEventListener('mouseover', function(){mouseisover = true;}, false);
outer.addEventListener('mouseout', function(){mouseisover = false;}, false);
inner=document.getElementById('inner');
ref=document.getElementById('ref');
elementheight=getElHeight(inner);
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
inner.style.top=((godown)? -elementheight : boxheight)+'px';
inner.style.clip='rect(0px, '+(boxwidth-4)+'px, '+(elementheight)+'px, 0px)';
outer.style.visibility=inner.style.visibility="visible";
setInterval(scrollbox,speed);
}, false);
})();
</script>

OzWaz
05-22-2017, 03:02 AM
I already feel guilty in absorbing so much of your time on what is just a hobby for me - BUT check the Goofy Google page and you will see the otcome I got with the new code

Dreamweaver is saying there is a syntax errro on line 40 BUT I have found it does always know best.

Regards

jscheuer1
05-22-2017, 04:22 AM
You somehow have the txt variable messed up again like before:


var txt='', outer, inner, ref, elementheight, mouseisover;
txt+='<div id="ref" style="position:relative; width:'+boxwidth+'px;
txt+height:'+boxheight+'px; background-color:'+boxcolor+';" ></div>';
txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'px;
txt+height:'+boxheight+'px; visibility:hidden;
txt+background-color:'+boxcolor+'; overflow:hidden" >'; ='<div
txt+id="inner" style="position:absolute; visibility:hidden; left:2px;
txt+top:2px; width:'+(boxwidth-4)+'px; overflow:hidden;
txt+cursor:default;">'+content+'</div>';
txt+='</div>';
document.write(txt);

should be:


var txt='', outer, inner, inner2, ref, elementheight, mouseisover;
txt+='<div id="ref" style="position:relative; width:'+boxwidth+'px; height:'+boxheight+'px; background-color:'+boxcolor+';" ></div>';
txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'px; height:'+boxheight+'px; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
txt+='<div id="inner" style="position:absolute; visibility:hidden; left:2px; top:2px; width:'+(boxwidth-4)+'px; overflow:hidden; cursor:default;">'+content+'</div>';
txt+='</div>';
document.write(txt);

OzWaz
05-22-2017, 07:51 AM
Really strange just did a C&P from the earlier email and looking back there was no"inner2" (line 40) in that code [See the earlier post]

But in any event have pasted and uploaded the latest block of code but still get the same result - Really weird!

jscheuer1
05-22-2017, 05:26 PM
That's the problem then I think, or at least part of it. Email assumes everything is text, it sometimes wraps, and sometimes sees things as quotes, then takes liberties with how it formats it for you on your end. That's almost certainly what messed up the code. You need to copy from the forum, not from the email it sends you.

That extra variable (inner2) is from a new version I have that has continuous scrolling with no gaps between the ending entry and first entry. It just slipped in because I was copying from a working version that had that in it already.

If you're interested in the latest code (come copy it from the forum, not from the email you get about it):


<script>
/* Vertical Scroller v2.0 by Brian of www.ScriptAsylum.com
& jscheuer1 from Dynamic Drive Forums. Visit JavaScript
Kit (http://javascriptkit.com) for original script (v1.2)
or http://www.dynamicdrive.com/forums for support. */

/* ENTER CONTENT TO SCROLL after {var content = '} BELOW */
(function(){
var content = '<p>Visit <a href="http://www.javascriptkit.com">JavaScript Kit</a> for JavaScript tutorials and over 400 free scripts</p><p><a href="http://freewarejava.com">Freewarejava.com</a>- direct links to Java applets and resources</p><p>Stay up to date on current news and events. Visit <a href="http://www.msnbc.com">MSNBC.com</a></p><p><a href="http://www.dynamicdrive.com">Dynamic Drive</a> is your definitive source for DHTML scripts and components.</p>';

var boxheight = 250; // BOX HEIGHT IN PIXELS.
var boxwidth = 220; // BOX WIDTH IN PIXELS.
var boxcolor = '#fff6e9'; // BACKGROUND BOX COLOR.
var speed = 20; // SPEED OF SCROLL IN MILLISECONDS (1 SECOND=1000 MILLISECONDS).
var pixelstep = 1; // PIXELS "STEPS" PER REPITITION.
var godown = false; // TOP TO BOTTOM=TRUE , BOTTOM TO TOP=FALSE

// NO NEED TO EDIT BEYOND THIS POINT (edit with care, if you like, can, or dare)

var outer, inner, inner2, elementheight, mouseisover, html =
['<div id="outer" style="position:relative;width:',
boxwidth,'px;height:',boxheight,'px;background-color:',boxcolor,
';overflow:hidden"><div id="inner" style="position:absolute;visibility:hidden;left:6px;width:',
boxwidth - 18,'px;">',content,'</div></div>'];
document.write(html.join(''));

function scrollbox(){
if(mouseisover){return;}
inner.style.top = parseInt(inner.style.top) + (godown? pixelstep: -pixelstep) + 'px';
inner2.style.top = parseInt(inner2.style.top) + (godown? pixelstep: -pixelstep) + 'px';
if(godown){
if(parseInt(inner.style.top) > boxheight){inner.style.top = -2 * elementheight + boxheight + 'px';}
if(parseInt(inner2.style.top) > boxheight){inner2.style.top = -2 * elementheight + boxheight + 'px';}
} else {
if(parseInt(inner.style.top) < -elementheight){inner.style.top = elementheight + 'px';}
if(parseInt(inner2.style.top) < -elementheight){inner2.style.top = elementheight + 'px';}
}
}

inner = document.getElementById('inner');
outer = document.getElementById('outer');
outer.addEventListener('mouseover', function(){mouseisover = true;}, false);
outer.addEventListener('mouseout', function(){mouseisover = false;}, false);
inner2 = inner.cloneNode(true);
inner2.removeAttribute('id');
outer.appendChild(inner2);

function loadit(){
elementheight = inner.offsetHeight - 18;
inner.style.top = (godown? -elementheight : boxheight) + 'px';
inner2.style.top = (godown? -2 * elementheight: boxheight + elementheight) + 'px';
inner.style.visibility = inner2.style.visibility = 'visible';
setInterval(scrollbox, speed);
}

if(inner.getElementsByTagName('img').length){window.addEventListener('load', loadit, false);}
else {loadit();}
})();
</script>

jscheuer1
05-22-2017, 06:03 PM
Here's a demo of the latest code, using your content and styles:

http://john.dynamicdrive.com/demos/tidbits/jkitscroller-h5a.htm

OzWaz
05-23-2017, 01:29 AM
Thank you that's excellent can now build into my website to scroll content

Really appreciate your efforts - don't know how I can repay you? Unless perhaps you have a problem with gardening

Regards

Warren

jscheuer1
05-23-2017, 04:21 AM
Love gardening. What did you have in mind?

OzWaz
05-25-2017, 01:08 AM
Fruit and veg mainly but roses are so hardy they are inspirational.

Has to be in a controlled environment though given the new manic climate conditions.

Shade for summer + reliable water supply - nothing else except “time’ of course – lots of that.

Regards