Sliding panelbar animation issue

4 posts, 0 answers
  1. Paul
    Paul avatar
    27 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. UI for ASP.NET Ajax is Ready for VS 2017
  4. Paul
    Paul avatar
    27 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?
  5. 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