Friday, October 3, 2008

Show and hide a panel with javascript

* Make note of the Z-INDEX on the row. This will allow the visible panel to appear above other items on the page.
In the HTML
<tr style="Z-INDEX: 10; POSITION: absolute">
  <td>
    <asp:Panel Runat="server" ID="ThePanel" BorderWidth="1px" BorderStyle=Solid>
    <asp:Literal Runat="server" ID="TheResults"></asp:Literal>
</asp:Panel>
  </td>
</tr>

In the js file
function ShowPanel(target)
{
  if (target != null)
  {
    target.style.display = '';
  }
}

function HidePanel(target)
{
  if (target != null)
  {
    target.style.display = 'none';
  }
}

In the code behind
protected override void OnPreRender(EventArgs e)
{
  this.TheLabel.Attributes.Add("onmouseover", "ShowPanel("+this.ThePanel.ID+");");
  this.TheLabel.Attributes.Add("onmouseout", "HidePanel("+this.ThePanel.ID+");");
  this.ThePanel.Style.Add("display", "none");

  base.OnPreRender (e);
}

No comments: