ASP.Net Ajax - HoverMenuExtender Flicker Fix

Posted by Blake on 6/23/2009
)

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>