Creating a vertical
content scroller using DHTML

In this tutorial, I'll show you how to create a vertical
content scroller using DHTML. A content scroller is a little different from
traditional JavaScript scrollers in that the content to scroll is simply
regular HTML on the page. The advantage of this is obvioius- ease of
customization, and also, search engine friendly. Below's a demonstration of
what I'll be building:

Example:

Dynamic PHP Picture ViewerThis script combines PHP with JavaScript to let you easily display all
pictures within a directory without having to input their file names into the
script! An external PHP file takes care of all the manual labour, by retrieving
the list of images inside the directory and passing it onto the viewer script.
Spiffy!

External JavaScript and PHP
External JavaScript can reference not just .js files, but PHP scripts as well.
See how this is done, and the wonderful possibilities linking PHP to JavaScript
bring.

Changing
Select element content on the fly
This tutorial explains how to change a select element's content using
JavaScript, from adding new options to modifying and deleting them. It also
shows how to create a 2 level interdependent select list.

The
HTML

Lets first see the CSS and HTML that make up the foundation
of the scroller, before seeing the script itself:

Here I define an outer DIV (ID="marqueecontainer") and set
its position to "relative" inside the CSS. A relative positioned element
defines a new coordinates system for anything contained inside, with the
upper left corner of the element being (0, 0). This makes it easy to then
define an absolutely positioned DIV (ID="vmarquee"), and scroll
it upwards relative to the outer DIV.

With the basic framework of the scroller created, lets now
see the script that will scroll the DIV (ID="vmarquee") upwards to create a
vertical content scroller.