February 19th, 2006, 05:44 AM
|
 |
Moderator From Beyond
|
|
Join Date: Sep 2004
Location: Israel
|
|
JavaScript: Horizontal Text Scroller
The below code would show "horizontal text scroller" i.e. the text
will "scroll" letter by letter.
Code:
<html>
<head>
<title>Horizontal Scroller Example</title>
<script type="text/javascript">
window.onload = WindowLoad;
var _hsSpeed=250; //lower value means faster speed!
var _hsData=new Array();
var _hsCounter=0;
function WindowLoad(event) {
InitializeHorizontalScroll();
}
function InitializeHorizontalScroll() {
var arrElements = document.getElementsByTagName("span");
for (var i=0; i<arrElements.length; i++) {
var element=arrElements[i];
if (element.getAttribute("horizontalscroll") == "1") {
_hsData[_hsCounter] = new Array();
_hsData[_hsCounter]["element"] = element;
_hsData[_hsCounter]["text"] = FindInnerText(element);
_hsData[_hsCounter]["index"] = 0;
_hsCounter++;
}
}
if (_hsCounter > 0)
window.setTimeout("HorizontalScrollTimer();", 10);
}
function HorizontalScrollTimer() {
for (var i=0; i<_hsData.length; i++) {
var element = _hsData[i]["element"];
var strText = _hsData[i]["text"];
var index = parseInt(_hsData[i]["index"]);
element.innerHTML = strText.substr(0, index+1);
index++;
if (index >= strText.length)
index = 0;
_hsData[i]["index"] = index;
}
window.setTimeout("HorizontalScrollTimer();", _hsSpeed);
}
function FindInnerText(objControl, innerText, nestingLevel)
{
if ((typeof nestingLevel != "undefined")&&(nestingLevel > 100))
return innerText;
if (typeof innerText == "undefined")
innerText = "";
if (!objControl)
return innerText;
if (typeof nestingLevel == "undefined")
nestingLevel = 0;
var text=objControl.nodeValue;
if (!text)
text = "";
if (objControl.nodeName.toLowerCase() == "br")
return "\n";
for (var i=0; i<objControl.childNodes.length; i++)
{
text += FindInnerText(objControl.childNodes[i], objControl.childNodes[i].nodeValue, nestingLevel+1);
}
return text;
}
</script>
</head>
<body>
<span horizontalscroll="1">hello world</span>
</body>
</html>
how to use? just follow those instructions: - have the javascript code as-is: you can also put it inside
seperate js file and include the file using <script src="file.js"> - in case you already have onload of your own, just add this
line to the onload function:
Code:
InitializeHorizontalScroll()
in case you have the onload inside the body tag change this
to something like:
Code:
<body onload="InitializeHorizontalScroll(); whatever_was_before();">
- to have scrolling text, put it inside its own span and give the
span horizontalscroll="1" attribute like in the above sample code.
note: to change the style of the text you must use CSS and
change the style of the span itself, no inner style like <b> or
<font> is allowed. for example to have the text bold:
Code:
<span horizontalscroll="1" style="font-weight: bold;">hello world</span>
additional notes: - you can have more than one scrolling text in the same page.
just put each in its own <span horizontalscroll="1"> tag... - you can control the speed of the scrolling: change the value
of _hsSpeed to change the speed in which the letters appear.
lower number means faster scroll.
any comments or questions are welcome, happy programming! 
Last edited by Shadow Wizard : February 19th, 2006 at 05:50 AM.
|
ASP Free Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
