Closed Thread Icon

Topic awaiting preservation: Hide/Show Layers with 'Next' and 'Previous' buttons???? URGENT HELP NEEDED!! Pages that link to <a href="https://ozoneasylum.com/backlink?for=26530" title="Pages that link to Topic awaiting preservation: Hide/Show Layers with &amp;#039;Next&amp;#039; and &amp;#039;Previous&amp;#039; buttons???? URGENT HELP NEEDED!!" rel="nofollow" >Topic awaiting preservation: Hide/Show Layers with &#039;Next&#039; and &#039;Previous&#039; buttons???? URGENT HELP NEEDED!!\

 
Author Thread
Plasma
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Aug 2005

posted posted 08-24-2005 22:41

I have this project that needs to be finished within 3 days and I'm desperate.

I need to know how I can control 5 layers with a 'next' and a 'previous' button. I sort of know how to control them with 5 seperate buttons for each layer...but I need to control them with only those two buttons. That's it...nothing more.

PLEASE HELP!

zavaboy
Bipolar (III) Inmate

From: f(x)
Insane since: Jun 2004

posted posted 08-24-2005 22:43

Layers as in...? Divs?

Plasma
Obsessive-Compulsive (I) Inmate

From:
Insane since: Aug 2005

posted posted 08-24-2005 22:53

yes.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 08-24-2005 23:16

Control as in make visible and invisible?

Something like this...

code:
<!-- HTML -->
<body onload="init();">
<a href="" onclick="prev(); return false;">previous</a>
<a href="" onclick="next(); return false;">next</a>
<div id="layer0" class="hideshowlayer">...</div>
<div id="layer1" class="hideshowlayer">...</div>
<div id="layer2" class="hideshowlayer">...</div>
...

// CSS
// (make all layers start off invisible)
.hideshowlayer {display:none;}

// JavaScript
var curlayer = 0;
var numlayers = 3; // set this appropriately
var layers = new Array();

function init()
{
    for (var i = 0; i < numlayers; ++i) {
        layers[i] = document.getElementById("layer" + i);
    }
    layers[curlayer].style.display = 'block';
}

function prev()
{
    layers[curlayer].style.display = 'none';
    --curlayer; if (curlayer < 0) curlayer = 0;
    layers[curlayer].style.display = 'block';
}
function next()
{
    layers[curlayer].style.display = 'none';
    ++curlayer; if (curlayer >= numlayers) curlayer = numlayers - 1;
    layers[curlayer].style.display = 'block';
}



all of the above code is untested, but it's a start.


 

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted posted 08-25-2005 20:37

If the data isn't too large (therefore not making the page load too great), you can just use CSS.

Examples:
http://reisio.com/temp/dogwood/
http://reisio.com/temp/mbzle/

« BackwardsOnwards »

Show Forum Drop Down Menu