Javascript: a simple horizontal scroller


Now let's see a simple scroller. Well, it isn't a real scroller, but I think it's better than a scroller. Click here, then press the back button to come back here: scroller

This is the HTML page:

<html><head><title> JavaScript scroller</title>
<SCRIPT language="JavaScript">

<!-- // Please, feel free to copy, paste and use this script...
// This script was written by Wowarea: <http://www.wowarea.com>
// Begin the script!
// variables

var max=0;
textlength=455;

// array object

tl=new array1
(
// 1 2 3 4 5 6
// "123456789+123456789+123456789+123456789+123456789+123456789+1234",

"Hello! As you can see, I'm showing you a nice script here...",
"This script is a kind of horizontal scroller!",
"In other words, text scrolls inside of this input field.",
"You could use it just for your amusement or even for ads,",
"(instead of banners for example).",
"Ok, I stop here...well...I don't want to bother you now... ;)",
"
Enjoy!
",
"Oh, I was forgetting: you can't stop this scroller!!!",
"Pssst...just go back to previous page... ;) "

);

Ok, let's see how does it works

As you already know, 'max' and 'textlength' are variables (black boxes which contain any thing you want to put inside of them). So, let's talk about this object:

tl=new array1
(
// 1 2 3 4 5 6
// "123456789+123456789+123456789+123456789+123456789+123456789+1234",

"Hello! As you can see, I'm showing you a nice script here...",
"This script is a kind of horizontal scroller!",
"In other words, text scrolls inside of this input field.",
"You could use it just for your amusement or even for ads,",
"(instead of banners for example).",
"Ok, I stop here...well...I don't want to bother you now... ;)",
"
Enjoy!
",
"Oh, I was forgetting: you can't stop this scroller!!!",
"Pssst...just go back to previous page... ;) "

);

function array1()

{

max=array1.arguments.length;
for (i=0; i<max; i++)
this[i]=array1.arguments[i];

}

var x=pos=pos2=0;
var len=tl[0].length;

function horiz_scroller() {

if (pos2==0) {

document.form1.text1.value="";
alert("Click here to start!");
pos2=0;

}

document.form1.text1.value=tl[x].substring(0,pos)+"_";
if (pos2==textlength) setTimeout("nothing()", 1);
if(pos++==len) {

pos=0;
setTimeout("horiz_scroller()",100);
x++;
if(x==max) x=0;
len=tl[x].length;

}

else

setTimeout("horiz_scroller()",40);
pos2++;

}

function nothing() {alert("BYE!!!"); pos2=0};

// End -->
</SCRIPT></head>

<body bgcolor="#000000" text="#ffffff" onload="horiz_scroller()">
<br><br><br><br><br><br>
<form name="form1"><center>
<input type="text" name="text1" size=64></center>
</form>
</body>
</html>

How it works:

By means of the 'new' operator, you are defining an object. So, tl= new array1() means: tl is a new instance of the object named array1. You can build your own object or you can use a built-in Javascript object. In order to define your own object, you have to use a function, by means of which, you can define features of that object. Than you have to use the 'new' operator. You can also supply parameters to your function. In the above example, you are defining a new instance of 'array1' object, and you are supplying these parameters:

(
// 1 2 3 4 5 6
// "123456789+123456789+123456789+123456789+123456789+123456789+1234",
"Hello! As you can see, I'm showing you a nice script here...",
"This script is a kind of horizontal scroller!",
"In other words, text scrolls inside of this input field.",
"You could use it just for your amusement or even for advs,",
"(instead of banners for example).",
"Ok, I stop here...well...I don't want to bother you now... ;)",
"
Enjoy!
",
"Oh, I was forgetting: you can't stop this scroller!!!",
"Pssst...just go back to previous page... ;) "

);

Remember: // means comment, so your browser will ignore first two lines. So parameters start from 'Hello'. All things enclosed between parentheses are parameters.

function array1()

{

max=array1.arguments.length;
for (i=0; i<max; i++)
this[i]=array1.arguments[i];

}

The above statements describe your object. Arguments.length is a property of array1, and it is helpful to determine the number of arguments passed to the function. In this case the value of that property is a variable value. In other words, the max value depends on the number of supplied parameters. The for loop (you already know loops, right?) 'builds' the object features. 'This' is a keyword used to define the current object (array1).

These are other variables:

var x=pos=pos2=0;
var len=tl[0].length;

'Length' returns the number of a string's elements.

tl[x].substring(0,pos)+"_"

In the above statement, the keyword substring means: 'take the piece of string starting from 0 and ending to 'pos', then add "_".

setTimeout

You have to use the above statement, to let the browser take a break! If you don't use it, your page's visitors will be able to do NOTHING until the script ends. Well, they could press ctrl-alt-del keys, sure...

Ok, the most obscure things are clear now! (I hope so).

Well, I have not explained all the script, because I think it's easier doing that understanding...So, try it and change something here and there...Good luck!


Index           Home  Back       About  Contact us!

Copyright (c) 1998-2006 Wowarea