Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Scrolling Text

Status
Not open for further replies.

dontpunchme

Programmer
Jul 29, 2002
20
US
Hi,

I have a current scroller script shown here:


The script contains has items in an array that it cycles through and scrolls up the page (within a box):

singletext[0]='<div align="left" STYLE="color:green"><a href="#">30 yr</a> fixed</div>'
singletext[1]='<div align="left" STYLE="color:green"><a href="#">15 yr</a> fixed</div>'

When it the script runs, it dispays the contents from the first array "30 Year fixed" in a window that is approx three lines high. Before the next item in the array displays, the script waits for the firt item to completely exit the window. So.. there is a delay in seeing the next item.

I am trying to make it dislay where the items show up one after another, and after it gets to the end, it re-displays the first item without a space.

Example:

30 year fixed
15 year fixed
5 year fixed
3 year arm

Like I said above, when the 30 year fixed scrolls past the top of the window, I would like it to be moved to the end of the list (without a gap).

Example.

15 year fixed
5 year fixed
3 year ARM
10 year fixed

Please see this URL for an example of where I am currently at with the script:


BTW, the scroll speed also seems to speed up while leaving the window. Not sure why.

Thanks for your help. Sorry I am clueless.

Mike
 

Do you still need the solution to run in NN4?

Dan




The answers you get are only as good as the information you give!

 
Nope. You can drop NN4 if that makes the solution easier.
 
Hmm...

After looking over the script, I don't think it would be a quick job to get items to display one after the other with no space.

It might be easier to get a new scroller script, rather than edit this one - have you tried Dynamcic Drive (
That aside, here's a quick re-work of the script you do have, to make it (IMHO) a lot nicer. It works in IE6, FF1, Opera7, and NN7 - and is a lot less code.

Code:
<html>
<head>
	<script type="text/javascript">
	<!--
		//slider's width
		var swidth = 350;

		//slider's height
		var sheight = 40;

		//slider's speed
		var sspeed = 2;

		//messages: change to your own; use as many as you'd like; set up Hyperlinks to URLs as you normally do: <a target=... href="... URL ...">..message..</a>
		var singletext = new Array();
		singletext[0]='<div align="left" style="color:green"><a href="#">30 yr</a> fixed</div>'
		singletext[1]='<div align="left" style="color:green"><a href="#">15 yr</a> fixed</div>'
		singletext[2]='<div align="left" style="color:green"><a href="#">5 yr</a> fixed</div>'
		singletext[3]='<div align="left" style="color:green"><a href="#">5 yr</a> ARM</div>'
		singletext[4]='<div align="left" style="color:green"><a href="#">3 yr</a> ARM</div>'
		singletext[5]='<div align="left" style="color:green"><a href="#">1 yr</a> ARM</div>'

		i = (singletext.length>1) ? 1 : 0;

		function start(sliderName) {
			document.getElementById(sliderName).style.top = sheight + 'px';
			marquee(sliderName);
		}

		function marquee(whichDiv) {
			var theDiv = document.getElementById(whichDiv);

			if (parseInt(theDiv.style.top, 10) > 0 && parseInt(theDiv.style.top, 10) <= sspeed) {
				theDiv.style.top = '0px';
				setTimeout('marquee(\'' + whichDiv + '\');', 100);
			}

			if (parseInt(theDiv.style.top, 10) >= sheight*-1) {
				theDiv.style.top = (parseInt(theDiv.style.top, 10) - sspeed) + 'px';
				setTimeout('marquee(\'' + whichDiv + '\');', 100);
			} else {
				theDiv.style.top = sheight + 'px';
				theDiv.innerHTML = singletext[i];
				if (i++ == singletext.length - 1) i = 0;
			}
		}
	//-->
	</script>
</head>

<body onload="start('slider1')">
	<div align="center">
		<span style="border-width:1px; border-color:black; width:350px; height:72px; background:white;">
			<script type="text/javascript">
			<!--
				document.writeln('<div style="position:relative; overflow:hidden; width:' + swidth + 'px; height:' + sheight + 'px; clip:rect(0px ' + swidth + 'px ' + sheight + 'px 0px); border:1px solid #000000;" onmouseover="sspeed = 2;" onmouseout="sspeed = 2;">');
				document.writeln('<div id="slider1" style="position:relative; width:' + swidth + 'px;">');
				document.write(singletext[0]);
				document.writeln('</div></div>');
			//-->
			</script>
		</span>
	</div>
</body>
</html>

Hope this helps,
Dan


The answers you get are only as good as the information you give!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top