Scrolling Messages in Status Bar


© Muhammad Ali Shah
Articles in this Topic    Discussions in this Topic



Abstract

Today we are going to display scrolling messages in the status bar. This requires a few concepts: Functions, Conditions, Strings, Events and Objects. If you are following my articles, then you already know this, right? By the way, read the Flash Back if you are not sure about these. I'll explain the new things as I go along.


Flash Back

OK! Lets review what we know:


Ground Work

We shall start with a simple skeleton application, which display a hello message in the status bar when loaded. I am explaining this first because I have a few things in my mind. First, note that the following code uses an onLoad() event in the <body> tag. This event occurs (only once) whenever a web page is loaded. We can call our functions when this event occurs. Secondly note that we can display text in status bar using window.status = someTextToDisplay.

<html>
<head>
<title>Status Bar Scrolling</title>

<script langauge="JavaScript">
<!-- Hiding
var message = "I am a message in the status bar!";
function scroll ()
  {
  window.status = message;
  }
// done -->
</script>
</head>

<body onLoad="scroll()">
</body>
</html>

Moving Ahead

Now, lets see how scrolling occurs: We repeatedly show strings in the status bar and keep moving right one character at a time. To achieve this we can use the substring() method of the string object. In our last example, message was a string. We can display a part of this string in the status bar by using the following construct: window.status = message.substring (2, 5). Doing this will display 5 characters of the message string starting from 2nd character (which becomes " am a"). In this way, we can repeatedly display the substring starting from one character ahead.

Now the problem is how to call a function repeatedly. One thing that comes to our mind is the for loop; but that won't work here. The reason is that a for loop can execute a set of statements multiple times when called, but not forever. On the other hand, we need a scrolling function, that scrolls forever. To tell you the proper way: there is built-in function just for repeatedly calling a function of yours. We can use setTimeout() to make the browser call our function at fixed time intervals. For example, if we want that our scrolling function should be called every time after 5 milliseconds, we can say: setTimeout ("scrol()", 5). I hope things are clear now. Following code will explain everything.

Go To Page: 1 2


Post this Article to facebook Add this Article to del.icio.us! Digg this Article furl this Article Add this Article to Reddit Add this Article to Technorati Add this Article to Newsvine Add this Article to Windows Live Add this Article to Yahoo Add this Article to StumbleUpon Add this Article to BlinkLists Add this Article to Spurl Add this Article to Google Add this Article to Ask Add this Article to Squidoo