This is a migrated thread and some comments may be shown as answers.

Menu item remains in hover state when cursor leaves browser

4 Answers 155 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Phill Hodgkinson
Top achievements
Rank 1
Phill Hodgkinson asked on 19 Dec 2010, 04:03 AM
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

4 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 21 Dec 2010, 11:32 PM
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.
0
Phill Hodgkinson
Top achievements
Rank 1
answered on 22 Dec 2010, 06:26 AM
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
0
Kamen Bundev
Telerik team
answered on 22 Dec 2010, 02:06 PM
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.
0
Dobre
Top achievements
Rank 1
answered on 19 Dec 2013, 01:26 PM
Nice workaround :) 10x!
Tags
Menu
Asked by
Phill Hodgkinson
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Phill Hodgkinson
Top achievements
Rank 1
Dobre
Top achievements
Rank 1
Share this question
or