Hi Gregg,
I have changed POSITION: relative but then the DIVS disappeared from the
screen. Please note that I am using a Class on the Div that set the
display to block. I have a style at the top of the page.
This is the code. Please could you run the code for you to see what is
happening.
Looking forward to your reply
Cheers
<html>
<head>
<style>
.HideTable {position:absolute; display:none}
.ShowTable {position:absolute; display:block}
</style>
<script language="Javascript">
function Hide(nLayer)
{
nLayer.className = "HideTable";
}
</script>
</head>
<body>
<div id="leftMargin" style="position:relative; left:9px; top:42px;
width:35px; height:999px;
z-index:10">
<table border="1" id="Table0">
<tr>
<td>Total</td>
</tr>
<tr>
<td>54534</td>
</tr>
<tr>
<td>3453</td>
</tr>
<tr>
<td>3453</td>
</tr>
</table>
</div>
<div id="Layer1" style="position:relative; left:89px; top:42px;
width:35px; height:999px;
z-index:10" class="ShowTable">
<table border="1" id="Table1">
<tr>
<td><span style="cursor:hand;cursor:pointer" onclick="Hide
(Layer1);">Hide</span></td>
<td> </td>
<td>Layer1</td>
</tr>
<tr>
<td>103</td>
<td>49</td>
<td name="idx">76</td>
</tr>
<tr>
<td>49</td>
<td>103</td>
<td name="idx">76</td>
</tr>
<tr>
<td>100</td>
<td>41</td>
<td name="idx">86</td>
</tr>
</table>
</div>
<div id="Layer2" style="position:relative; left:219px; top:42px;
width:35px; height:999px;
z-index:10" class="ShowTable">
<table border="1" id="Table2">
<tr>
<td><span style="cursor:hand;cursor:pointer" onclick="Hide
(Layer2);">Hide</span></td>
<td> </td>
<td>Layer2</td>
</tr>
<tr>
<td>49</td>
<td>76</td>
<td name="idx">103</td>
</tr>
<tr>
<td>76</td>
<td>49</td>
<td name="idx">121</td>
</tr>
<tr>
<td>100</td>
<td>41</td>
<td name="idx">86</td>
</tr>
</tr>
</table>
</div>
<div id="Layer3" style="position:relative; left:339px; top:42px;
width:35px; height:999px;
z-index:10" class="ShowTable">
<table border="1" id="Table3">
<tr>
<td><span style="cursor:hand;cursor:pointer" onclick="Hide
(Layer3);">Hide</span></td>
<td> </td>
<td>Layer3</td>
</tr>
<tr>
<td>49</td>
<td>76</td>
<td name="idx">103</td>
</tr>
<tr>
<td>76</td>
<td>49</td>
<td name="idx">121</td>
</tr>
<tr>
<td>100</td>
<td>41</td>
<td name="idx">86</td>
</tr>
</table>
</div>
<div id="Layer4" style="position:relative; left:459px; top:42px;
width:35px; height:999px;
z-index:10" class="ShowTable">
<table border="1" id="Table4">
<tr>
<td><span style="cursor:hand;cursor:pointer" onclick="Hide
(Layer4);">Hide</span></td>
<td> </td>
<td>Layer4</td>
</tr>
<tr>
<td>49</td>
<td>76</td>
<td name="idx">103</td>
</tr>
<tr>
<td>76</td>
<td>49</td>
<td name="idx">121</td>
</tr>
<tr>
<td>100</td>
<td>41</td>
<td name="idx">86</td>
</tr>
</table>
</div>
</body>
</html>
> set the display to none rather than hide
At 23:09 09/12/02 +0000, you wrote:
>Hi,
>
>The code below is not working the way I intended.
>
>When I click on the hide link, the DIV for that link is being hidden.
>
>That works fine. However, when one DIV is hidden I would like all the
>other DIVs to the right of this one to move to the left and occupy the
>space left from the hidden DIV. But what is happening is that I get a
>space in between the DIVs. For instance if I click the link to hide DIV 2
>(Layer2), DIVs 3 and 4 should move to the left to the same position of
>DIV 2 which is hidden now.
>
>Please, could someone help me to figure out what is wrong with my code. I
>thought that if I set the display to none this would work. But dont!!
>
>Just for your info., I have set the position of the DIVs using
>style="position:absolute; left:89px; top:42px; width:35px; height:999px;
>z-index:10" class="ShowTable">.
>
>Maybe there is another way of setting the position instead of
>position:absolute but I do not know..
>
>Cheers,
>
>Claudio
>
>Total
>54534
>3453
>3453
> Layer1
>103 49 76
>49 103 76
>100 41 86
> Layer2
>49 76 103
>76 49 121
>100 41 86
> Layer3
>49 76 103
>76 49 121
>100 41 86
> Layer4
>49 76 103
>76 49 121
>100 41 86
>---
>Change your mail options at http://p2p.wrox.com/manager.asp or
>to unsubscribe send a blank email to
>
View Cart
