Blog / Home
About
Media Gallery

Welcome
to
Thronic.com

ժʝ_

JavaScript Text Scrolling


A small function in JavaScript I wrote for text or other objects scrolling for webpages. View the source to copy and adapt JavaScript and CSS source.

Hi, this is text that should scroll. And it has a link in it.
Start Stop

#ScrollText Width Debugger: (Press start).

Stop the scroller when the text has passed, to find out what width you should use.
Put the value in the CSS #ScrollText width property, without the minus-sign.

E.g. if you stop it at -500, the #ScrollText width should be set to 500px.
This will make the scroller know when the text is done scrolling and set it's
left property to #ScrollBar offsetWidth for new scrolling.

JavaScript
/*
	Call ScrollEngine() whenever you want to start the scroller. 
	E.g. in body onload="" for starting automatically. Use the 
	global variable ScrollEngineOn to stop it by setting it to 
	false.
	
	Experiment and adapt or add code to fit your needs.
*/
var ScrollEngineOn = true;
var isRunning = false;

function Start() {
	if (isRunning) {
		return;
	} else {
		isRunning = true;
		ScrollEngine();
	}
}

function ScrollEngine() {
	var s_bar = document.getElementById('ScrollBar');
	var s_txt = document.getElementById('ScrollText');
	var s_bar_w = parseInt(s_bar.offsetWidth);
	var s_txt_w = parseInt(s_txt.offsetWidth);
	s_txt_l = parseInt(s_txt.style.left.replace(/px/i,''));

	s_txt_l = (s_txt_l < s_txt_w-(s_txt_w*2)?s_bar_w:--s_txt_l);
	s_txt.style.left = s_txt_l+'px';
	
	//debug
	document.getElementById('debug').innerHTML = s_txt_l;

	if (ScrollEngineOn)
		setTimeout('ScrollEngine('+ s_txt_l +')',15);
}



Original Post: Jan 26th, '22 19:44 CET.
Updated: Jan 26th, '22 19:52 CET.

JS
π