AutoScroll DIV script

[JavaScriptBank]

Another script to create a auto scrolling message which move depend on scrollbars.... detail at JavaScriptBank.com - 2.000+ free JavaScript codes

Demo: JavaScript AutoScroll DIV script
​

How to setup

Step 1: Use JavaScript code below to setup the script
JavaScript

<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
	-->

Step 2: Copy & Paste HTML code below in your BODY section
HTML

<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
	-->

Javascript Music Player - Random Text Generator - Floating Image Script​