Copy and Paste Vertical Scroller

[OzWaz]

I have copied and pasted the code from this website(http://www.javascriptkit.com/script/...scroller.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]

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]

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]

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]

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

Thanks

[jscheuer1]

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]

Okay I have it working now

Thanks for all your assistance

Warren

[jscheuer1]

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]

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]

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>