Works in: Internet Explorer 4+; Netscape Navigator 4+

The space available to the user interface of software is limited and valuable. You can build software applications that can do everything from balance your checkbook to manage your enterprise, but if the user interface does not use its available space intelligently, the application can be difficult or impossible to use.

By limiting the number of items you display to the user at one time, you can ensure that the user is not overwhelmed with options and prevent the page from becoming cluttered. You can take a cue from Hollywood for a way to display a lot of information clearly. The closing credits at the end of movies do a good job of presenting a lot of information in an easy to read fashion (except that they scroll by too fast when you try to read the name of a particular actor).

You can build a Web page that displays information in a scrolling format, similar to the closing credits of your favorite movie. This "scroller" is written in JavaScript and will work in either Netscape Navigator 4+ or Internet Explorer 4+. You can take the code in this sample and use it in your own applications to add a cool and intelligent effect.

There are many important aspects of the code that make up this page, but for the sake of simplicity, I will only discuss the most important ones. Let's start with the location of the scroller on the page. This example uses hard-coded values to define the X(left) and the Y(top) position of the scroller on the Web page. In this case, it will show up at 15 units to the left and 25 units from the top of the upper-left corner of the page:

var ScrollerLeft = 15;
var ScrollerTop = 25;

Other important hard-coded values enable you to set the speed of the scrolling and the amount of time each item in the scrolling list will pause for the user to click it. Each time the scroller moves, it does so in a series of steps. The steps occur in succession to produce a smooth a scrolling effect.

The variable ScrollStepSpeed controls the speed of the steps taken by the scrolling. ScrollStepSize controls the size of each step. DisplayInterval controls the amount of time that each link will pause and display itself to the user. ScrollCycleCount determines the number of times the list will cycle past the user.

var ScrollStepSpeed = 35;
var ScrollStepSize = 2;
var DisplayInterval = 2500;
var ScrollCycleCount = 8;

You include data in the scrolling list via two arrays. The first array, ScrollItemText, holds the text that will be displayed to the user. The second array, ScrollItemURL, holds the URL that is the target of each link.

This scroller will work in either IE or Netscape because the JavaScript will determine which browser is being used and will then build either a set of <DIV> tags, if IE, or a set of <LAYER>s, if Netscape.

To determine the browser, first get a reference to both the Netscape Navigator document.layers object and to the Internet Explorer document.all object:

var NN4=(document.layers);
var IE4=(document.all);

If IE4 is used, the appropriate variable will hold a valid reference to the document.all object, but the NN4 variable will not hold a valid reference. If Netscape Navigator is used, the NN4 variable will hold a valid reference to the document.layers object but the IE4 variable will not hold a valid reference. You can determine which browser is used through a simple "if" statement:

if(NN4)
{}
else
{}

To make the scrolling motion possible, you decrease the value of the property that controls the top position of the <DIV> or the <LAYER>. You first get a reference to the appropriate container (a <DIV> or a <LAYER>). You call the variable that holds the reference ScrollItemContainerTo. Next, you decrease either the pixelTop property or the top property, depending on the browser used.

if(NN4)
{
	// OTHER STUFF HERE
	ScrollItemContainerTo.top-=ScrollStepSize;
	// OTHER STUFF HERE
}
else
{
	// OTHER STUFF HERE
	ScrollItemContainerTo.pixelTop-=ScrollStepSize;
	// OTHER STUFF HERE
}

The continual decreasing of the top or pixelTop property produces the scrolling effect. The sample contains much more code. Study it to learn more about how it works, or just copy and paste the code into your own Web pages.

Click here for sample