Remove From My Forums

HoverMenuExtender mouseout to hide panel even if mouseover panel

Question
0

Sign in to vote

User1015507299 posted

I have a hovemenuextender on an image button to pop up a larger view of the image. I would like to hide that image when the user moves the mouse away from the image button. It works unless you move your mouse over the panel that pops up with the image. I would like to still hide the popup panel even if the users moves the mouse over the large image popup panel. Is that possible? I only want the image button to popup and hide the panel. As soon as the user moves the mouse away from the image button (even if it is over the popup image) I would like to hide the popup panel.

Friday, March 6, 2015 11:20 AM

Answers

User61956409 posted

Hi sdulaney,

Thanks for your post.

sdulaney
One thing I forgot to include was that this is in a gridview list so each hovermenuextender has its own id generated from the gridview. Is this still possible within a gridview?

I create the following sample for you, you could test it on your side.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .panelClass {
            background-color: yellow;
            width: 50px;
        }
    </style>
    <script src="../../Scripts/jquery-1.8.2.js"></script>
    <script>
        function ButtonMouseOut(btnid) {
            var btnid = "#" + btnid;
            //alert(btnid);
            $(btnid).parent().prev("td").find(".panelClass").hide();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:TemplateField HeaderText="ID">
                        <ItemTemplate>
                            <asp:Label ID="lblID" runat="server" Text='<%#Eval("ID") %>'></asp:Label>
                            <asp:Panel ID="Panel1" runat="server" CssClass="panelClass">
                                <%#Eval("ID") %>
                            </asp:Panel>
                            <asp:HoverMenuExtender runat="server" ID="hme" TargetControlID="imgbtn" PopupControlID="Panel1"
                                PopupPosition="Right">
                            </asp:HoverMenuExtender>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:ImageButton ID="imgbtn" runat="server" onmouseout='ButtonMouseOut(this.getAttribute("ID"))' ImageUrl="~/Images/FilledStar.png" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>
</html>

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ID");

        dt.Rows.Add("1");
        dt.Rows.Add("2");

        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

Best Regards,

Fei Han

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Monday, March 9, 2015 4:36 AM

All replies

User2103319870 posted

I only want the image button to popup and hide the panel. As soon as the user moves the mouse away from the image button (even if it is over the popup image) I would like to hide the popup panel.

You can use the onMouseout event in ImageButton and then use the below javascript function to hide modal pop extender

 <asp:ImageButton ID="ImageButton1" runat="server" onmouseout="ButtonMouseOut()" ImageUrl="YourImageuRL here"/>

Javascript function to hide the modal popupextender

<script type="text/javascript">
            function ButtonMouseOut() {
                //Access the hovermenu here
                var hovermenu = $find("Hovemenu1");
                //Hide the hovermenu
                hovermenu._hoverBehavior._hoverElement.style.visibility = "hidden";
            }    
        </script>

Complete Code

 <script type="text/javascript">
            function ButtonMouseOut() {
                //Access the hovermenu here
                var hovermenu = $find("Hovemenu1");
                //Hide the hovermenu
                hovermenu._hoverBehavior._hoverElement.style.visibility = "hidden";
            }    
        </script>
        <style type="text/css">
            .panelClass
            {
                background-color: blue;
                width: 300px;
            }
        </style>
        <ajax:ToolkitScriptManager ID="ToolkitScriptManager2" runat="server" ScriptMode="Release"
            CombineScripts="false">
        </ajax:ToolkitScriptManager>
        <asp:Panel ID="Panel1" runat="server" CssClass="panelClass">
            This is a sample HoverMenuExtender pop up.
        </asp:Panel>
        <ajax:HoverMenuExtender runat="server" ID="Hovemenu1" PopupControlID="Panel1"
            TargetControlID="ImageButton1" PopupPosition="Left">
        </ajax:HoverMenuExtender>
        <asp:ImageButton ID="ImageButton1" runat="server" onmouseout="ButtonMouseOut()" ImageUrl="YourImageuRL here"/>

Friday, March 6, 2015 2:27 PM

0

Sign in to vote

User1015507299 posted

Thanks for the code. One thing I forgot to include was that this is in a gridview list so each hovermenuextender has its own id generated from the gridview. Is this still possible within a gridview?

Thanks.

Friday, March 6, 2015 4:24 PM