How to close the HoverMenu when user mouseover to hover Panel or Closing the HoverMenu on mouseout of target control in Asp.Net

Introduction

In this article we are discussing on how to close the AjaxControlToolkit HoverMenuExtender Control when user move out target control of HoverMenuExtender.

Problem Description:

As per design the AjaxControlToolkit’s HoverMenuExtender don’t close if mouse pointer is over the Panel which displayed as HoverMenu. We need custom implementation to close the HoverMenuExtender when user moves out of Target Control.

Demo of issue here

Solution:

To resolve this issue we can use the Javascript approach. Basically we are making use of onmouseout event to hide the HoverMenuExtender control.

Code to Hide the HoverMenuExtenderControl:

	<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("HoverMenuExtender2");
                //Hide the hovermenu
                hovermenu._hoverBehavior._hoverElement.style.visibility = "hidden";
            }
        </script>
        <style type="text/css">
            .panelClass {
                background-color: blue;
                width: 300px;
            }
        </style>
        <asp:Panel ID="Panel1" runat="server" CssClass="panelClass">
            This is a sample HoverMenuExtender pop up.
        </asp:Panel>
         <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" ScriptMode="Release"
            CombineScripts="false">
        </cc1:ToolkitScriptManager>
        <cc1:HoverMenuExtender ID="HoverMenuExtender2" runat="server" PopupControlID="Panel1"
            TargetControlID="Button1" PopupPosition="Right">
        </cc1:HoverMenuExtender>
        <asp:Button ID="Button1" runat="server" onmouseout="ButtonMouseOut();" Text="Hover Here to Open PopUp" />

Demo of solution

Advertisements

, , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: