PDA

Click to See Complete Forum and Search --> : layers question - hidden/visible

margo1
08-27-2004, 12:43 PM
I have an html page with 5 div ids (layers). My goal is to display the first layer when the page loads and then overlay this layer with next layer once a button is clicked on and so forth. The first layer is visible, and then next four are hidden. When I bring up my page, all layers are visible. What am I doing wrong? I'm using IE. Thanks. Margo
Naemo
08-27-2004, 12:52 PM
use css to make elements visible/hidden:



visible:

style="display:block"

hidden:

style="display:none"



Then you can change these attribute via javascript like so:



makes layer2 visible:
document.getElementById("layer2").style.display="block";



This is the basics, ask if you want in more detail.

Cheers
margo1
08-27-2004, 01:36 PM
I did try it but unfortunately I'm doing something wrong because I'm still getting the whole document.

I've made the changes in css to include the style as you have indicated. Then javascript function examines which layer id I'm passing and depending on should show the next layer (I've included your suggestion).

Any other suggestions?
margo1
08-27-2004, 02:24 PM
I started to dug little bit more, and noticed that <DIV> tags cannot be within the same <TABLE> tags.

I've separated my layers, and I do get the first layer but when I click on the button to execute onClick function, I don't get back the next layer, but I get the message that the document (elem = document.getElementById("id");) is null. I'm passing correct layer id.

Any suggestions to my dilemma?
Charles
08-27-2004, 03:30 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<style type="text/css">
<!--
div {border:solid 1px; padding:1ex}
.hidden {display:none}
-->
</style>

</head>
<body>
<div><h2>Block 1</h2></div>
<div><h2>Block 2</h2></div>
<div><h2>Block 3</h2></div>
<div><h2>Block 4</h2></div>

<script type="text/javascript">
<!--
display = 0;
onload = function () {
var e, i;
for (i = 0; e = document.getElementsByTagName('DIV')[i]; i++) {e.className = i == display ? '' : 'hidden'}
display++;
}

document.write('<button id="next">Next</button>');
document.getElementById('next').onclick = onload;
// -->
</script>

</body>
</html>
margo1
08-31-2004, 01:30 PM
Thanks for all of your help. The web site is great. I've created a form using <DIV> tags to display layers of my text (it's a survey) and at the end of the last text I check to make sure all questions were answered and if not I'm going to the beginning of the document allowing the user to recheck their answers.

I perform the following function to get to the beginning of my document:

display=0;
var i = 0;
var e = document.getElementsByTagName('DIV')[i];
e.className = i == display ? '' : 'hidden';
document.getElementById('next') = e;

The document comes up but:

(1) it contains an error 'Object doesn't support this property or method'
(2) it erases all answers.

Can you please help? Thanks.