Sliding panelbar animation issue

[Paul]

I followed the code below to animate the panel bar to slide left/right:

if (pnlHelpPanel) {
                SetUpAnimation(imgHelpPanelTab.id, Telerik.Web.UI.jSlideDirection.Left, pnlHelpPanel);
            }

            function SetUpAnimation(image, direction, element) {
                element.style.position = "relative";
                var slider = document.getElementById(image);

                var expanded = false;

                var expandAnimation = new Telerik.Web.UI.AnimationSettings({});
                var collapseAnimation = new Telerik.Web.UI.AnimationSettings({});

                var slide = new Telerik.Web.UI.jSlide(element, expandAnimation, collapseAnimation, false);

                slide.initialize();

                slide.set_direction(direction);

                slider.onclick = function () {
                    element.parentNode.style.visibility = "visible";
                    element.parentNode.style.display = "block";
                    if (!expanded) {
                        slide.expand();
                    } else {
                        slide.collapse();
                    }
                    expanded = !expanded;
                    return false;
                } // end onlick function definition

            } // end SetUpAnimation

It works well doing a sliding animation left/right. However, I get an issue when trying to do the animation top/bottom. i changed the jSlideDirection to bottom and there was no sliding animation. Am I doing something wrong on my end or is there no animation for top/bottom?

[Hristo Valyavicharski]

Hi Paul,

PanelBar has its own expand animation. Please look here:
http://demos.telerik.com/aspnet-ajax/panelbar/examples/functionality/expandanimation/defaultcs.aspx

Regards,
Hristo Valyavicharski
Telerik

 

 

[Paul]

Im talking about the feature here, http://demos.telerik.com/aspnet-ajax/panelbar/examples/applicationscenarios/slidingpanelbar/defaultcs.aspx , where you use a link/button to show/hide the entire panelbar of which provides a sliding animation. I only see sliding animation for left/right but not top/bottom. Is there a way to implement the sliding animation for top/bottom?

[Hristo Valyavicharski]

Hi Paul,

Just change the slide direction:

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
     <script type="text/javascript">
          var leftPanel = $get('<%=RadPanelBar1.ClientID %>');
          var leftButton = document.getElementById( "left-button" );

          if (leftPanel) {
               SetUpAnimation(leftButton, Telerik.Web.UI.jSlideDirection.Down, leftPanel);
          }

          var rightPanel = $get('<%=RadPanelBar2.ClientID %>');
          var rightButton = document.getElementById( "right-button" );

          if (rightPanel) {
               SetUpAnimation(rightButton, Telerik.Web.UI.jSlideDirection.Down, rightPanel);
          }

          function SetUpAnimation(button, direction, element) {
               element.style.position = "relative";

               var expanded = false;

               var expandAnimation = new Telerik.Web.UI.AnimationSettings({});
               var collapseAnimation = new Telerik.Web.UI.AnimationSettings({});

               var slide = new Telerik.Web.UI.jSlide(element, expandAnimation, collapseAnimation, false);

               slide.initialize();

               slide.set_direction(direction);

               button.onclick = function() {
                    element.parentNode.style.visibility = "visible";
                    element.parentNode.style.display = "block";
                    if (!expanded) {
                         slide.expand();
                    }
                    else {
                         slide.collapse();
                    }
                    expanded = !expanded;
                    return false;
               }
          }
     </script>
</telerik:RadScriptBlock>

I hope this helps.

Regards,
Hristo Valyavicharski
Telerik