Copy and Paste Vertical Scroller

[OzWaz]

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]

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]

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]

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]

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]

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]

Here's a demo of the latest code, using your content and styles:

http://john.dynamicdrive.com/demos/t...roller-h5a.htm

[OzWaz]

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]

Love gardening. What did you have in mind?

[OzWaz]

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