[Solved] Collapse on mouseout

[David]

I have a rad panel bar Working from a sample. I Added in some javascript to make it move down the side of a page as the user scrolls.

The behavior is - I click an image to open the panelbar and click it again to close the panelbar.

How Can I make this panelbar collapse as soon as someone mouses off of it, like in Visual Studio instead of clicking the button again ?

    <div id="divTopLeft" style="float: left; outline: 0; position: Absolute;" >
        <asp:Image runat="server" ID="tbimage" ImageUrl="images/Navigation-open.jpg"  Style="float: left;
            outline: 0; position: Absolute;" />
    </div>

    <script type="text/javascript">
        var ns = (navigator.appName.indexOf("Netscape") != -1);
        var d = document;
        function JSFX_FloatDiv(id, sx, sy) {
            var el = d.getElementById ? d.getElementById(id) : d.all ? d.all[id] : d.layers[id];
            var px = document.layers ? "" : "px";
            window[id + "_obj"] = el;
            if (d.layers) elel.style = el;
            elel.cx = el.sx = sx; elel.cy = el.sy = sy;
            el.sP = function(x, y) { this.style.left = x + px; this.style.top = y + px; };

            el.floatIt = function() {
                var pX, pY;
                pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
        document.documentElement && document.documentElement.clientWidth ?
        document.documentElement.clientWidth : document.body.clientWidth;
                pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
        document.documentElement.scrollTop : document.body.scrollTop;
                if (this.sy < 0)
                    pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
        document.documentElement.clientHeight : document.body.clientHeight;
                this.cx += (pX + this.sx - this.cx) / 8; this.cy += (pY + this.sy - this.cy) / 8;
                this.sP(this.cx, this.cy);
                setTimeout(this.id + "_obj.floatIt()", 10);
            }
            return el;
        }
        JSFX_FloatDiv("divTopLeft", 0, 0).floatIt();

    </script>








    <div id="menucontainer" class="leftPanelBarContainer">
        <div id="slidingDiv" style="visibility: hidden;" >
            <telerik:RadPanelBar runat="server" Width="155" ID="RadPanelBar1" ExpandMode="FullExpandedItem"
              ><Items>
                 <telerik:RadPanelItem Expanded="True" Text="" BorderWidth="0"  >
                        <ItemTemplate>
                            <uc2:MyNavigation ID="MyNavigation3" runat="server"  ></uc2:MyNavigation>
                        </ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>

            </telerik:RadPanelBar>
        </div>
    </div>





    <script language="javascript" type="text/javascript">

        var panelDomElement = $get('<%=RadPanelBar1.ClientID %>');
        var timage = $get('<%= tbimage.ClientID %>');

        if (panelDomElement) {
            SetUpAnimation(timage.id, Telerik.Web.UI.jSlideDirection.Right, panelDomElement);
        }

        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";

                JSFX_FloatDiv("menucontainer", 20, 0).floatIt();

                if (!expanded) {
                    slide.expand();
                    document.aspnetForm.ctl00_tbimage.src = 'images/Navigation-close.jpg';
                }
                else {
                    slide.collapse();
                    document.aspnetForm.ctl00_tbimage.src = 'images/Navigation-open.jpg';
                }
                expanded = !expanded;
                return false;
            }






        }
    </script>

[Shinu]

Hi David,

Try out the following code snippet to achieve the desired scenario.

ASPX:

<telerik:RadPanelBar ID="RadPanelBar1" OnClientMouseOut="ExpandCollapse"  runat="server">

JS:

function ExpandCollapse(panelbar, args)
 {
  if(args.get_item()!=null)
  {
   if(args.get_item().get_expanded())
   {
      args.get_item().collapse();
   }

  }
 }

Regards
Shinu

[David]

No matter what i did i could not get onclientmouseout to fire from the control. Even when I just had it do alerts.
It had more to do with how I was nesting my divs inside my user control for nav

I did Get this Done ! 
1st   I changed the sample app to always expand on clicking the button.

I don't understand this javascript but it worked.  It's making sure only the top div acts "onmouseout"

        function CloseIt() {

            if (!event.fromElement.contains(event.toElement) && !document.getElementById('menucontainer').contains(event.toElement)) {

                document.getElementById("slidingDiv").style.visibility = "hidden";
                document.getElementById("slidingDiv").style.display = "none";
            }
        }

It doesn't collapse as smotthly as it opens but it works.

Here is the whole block: (with commented code left in )

   <div id="divTopLeft" style="float: left; outline: 0; position: Absolute;" >
        <asp:Image runat="server" ID="tbimage" ImageUrl="images/Navigation-open.jpg"  Style="float: left;
            outline: 0; position: Absolute;" />
    </div>

    <script type="text/javascript">
        var ns = (navigator.appName.indexOf("Netscape") != -1);
        var d = document;
        function JSFX_FloatDiv(id, sx, sy) {
            var el = d.getElementById ? d.getElementById(id) : d.all ? d.all[id] : d.layers[id];
            var px = document.layers ? "" : "px";
            window[id + "_obj"] = el;
            if (d.layers) elel.style = el;
            elel.cx = el.sx = sx; elel.cy = el.sy = sy;
            el.sP = function(x, y) { this.style.left = x + px; this.style.top = y + px; };

            el.floatIt = function() {
                var pX, pY;
                pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
        document.documentElement && document.documentElement.clientWidth ?
        document.documentElement.clientWidth : document.body.clientWidth;
                pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
        document.documentElement.scrollTop : document.body.scrollTop;
                if (this.sy < 0)
                    pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
        document.documentElement.clientHeight : document.body.clientHeight;
                this.cx += (pX + this.sx - this.cx) / 8; this.cy += (pY + this.sy - this.cy) / 8;
                this.sP(this.cx, this.cy);
                setTimeout(this.id + "_obj.floatIt()", 10);
            }
            return el;
        }
        JSFX_FloatDiv("divTopLeft", 0, 0).floatIt();

    </script>








    <div id="menucontainer" class="leftPanelBarContainer" style="width: 155px;" onmouseout="CloseIt();">
        <div id="slidingDiv" style="visibility: hidden; width: 155px;" >
            <telerik:RadPanelBar runat="server" Width="155" ID="RadPanelBar1" ExpandMode="FullExpandedItem" ><Items>
                 <telerik:RadPanelItem Expanded="True" Text="" BorderWidth="0" >
                        <ItemTemplate>
                            <uc2:MyNavigation ID="MyNavigation3" runat="server"  ></uc2:MyNavigation>
                        </ItemTemplate>
                    </telerik:RadPanelItem>
                </Items>

            </telerik:RadPanelBar>
        </div>
    </div>





    <script language="javascript" type="text/javascript">

        var panelDomElement = $get('<%=RadPanelBar1.ClientID %>');
        var timage = $get('<%= tbimage.ClientID %>');

        if (panelDomElement) {
            SetUpAnimation(timage.id, Telerik.Web.UI.jSlideDirection.Right, panelDomElement);
        }

        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";

                JSFX_FloatDiv("menucontainer", 20, 0).floatIt();
                slide.expand();

                /*if (!expanded) {
                    slide.expand();
                    //document.aspnetForm.ctl00_tbimage.src = 'images/Navigation-close.jpg';
                }
                else {
                    slide.collapse();
                    //document.aspnetForm.ctl00_tbimage.src = 'images/Navigation-open.jpg';
                }
                expanded = !expanded;
                return false;
                */
            }

        }

        function CloseIt() {

            if (!event.fromElement.contains(event.toElement) && !document.getElementById('menucontainer').contains(event.toElement)) {

                document.getElementById("slidingDiv").style.visibility = "hidden";
                document.getElementById("slidingDiv").style.display = "none";
            }
        }



    </script>