This is a migrated thread and some comments may be shown as answers.
Collapse on mouseout
2 Answers 46 Views
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 09 Jun 2009, 07:30 PM

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> 
      
 

2 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 10 Jun 2009, 06:59 AM
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
0
David
Top achievements
Rank 1
answered on 10 Jun 2009, 03:11 PM
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> 
     



Asked by
David
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
David
Top achievements
Rank 1
Share this question
or