I am trying to link a HoverMenuPopup to anchor tags on a page programmatically and I would like to implement something similar to the FAQ #13:
http://forums.asp.net/t/992919.aspx
This code is outdated now, and does not work.
How would it be written for the released version of the AJAX Control Toolkit?
Thank you,
Jeff
Hi Jeff,
Here is a sample made according to your requirements, please try it.
<%@. Page Language="C#" %><!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 id="Head1" runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <div> <input type="button" onclick="addHoverMenu();" value="Add Hovermenu to HyperLink" /><br /> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="http://www.msdn.com">HyperLink</asp:HyperLink> <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px"> Item1<br /> Item2<br /> Item3<br /> Item4<br /> </asp:Panel> <script type="text/javascript"> function addHoverMenu() { $create(AjaxControlToolkit.HoverMenuBehavior, {"id":"Repeater1_ctl10_HoverMenuExtender1","popupElement":$get("<%= Panel1.ClientID%>")}, null, null, $get("<%= HyperLink1.ClientID%>")); } </script><div style="display:none;" >Controls in this div are used to import necessary javascripts. <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton> <asp:Panel ID="Panel2" runat="server" Height="50px" Width="125px"> </asp:Panel> <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" PopupControlID="Panel2" runat="server" TargetControlID="LinkButton1"> </ajaxToolkit:HoverMenuExtender> </div> </div> </form></body></html>That is what I was looking for Raymond. Now I will need to look into setting the popup location, timeout, etc.
Thank you,
Jeff
Raymond,
I've run into a bit of a snag with the popup. What I want to do is link a number of anchor tags to a single popup instance. When I use the logic of attaching behaviors to multiple anchors, certain events attached to the single popup cause the popup to jump between the anchor tags when I mouse over the popup (after hovering over a second anchor associated with the same popup).
What would you suggest I change in the below code to address this:
<%@. Page Language="C#" %>
<%@. Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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 id="Head1" runat="server">
<title>Hover Sample</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
function hover(element)
{
var behaviorName = "HoverMenuExtender_" + element.uniqueID;
var behavior = $find(behaviorName);
var popupElement = $get("<%= pnlHoverPopup.ClientID%>");
if (behavior == null)
{
behavior = $create(AjaxControlToolkit.HoverMenuBehavior, {"id":behaviorName, "popupElement":popupElement, PopDelay:750, OffsetX:-200, OffsetY:16}, null, null, element);
behavior.set_PopupPosition(AjaxControlToolkit.HoverMenuPopupPosition.Bottom);
}
}
</script>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean nisl justo, sagittis
id, tincidunt nec, euismod ac, turpis. Proin ante. Sed venenatis libero ac nisi.
Nunc varius ultrices velit. Donec vestibulum interdum ligula. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi.
Nunc vel ligula. In <a href="http://links.10026.com/?link=http://forums.asp.net/p/1167961/1956419.aspx#1956419#" onmouseover="return hover(this);">Internet</a> nisi
eget turpis. Nunc diam. Etiam congue ipsum. Proin vitae mauris et risus ultrices
vestibulum. Phasellus laoreet lectus quis augue. Vestibulum accumsan. Curabitur
sit amet eros eu justo rhoncus eleifend. Donec semper pharetra nibh. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque habitant morbi tristique senectus et netus et <a href="http://links.10026.com/?link=http://forums.asp.net/p/1167961/1956419.aspx#1956419#" onmouseover="return hover(this);">
Internet</a> fames ac turpis.
</div>
<asp:Panel ID="pnlHoverPopup" runat="server" Style="visibility:hidden;background-color:#ccccff;width:300px; padding:10px;color:#000000;">
<h3>
Internet</h3>
A series of interconnected local, regional, national and international networks,
linked using the Internet Protocol. The Internet is accessible via telephony wires,
HFC networks and by satellite.
</asp:Panel>
<div style="display: none;">
Controls in this div are used to import necessary javascripts.
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
<asp:Panel ID="Panel2" runat="server" Height="50px" Width="125px">
</asp:Panel>
<ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" PopupControlID="Panel2" runat="server"
TargetControlID="LinkButton1">
</ajaxToolkit:HoverMenuExtender>
</div>
</form>
</body>
</html>
Thank you,
Jeff
