automatically toggle visability of layers

[coolicus]

At the moment I have a layer than scrools top to bottom and back again if the content within it exceeds the page, however this is proving to be a unusable.

So I thought about rotating between layers automatically, display layer 1 for 10 secs then layer 2 for 10 secs, back to layer 1 etc.

Using asp I can create these layers if they are needed i.e. say each page can only display 5 records on the screen and there are 8 in total

<div id='layer1'>
row 1
row 2
row 3
row 4
row 5
</div>

<div id='layer2'>
row 6
row 7
row 8
</div>

Can someone help or point me in the right direction with the javascript to change the visibility of these layers automatically?

Thanks

 

[jez]

Here is an extract from what i am working on at the moment, which has layers that act like pages, i.e. they are all whole screen and depending on the link clicked, different ones display.

I am using the prototype library anyway, so i am using that to grab the layers.

function showPage(page){
    switch(page){
        case 'pageOne':
                $('pageOne').style.display = 'block';
                $('pageTwo').style.display = 'none';
                $('pageThree').style.display = 'none';
                
                $('entryTab').className = 'lit';
                $('previewTab').className = 'unlit';
                $('contactTab').className = 'unlit';
        break;
        
        case 'pageTwo':
                $('pageOne').style.display = 'none';
                $('pageTwo').style.display = 'block';
                $('pageThree').style.display = 'none';
                
                $('previewTab').className = 'lit';
                $('entryTab').className = 'unlit';
                $('contactTab').className = 'unlit';
        break;
        
        case 'pageThree':
                $('pageOne').style.display = 'none';
                $('pageTwo').style.display = 'none';
                $('pageThree').style.display = 'block';
                
                $('previewTab').className = 'unlit';
                $('entryTab').className = 'unlit';
                $('contactTab').className = 'lit';
        break;
    
        default:
                $('pageOne').style.display = 'block';
                $('pageTwo').style.display = 'none';
                $('pageThree').style.display = 'none';
        break;
    }


}

The only thing to be aware of is that where it says $(something), without the prototype library it would be

document.getElementById('pageOne').style.display = 'block';

where pageOne is the ID of the div to show.

If you do choose to use the prototype library then it is just an included JS file. (google prototype.js).


Hope this helps.