next

This lesson is about Visibility.

There are 5 divs on this page

All occupying the same space.

next

Though only one at a time is visible.

The other 4 are hidden

next

When we declare the div in the style tag we include the visibility option.

#div1 {position:absolute; top: 30; left: 20;visibility:visible}
#div2 {position:absolute; top: 30; left: 20;visibility:hidden}

We have also included a placement() function that places and hides the divs. An onLoad="placement()" initiates it. This allows older classics to view it properly while not affecting newer units.

next

as you click from one to the other, the current one becomes invisible while revealing the next one.

This is done in the link.

<a onclick="document.all.div1.style.visibility='hidden';document.all.div2.style.visibility='visible'"> next</a>

Though difficult to see, there is a semicolon ; in that link. That separates the actions and allows more than one action to be initiated with a single click.

rewind

The rewind button initiates a function within the script called show4. The code within that function and the ones that follow are identical to the code within the links.
The setTimeout delays the change for 1 second.

<a onClick="show4()">rewind </a>

It is a simple thing to do but it can create dramatic results

JS Lessons by Ken 1. Move div without limits 1. txt page ~ ~ ~ 1. c/c/p codes 2. Move div with limits 2. txt page ~ ~ ~ 2. c/c/p codes 3. Using a single function for multiple actions 3. txt page ~ ~ ~ 3. c/c/p codes 4. Repositioning using the else command 4. txt page ~ ~ ~ 4. c/c/p codes 5. Intro to the setTimeout. Using it to scroll a div 5. txt page ~ ~ ~ 5. c/c/p codes 6. DHTML 6. txt page ~ ~ ~ 6. c/c/p codes 7. More DHTML 7. txt page ~ ~ ~ 7. c/c/p codes 8. Visibility 8. txt page ~ ~ ~ 8. s/s/p codes Tandem Tooters    Paulie's Interface NG