How can I hive the sliding pannel bar when I click on the page ?

2 posts, 0 answers
  1. Dae Kim
    Dae Kim avatar
    3 posts
    Member since:
    Mar 2006

    Posted 28 Jun 2010 Link to this post

    Hello,
    I am novice telerik radControl user. I used telerik radPannelbar . and Its work properly.I used this:
    http://demos.telerik.com/aspnet-ajax/panelbar/examples/applicationscenarios/slidingpanelbar/defaultcs.aspx

    I want to hide the menu div (Pannel bar) when I click anywhere on page.
    How can I hide the "sliding pannel bar" when I click on the page ?


  2.
  3. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 01 Jul 2010 Link to this post

    Hello Dae Kim,

    You can achieve this by slightly modifying the JavaScript of the example.
    Here is something that should work for you:
    var panelDomElement = $get('<%=RadPanelBar1.ClientID %>');
    var timage = $get('<%= tbimage.ClientID %>');
     
    if (panelDomElement)
    {
        SetUpAnimation(timage.id, Telerik.Web.UI.jSlideDirection.Right, panelDomElement);
    }
     
    var panelDomElementRight = $get('<%=RadPanelBar2.ClientID %>');
    var timageRight = $get('<%= tbimageRight.ClientID %>');
     
    if (panelDomElementRight)
    {
        SetUpAnimation(timageRight.id, Telerik.Web.UI.jSlideDirection.Left, panelDomElementRight);
    }
    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);
     
        $telerik.$(slider).click(function (event) {
     
            element.parentNode.style.visibility="visible";
            element.parentNode.style.display="block";
            if(!expanded) {
                slide.expand();
            }
            else {
                slide.collapse();
            }
            expanded=!expanded;
     
            var collapseSlide=function () {
                slide.collapse();
                expanded=false;
                $telerik.$(document).unbind('click',collapseSlide);
            };
     
            $telerik.$(document).bind('click',collapseSlide);
            event.stopPropagation();
            return false;
        });
    }

    Hope this will help you!


    Regards,
    Nikolay Tsenkov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top