Arranging Div Layers

evanburen

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

Subscribe Post Reply

2580

McKirahan

<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

McKirahan

"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

David Dorward

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

evanburen

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

evanburen

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.

Jan 20 '06 #6

Similar topics

Div/Layers problem in NN4

by: Lizzy | last post by:

I have an internet application which has a progress bar show whenever the customer is requesting data from the server. This progress bar is coded to work in both Netscape 4.75 and above and IE 5.0...

Javascript

document.layers & Mozilla

by: David List | last post by:

I'm having a problem using different properties of the document object in the example javascripts in my textbook with browsers that identify themselves as using the Mozilla engine. One example of...

Javascript

Problem: Dynamically center layers on centered web page - IE + Firefox

by: Freek te Water | last post by:

Hi, Hope no-one is offended by my probably noob question... Context: I have a web page design, which always centres in the middle of the screen (using a 100%*100% HTML-table). Now I also use...

HTML / CSS

document.layers error in IE

by: ashkaan57 | last post by:

Hi, I am using the following code to show/hide part of an html page. It works in Netscape and Firefox but dies in IE: "Error: document.layers is null or not an object" <style> ..noshow {...

Javascript

Arranging thumbnails

by: Ironside | last post by:

Can someone give me a basic script example for arranging thumbnails on a page. I have always put them in tables that CSS is obviously better. Also, I like to put writing underneath the thumbnails...

General

arranging thumbnails by div/css only question

by: michael | last post by:

Hi All, I'm trying to achieve an "ideal" of arranging the thumbnails on one of my sites using only styles and divs, rather than a table. I'm well practised with Divs etc, but a solution that...

HTML / CSS

Help! How many layers in my app?

by: Burt | last post by:

There's an architect at my 200 person company that advocates having many layers in all my C# apps. He wants web services, use case handlers, facade layers, data gateways, etc. When I ask why all...

C# / C Sharp

Div Layers with IFrames-Hiding and Showing

by: Grimm | last post by:

I am developing an internalk inteface that integrates alot of seperate tools into one interface. The current version uses one Iframe inside a div layer for positioning. Currently the seperate web...

Javascript

Arranging windows

by: Jerry Spence1 | last post by:

I'm just wondering if there are any clever mathematicians out there. My VB2005 program consists of a number of panels on a form. Here's the rules: The number of panels will be variable The...

Visual Basic .NET

Benefits of Blockchain App Development for Enterprise Businesses

by: Kemmylinns12 | last post by:

Blockchain technology has emerged as a transformative force in the business world, offering unprecedented opportunities for innovation and efficiency. While initially associated with cryptocurrencies...

General

by: WisdomUfot | last post by:

It's an interesting question you've got about how Gmail hides the HTTP referrer when a link in an email is clicked. While I don't have the specific technical details, Gmail likely implements measures...

General

FPGA Question

by: Oralloy | last post by:

Hello Folks, I am trying to hook up a CPU which I designed using SystemC to I/O pins on an FPGA. My problem (spelled failure) is with the synthesis of my design into a bitstream, not the C++...

General

One of the easiest ways to set the background color of Excel documents in Java

by: Carina712 | last post by:

Setting background colors for Excel documents can help to improve the visual appeal of the document and make it easier to read and understand. Background colors can be used to highlight important...

General

Join our open community on Discord to learn programming, SEO, and marketing

by: BLUEPANDA | last post by:

At BluePanda Dev, we're passionate about building high-quality software and sharing our knowledge with the community. That's why we've created a SaaS starter kit that's not only easy to use but also...

General

Datasheet Form, iterate through records

by: Johno34 | last post by:

I have this click event on my form. It speaks to a Datasheet Subform Private Sub Command260_Click() Dim r As DAO.Recordset Set r = Form_frmABCD.Form.RecordsetClone r.MoveFirst Do If...

Microsoft Access / VBA

Hide Labels depending on checkbox value

by: ezappsrUS | last post by:

Hi, I wonder if someone knows where I am going wrong below. I have a continuous form and two labels where only one would be visible depending on the checkbox being checked or not. Below is the...

Microsoft Access / VBA

hello, Is there code or static lib for hook swapchain present?

by: jack2019x | last post by:

hello, Is there code or static lib for hook swapchain present? I wanna hook dxgi swapchain present for dx11 and dx9.

C / C++

Handling .click() in the Safari browser

by: DizelArs | last post by:

Hi all) Faced with a problem, element.click() event doesn't work in Safari browser. Tried various tricks like emulating touch event through a function: let clickEvent = new Event('click', {...

Javascript