Geek asks and answers

How to check if a panel is visible or not in JavaScript?

How to check that the panel is visible or not in JavaScript ?. I am using ASP.NET 2.0.

+3
source share
5 answers

Assuming that you set the panel visibility on the server side, checking the value returned document.getElementById()will work if you make sure that you use the correct control panel client identifier (don) t hard code).

See client side validation findPanel()for a demonstration.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function findPanel() {
            var panel = document.getElementById("<%= pnlMyPanel.ClientID %>");
            if (panel) {
                alert("Panel is visible");
            }
            else {
                alert("Panel is not visible");
            }

//        // And this would work too:
//        alert((<%= pnlMyPanel.Visible.ToString().ToLower() %>) ? "Panel is visible": "Panel is not visible");

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Panel runat="server" ID="pnlMyPanel">
            <p>
                This is a panel.</p>
        </asp:Panel>
        <asp:Button runat="server" ID="btnToggle" Text="Toggle panel visibility..." />
        <input type="button" value="Do client-side visibility check..." onclick="javascript:findPanel();" />
    </div>
    </form>
</body>
</html>

The following code in a code-encoded file switches the panel visibility when clicked btnToggle:

protected void Page_Load(object sender, EventArgs e)
{
    btnToggle.Click += new EventHandler(btnToggle_Click);
}

void btnToggle_Click(object sender, EventArgs e)
{
    pnlMyPanel.Visible = !pnlMyPanel.Visible;
}
+8
source

If you use jQuery - have you tried visible selector?

eg:

if ($("#test").filter(":visible")​​​​​​​​.length > 0) {
    /* visible */
} else {
    /* invisible */
}

, , - jQuery (/ ..) . exists getElementById - .

JavaScript, :visible, . A la the docs:

: visible jQuery, CSS, :visible , DOM querySelectorAll(). :visible , CSS, .filter(":visible").

+3

ASP.NET javascript.

<script type="text/javascript>
   function IsPanelVisible() {
      return <%= pnlMessages.Visible.ToString().ToLower() %>
   }
</script>
+3

Visible , ( ). ASP.NET . , document.getElementById(<%= panel.ClientID %>), , .

+1

. , div . , .

- javascript. jquery, ($ ( "# mypanel" ). Exists()), chek. javascript , DOM?

+1

More articles:


All Articles