Basic Ticker

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

<html>
<head>
<div id= 'myTicker' style='background-color:orange;font-family:calibri;max-width:450px;font-size:25px;'>
</div>
<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 {
 current++;  

}

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>
</head>
<body>
<script type='text/javascript'>
scroll_it();
</script>

</body>
</html>

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