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

Sliding panelbar animation issue

3 Answers 16 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 06 May 2014, 06:08 PM
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?

3 Answers, 1 is accepted

Sort by
0
Hristo Valyavicharski
Telerik team
answered on 10 May 2014, 07:09 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Paul
Top achievements
Rank 1
answered on 12 May 2014, 06:12 PM
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?
0
Hristo Valyavicharski
Telerik team
answered on 15 May 2014, 03:23 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
PanelBar
Asked by
Paul
Top achievements
Rank 1
Answers by
Hristo Valyavicharski
Telerik team
Paul
Top achievements
Rank 1
Share this question
or