Closing the Gap

[Gary Williams]

Hi All,

I have made a page displaying 3 small tables. Using javascript and div's, I can make the second table visible or hidden ( I know, quite simple but it impressed me )

When the second table is hidden, a large white space is left between tables 1 and 3.

How do I get this gap to automatically shrink (by moving table 3 upwards)and when making table 2 visible again, to push table 3 down?

Regards

Gary

[]|V|[agnus]

Sounds like you are probably using the visibility property to hide the table. When visibility is set to "hidden", the element is invisible to your eyes, but still affects the layout as if it were there.

To hide and element and remove its effects on the document flow, you will want to use the display property. The display property is part of the same group of properties as visibility:

element.style.display="none";

[Gary Williams]

Hi Angus,

Thanks for the information, worked a treat!

This is what I did:

==========================

1. I put this code in the head:

<script type=text/javascript>
var isNS = navigator.appName.indexOf("Netscape") != -1
var isIE = navigator.appName.indexOf("Microsoft") != -1

function show() {
if (isNS) document.layers["d1"].visibility = "show";
if (isIE) document.all.d1.style.display = "inline";
}
function hide() {
if (isNS) document.layers["d1"].visibility = "hide";
if (isIE) document.all.d1.style.display = "none";
}
</script>

2. I put this code in the body of the page:

<a href="javascript:show()">CLICK ME TO SHOW TABLE 9</a>

<a href="javascript:hide()">CLICK ME TO HIDE TABLE 9</a>

3. I place the DIV tas before and after the table I wanted to Show/Hide.

<DIV id="d1" style="display:none">
<TABLE ID="Table9">
<TR> etc, etc, etc
</TR>
</TABLE>
</DIV>

=======================================

This worked absolutely fine and the manual links to the javascript did indeed show and hide table 9.

I then tried to get clever and automate the show/hide depending on an asp test and it all went wrong

This is what I tried. I replaced the manual links:

<a href="javascript:show()">CLICK ME TO SHOW TABLE 9</a>
<a href="javascript:hide()">CLICK ME TO HIDE TABLE 9</a>

.... with the following script to check a database value to decide to show or hide the table:

<% if lcase(ors("ShowOrHide")) = "show" then %>

<script>
document.all.d1.style.display = "inline";
</script>

<%else %>

<script>
document.all.d1.style.display = "none";
</script>

<%
end if
%>

Trouble is, it doesn't work and I get an underfined 'd1' error message.

Where have I gone wrong?

Regards

Gary