Basic Ticker

We will be showing the complete code for the ticker and then we will explain the code

<div id= 'myTicker' style='background-color:orange;font-family:calibri;max-width:450px;font-size:25px;'>
<script type='text/javascript'>
var current = 0;
function scroll_it(){

var note = 'Hello everyOne....!!! This is a basic ticker made using Javascript.';
var defaultStatus = '';
if (current==note.length){
  current = 0;
else {


if (current>30){
var current1 = current - 30;
defaultStatus = note.substr(current1, current);
else {
var endPoint = 30 - current;
defaultStatus = note.substr(note.length - endPoint , note.length) + note.substr(0, current);
document.getElementById('myTicker').innerHTML = defaultStatus;

setTimeout('scroll_it()', 100);
<script type='text/javascript'>


The code above starts with defining a div called myTicker. It then defines the main function called scroll_it(). The note present in the function is the actual message which is scrolled in the div. note.length calculates the length of the message. For the scroller, we want only a part of this message to be shown on the screen. So, we take a starting position and a length which is 30 here i.e. only part of message between starting point and +30th position is displayed on the screen.

So, if there are not 30 characters after the starting position , we take the remaining message from the beginning and display it on the screen. The function makes an automatic call to itself every 100 ms and each time a new character is changed. This makes a feeling of a moving ticker. Here is a demo of the code

Lets have a look at some other Jscript applications now.

Member Login

Member Login

Not a Member? Sign Up!

Login to comment

Be the first to comment on this topic


<<< Wanna review

Continue >>>