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

2645

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

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++