Scrollable Content III

Window 1

Window 4

Controls aligned left here.

- DHTML is the combination of HTML, JavaScript, and CSS

- DOM stands for Document Object Model

- DHTML allows content on a page to change on the fly, without reloading the page

- CSS allows for the separation between content definition and formatting

- CSS stands for Cascading style sheet

- Dynamic Drive provides free, cut and paste DHTML scripts

Ooh boy! Scrollable content within scrollable content :)

Window 2

This window has page up/down controls.

- DHTML is the combination of HTML, JavaScript, and CSS

- DOM stands for Document Object Model

- DHTML allows content on a page to change on the fly, without reloading the page

- CSS allows for the separation between content definition and formatting

- CSS stands for Cascading style sheet

- Dynamic Drive provides free, cut and paste DHTML scripts

Window 3

This window has pageup/down, scroll, and play controls.

- DHTML is the combination of HTML, JavaScript, and CSS

- DOM stands for Document Object Model

- DHTML allows content on a page to change on the fly, without reloading the page

- CSS allows for the separation between content definition and formatting

- CSS stands for Cascading style sheet

- Dynamic Drive provides free, cut and paste DHTML scripts

Scrollable Content
Modified version of the Dynamic Drive 'Scrollable Content II'.

Simplifies adding a content window to a page plus adds the ability to easily have multiple content windows on one page and also adds the option for pgup/pgdn and play/stop/reverse controls.
I've only tested it on FF 2, IE6, and Opera 9 (anyone with another browser or version who has it working, please let me know =] )

Basic usage:
Below is a basic example, you will need scrollablecontent.js and scw.css
And thise images (Or create your own, or if you leave them out of the makecontrols() call it will make a text version)

See the scw.html example for more options.

It is up to you to place the window and it's controls on the page.

In your <head>

<link rel="stylesheet" type="text/css" href="scw.css" />
<script type="text/javascript" src="scrollablecontent.js"></script>
<script type="text/javascript">
scw1 = new SCWindow("scw1",300,200); The first argument must match the variable name, then window width and height
scw2 = new SCWindow("scw2",100,200);
</script>

In the <body>

<script type="text/javascript">scw1.startblock()</script>

Some content...

<script type="text/javascript">scw1.endblock()</script>
<script type="text/javascript">scw1.makecontrols("upb.gif","downb.gif")</script>

<script type="text/javascript">scw2.startblock()</script>

Some content...

<script type="text/javascript">scw2.endblock()</script>
<script type="text/javascript">scw2.makecontrols("upb.gif","downb.gif")</script>

<script type="text/javascript">
function start(){
If you have any other scripts that assign a window.onload function, remove that line of code and put the function call here.
scw1.initialize()
scw2.initialize()
}
window.onload=start
</script>