By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,967 Members | 1,690 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,967 IT Pros & Developers. It's quick & easy.

Arranging Div Layers

P: n/a
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.

Jan 20 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a
<ev*******@gmail.com> wrote in message
news:11**********************@z14g2000cwz.googlegr oups.com...
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.
Jan 20 '06 #2

P: n/a
"McKirahan" <Ne**@McKirahan.com> wrote in message
news:pN********************@comcast.com...
<ev*******@gmail.com> wrote in message
news:11**********************@z14g2000cwz.googlegr oups.com...
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.


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>
Jan 20 '06 #3

P: n/a
ev*******@gmail.com wrote:
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.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Jan 20 '06 #4

P: n/a
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?show hide=" + strshowhide
+ "&whichLayer=" + whichLayer;
}

function showLayer(whichLayer)
{
document.getElementById(whichLayer).style.display = 'inline';
var strshowhide=1;
frmPanelStatus.location.href="panelstatus.asp?show hide=" + 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; */
}

Jan 20 '06 #5

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

Jan 20 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.