« »

Another script to create a auto scrolling message which move depend on scrollbars.

Label: AutoScroll DIV script

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<script type="text/javascript">
	
	var useWidth = "400px";
	var speed = 250 // greater is slower;

	var message = "Now is the time for all good men to come to the aid of their country. That's one small step for man, one giant leap for mankind. Ask not what your country can do for you, ask what you can do for your country. | ";

	// Remember to include the vertical bar | at the end of the message(s);

	var mContainer = "";
	var circleMsg = "";
	var prevMsg =  "";
	var useFloat = "";
	var xV = 0;
	var xL = 0;
	var msgLength = 0;
	
	function updateMessage(){
		
		if (circleMsg == ""){circleMsg = mContainer.lastChild.data}
		else {circleMsg = prevMsg}
		var separatorIdx = circleMsg.lastIndexOf('|');
		if (separatorIdx == -1){separatorIdx = msgLength}
		circleMsg = circleMsg.substring(1,separatorIdx);
		var spliceStr = message.substring(0,msgLength-separatorIdx-1);
		var dispMsg = circleMsg+spliceStr;
		mContainer.removeChild(mContainer.lastChild);
		mContainer.appendChild(document.createTextNode(dispMsg));
		prevMsg = circleMsg+'|'+spliceStr;
		setTimeout("updateMessage()",speed);
	}

	function startCrawl(){

		mContainer.appendChild(document.createTextNode(message))
		setTimeout("updateMessage()",3000);  // delay before crawl start;
	}

	function stayHome(){

		var nV = 0;
		var nL = 0;
		if(!document.body.scrollTop)
			{
			 nV = document.documentElement.scrollTop;
			 nL = document.documentElement.scrollLeft;
			}
		else	{
			 nV = document.body.scrollTop;
			 nL = document.body.scrollLeft;
			}
		if (nV == 0){window.scrollBy(0,1)}
		useFloat.style.top = nV+xV+"px";
		useFloat.style.left = nL+xL+"px";
		setTimeout("stayHome()",50);
	}

	window.onload=function(){

		mContainer = document.getElementById('crawl');
		document.getElementById('isFloat').style.width = useWidth;
		msgLength = message.length;
		useFloat = document.getElementById('isFloat');
		useFloat.style.left = ((screen.width-30)/2)-(parseInt(useWidth)/2)+"px";
		xV = useFloat.offsetTop;
		xL = useFloat.offsetLeft;
		stayHome();
		startCrawl();
	}

</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<Div id='isFloat' style='position:absolute;bottom:20px;overflow:hidden;height:28px;border:solid black 1px;font-size:14pt;background-color:lightyellow;color:darkblue'>

<Div id='crawl' style='padding:3px;white-space:nowrap'></Div>

</Div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->