Sliding panelbar animation issue

4 posts, 0 answers
  1. Paul
    Paul avatar
    28 posts
    Member since:
    Mar 2011

    Posted 06 May 2014 Link to this post

    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?
  2. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 10 May 2014 Link to this post

    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.

     
  3. Paul
    Paul avatar
    28 posts
    Member since:
    Mar 2011

    Posted 12 May 2014 in reply to Hristo Valyavicharski Link to this post

    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?
  4. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 15 May 2014 Link to this post

    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.

     
Back to Top