ASP.Net Ajax - HoverMenuExtender Flicker Fix


I was recently working on a project for myself (a playlist builder). At the top of my page I had some LinkButton's with HoverMenuExtender attached to them. I'm still amazed at how easy these are to use. The only problem I had was that whenever a PostBack would occur, the panel that is the hover menu would flicker for a second in the top left hand portion of the screen. After about a half hour's worth of searching I found a blog post that had the same issue, but with a ModalPopupExtender. I took the fix Matt Berseth applied and sure enough, no more flicker. Here's a link that blog entry: http://mattberseth.com/blog/2007/08/how_to_stop_the_modalpopup_fli.html

So, basically, the fix was to add a CSS style on the panel of display:none. Below are two snippets, the first is the LinkButton with the HoverMenuExtender and the second is the panel with the style set (I'm half blogging about this for posterity because I know, I'll forget this in the future if I don't use it again for a while).

<asp:LinkButton ID="linkPlaylist" runat="server">My Playlist</asp:LinkButton>
<cc1:HoverMenuExtender ID="linkPlaylist_HoverMenuExtender" runat="server"
                        DynamicServicePath="" Enabled="True" TargetControlID="linkPlaylist"
                        PopupControlID="playlistPopMenu" OffsetY="15">
</cc1:HoverMenuExtender>
<asp:Panel ID="playlistPopMenu" runat="server" Visible="true"
            CssClass="playlistPopMenu" style="display:none">
    <asp:LinkButton ID="LinkButton1" runat="server">
        Clear Your Playlist
    </asp:LinkButton>
    <br />
    <asp:LinkButton ID="LinkButton2" runat="server">
        Export Playlist to Excel
    </asp:LinkButton>
    <br />
    <asp:LinkButton ID="LinkButton3" runat="server">
            Export Playlist to Text
    </asp:LinkButton>
    <br />
</asp:Panel>

Leave a comment

Please note that we won't show your email to others, or use it for sending unwanted emails. We will only use it to render your Gravatar image and to validate you as a real person.