Change/remove animation using JavaScript?

2 posts, 0 answers
  1. Pete
    Pete avatar
    14 posts
    Member since:
    May 2009

    Posted 16 Sep 2013 Link to this post


    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'.

  2. Pete
    Pete avatar
    14 posts
    Member since:
    May 2009

    Posted 17 Sep 2013 Link to this post

    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) {
        element.closest("div").css("display", "block");
        element.closest("ul").css("top", "0");
Back to Top