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