Arranging Div Layers

evanburen · Jan 19, 2006

I have a set of 10 div layers on a page that each contain dynamic
content pulled from a database so the size of the div layers is not
static. Each layer can be viewed or hidden by checking checkboxes at
the top of the page. The problem I'm having is that if the user wants
to view only div layers 8-10, I have a lot of dead space in the page
where div layers 1-7 are on the page but not visible in the browser.
How do I arrange these div layers so that each one opens at the top of
the page and each subsequent one is opened beneath the other so I don't
have any white space between the div layers? Thanks.

McKirahan · Jan 20, 2006

I have a set of 10 div layers on a page that each contain dynamic
content pulled from a database so the size of the div layers is not
static. Each layer can be viewed or hidden by checking checkboxes at
the top of the page. The problem I'm having is that if the user wants
to view only div layers 8-10, I have a lot of dead space in the page
where div layers 1-7 are on the page but not visible in the browser.
How do I arrange these div layers so that each one opens at the top of
the page and each subsequent one is opened beneath the other so I don't
have any white space between the div layers? Thanks.

Sounds like a CSS question (for another newsgroup).

Are you using "display:none" which reserves the space?

Try "visibility:hidden" which doesn't.

David Dorward · Jan 20, 2006

How do I arrange these div layers so that each one opens at the top of
the page and each subsequent one is opened beneath the other so I don't
have any white space between the div layers?

First - don't make them "layers".

Second - set the top and bottom margins of each to 0.

No need for JavaScript at all.

McKirahan · Jan 20, 2006

McKirahan said:
Sounds like a CSS question (for another newsgroup).

Are you using "display:none" which reserves the space?

Try "visibility:hidden" which doesn't.

Like this:

<html>
<head>
<title>showhide.htm</title>
<script type="text/javascript">
function Disp() {
var disp = document.getElementById("div1").style.display;
disp = (disp == "none") ? "block" : "none";
document.getElementById("div1").style.display = disp;
}
function Visi() {
var visi = document.getElementById("div2").style.visibility;
visi = (visi == "hidden") ? "visible" : "hidden";
document.getElementById("div2").style.visibility = visi;
}
</script>
</head>
<body>
<hr>
<div id="div1" style="display:block"> 1 </div>
<hr>
<div id="div2" style="visibility:visible"> 2 </div>
<hr>
<input type="button" value="Show/Hide 1" onclick="Disp()">
<input type="button" value="Show/Hide 2" onclick="Visi()">
</body>
</html>

evanburen · Jan 20, 2006

I can't seem to get it right. I'm working on a combination of
suggestions here. It's still reserving that space for the hidden div
sections: http://216.204.149.105/companies/company_profile.asp

function hideLayer(whichLayer)
{
document.getElementById(whichLayer).style.display = 'none';
var strshowhide=0;
frmPanelStatus.location.href="panelstatus.asp?showhide=" + strshowhide
+ "&whichLayer=" + whichLayer;
}

function showLayer(whichLayer)
{
document.getElementById(whichLayer).style.display = 'inline';
var strshowhide=1;
frmPanelStatus.location.href="panelstatus.asp?showhide=" + strshowhide
+ "&whichLayer=" + whichLayer;
}

<div id="CompanyBoard"
<% If strshowhide = 0 Then
Response.Write "class=""divNotVisible"""
Else
Response.Write "class=""divVisible"""
End If
%>>

<a href="javascript:showLayer('CompanyBoard');">Show</a>/<a
href="javascript:hideLayer('CompanyBoard');">Hide</a>

</div>

style.css page:

..divNotVisible
{
display: none;
/* visibility: hidden; */
}

..divVisible
{
display: inline; */
/* visibility: visible; */
}

evanburen · Jan 20, 2006

I'm an idiot...I had <p> </p> content outside of my div tags that
was occupying the hidden space. Thanks everyone for your help.

Clickable Div Block	1	Oct 13, 2023
Different font sizes inside same div	2	Dec 3, 2023
Search Results with Pagination	0	Oct 25, 2024
How can I get my menu inside of a menu to function properly?	1	Jan 19, 2023
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023
Troubles with Fullpage / please help	0	Dec 14, 2023
Why is this WordPress comments form not submitting?	1	Jan 12, 2020
Help with code	0	Jun 12, 2022

Arranging Div Layers

evanburen

McKirahan

David Dorward

McKirahan

evanburen

evanburen

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads