Wednesday, August 20, 2008

Div on top of another Div

Hi,

The below code can be useful to place one div dynamically above another div without occupying a space .

//*********************************************************************************

<form id="form1" runat="server">
<script language ="javascript" type="text/javascript" >

function showMe(j)
{
document.getElementById("Panel1").style.display = 'none';
document.getElementById("Panel2").style.display = 'none';

if(j.checked)
{
if(j.id=="chek1")
{
document.getElementById("Panel1").style.display = 'block';
}

if(j.id=="chek2")
{
document.getElementById("Panel2").style.display = 'block';
}
}
}

</script>
<table style="width: 50%">
<tr >
<td>
<input type="checkbox" onclick ="showMe(this)" id="chek1" runat="server" />
Email</td>
</tr>
<tr >
<td>
<input type="checkbox" id="chek2" onclick ="showMe(this)" runat="server" />
Home Mailing</td>
</tr>
</table>

<table style="width: 464px" >
<tr>
<td>
<div style="display:none ; width: 452px; height: 100px; background-color: #ccffff;" id="Panel1" >
Message <input id="Text1" type="text" runat="server" />
<br />
<asp:TextBox TextMode ="MultiLine" ID="comment1" runat ="server" ></asp:TextBox>
</div>
<div style="display:none ; width: 452px; height: 100px; background-color: #ffccff;" id="Panel2" >
Home Mailing <input id="Text2" type="text" runat="server" />
<br />
<asp:TextBox TextMode ="MultiLine" ID="comment2" runat ="server" ></asp:TextBox>
</div>
</td></tr>
</table>
</form>
</body>

/****************************************************************************

No comments: