Menu item remains in hover state when cursor leaves browser

5 posts, 0 answers
  1. Phill Hodgkinson
    Phill Hodgkinson avatar
    35 posts
    Member since:
    Nov 2004

    Posted 18 Dec 2010 Link to this post

    Hi there,
    I have a menu with large tall buttons that are right at the top edge of the browser window. When you mouse over the HoverImageUrl gets set and when you mouse out and on to the next menu item or to the page below the menu item image is reset to the default ImageUrl. However if you move the mouse up, out of the browser window, the menu item remains in it's hover state, worse is that if you then come back into the browser window on a different menu item you end up having two menu items in hover/selected state.

    Is this a known issue? Is there an easy work around? Any tips would be appreciated.

    Regards,
    Phill
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 21 Dec 2010 Link to this post

    Hi Phill,

    Unfortunately leaving the browser window doesn't fire a mouseout for the elements in it, only for the document. An easy workaround would be to add a document event that would close the menu (I'm using the mouseleave event so that it is only fired when the cursor actually leaves the document and not entering in any elements in it:
    $telerik.$(document).mouseleave( function () {
          $find('<%= RadMenu1.ClientID %>').close();
    });

    Replace RadMenu1 with the ID of your control. Let me know if this helps.

    Regards,
    Kamen Bundev
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Phill Hodgkinson
    Phill Hodgkinson avatar
    35 posts
    Member since:
    Nov 2004

    Posted 22 Dec 2010 Link to this post

    Hi Kamen,

    I'd seen a similar recommendation in another post but this doesn't solve the issue. If you go to your menu demo that uses All Images and then scroll the browser window so the top of the menu is at the top edge of the browser window you'll see the issue I'm referring to (screen shot attached). The menu.close() call on mouseleave makes sure any expanded menus are closed but it doesn't change the image url back to the default, it remains as the hoverimageurl.

    Maybe this is a bug? Maybe the .close() call should not only close expanded sub menus but also should reset imageurls.

    Cheers,
    Phill
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 22 Dec 2010 Link to this post

    Hi Phill,

    You're right, the focus returns after leaving the window, though this wasn't a bug but rather intended behavior to ease the keyboard navigation in RadMenu - to move the item focus to the parent item when the child submenu is closed on mouseout. However since applying this by default changes slightly the behavior of RadMenu and mixed usage of mouse and keyboard navigation is seldom used, I've partially reverted the change and modified the way the subitem focus is removed. The fix will be available with the next internal build and the next service pack.

    Let me know if the change helps (along with the previous handler).

    Kind regards,
    Kamen Bundev
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  6. Dobre
    Dobre avatar
    3 posts
    Member since:
    Jul 2012

    Posted 19 Dec 2013 Link to this post

    Nice workaround :) 10x!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017