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

Change/remove animation using JavaScript?

1 Answer 54 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Pete
Top achievements
Rank 1
Pete asked on 17 Sep 2013, 04:12 AM
Hello,

I was wondering if there's any way to change (or remove) the RadMenu's animation from the client-side?

Background/more info (optional reading):
I'm setting up a 'page tour' and I'm having trouble positioning elements near menu items. I can get the right RadMenu and RadMenuItem client objects and even tell the parent RadMenuItem to open but when I try to position a div relative to a menu item it displays up the top of the menu. I assume this is because it is basing the position on the menu item's position before the animation takes place. It works fine if I set the ExpandAnimation-Type to "None" but I'd like to have an animation and only disable it when the user is going through the 'page tour'.

Thanks,
Pete

1 Answer, 1 is accepted

Sort by
0
Pete
Top achievements
Rank 1
answered on 17 Sep 2013, 06:49 AM
I've gotten around this issue by using jQuery to change the css of the (parent) div and ul of the menu item. This means the proper position of the menu item is known by the time the relative DIV is shown.

The one issue I ran into is that the position of the (ul element of the) rad menu (item) is completely unknown/not set if the menu hasn't been opened at least once. I got around this by opening the menu and then applying the css changes. Together these changes allowed me to open the menu and relatively position a div around the specified menu item.

Also, in case you're wondering, I disabled the whole menu to prevent the user's mouse-exit from closing the menu I'd just opened.

My code is below, in case it helps anyone (note: element = the js 'a' element of the menu item I wanted to show a div nearby):

var menu = $find('<%=MyMenu.ClientID%>');
 
if (menu) {
    var menuItem = menu.findItemByValue(element.attr("id"));
 
    if (menuItem) {
        menuItem.get_parent().open();
    }
 
    menu.disable();
 
    element.closest("div").css("display", "block");
    element.closest("ul").css("top", "0");
}
Tags
Menu
Asked by
Pete
Top achievements
Rank 1
Answers by
Pete
Top achievements
Rank 1
Share this question
or