I have websplitter control and it has 2 panes.In first pane i have placed the div control.My requirement is that when 1st pane is collapse ,i want to show the div control in first pane to be sliding on button click by javascript
Hi Prajakta,
I reread title and description few times and it was not clear to me what you need to achive.
If "sliding div" is a child of splitter pane, which was already collapsed, then it will be invisible and there is nothing to slide.
What means "div sliding above splitterpane"? Does it mean that orientation of WebSplitter is horizontal and div is located in top pane?
Which "button click" is used? Is it a custom button/input located somewhere (maybe within top pane) or it is collapse button used by splitter bar?
Should that sliding-div do its slide-action before pane-collapse and pane should be collapsed after sliding was finished, or collapsing of pane should animated and div should be unchanged?
Which direction should be used for div-slide action? Expand up, collapse down, expand/collapse left/right, be visible after collapse/expand, replace collapsed pane, etc?
The WebSplitter does not have settings for animation, therefore application should come up with custom implementation.
I can help with processing client side events of WebSplitter and usage of public properties exposed by splitter and panes. It would be great if you provide exact description of expected functionality.
My application use web splitter with 2 panes
This is how my screen looks on page load.On click of arrow the 1st pane gets collapse and screen looks like following image.
The div in gray color is div outside splitter control and i m showing it on arrow click of image1.
Now code for gray color div.
on click of divarrow 1st splitter-pane gets expanded and screen looks like 1st image.What i want to achieve is i click anywhere on divgray the screen should look like following image.In this screen you can see that contents of spliiterpane1 are collapsed on splitterpane2 and there is no splitter bar.the splitterpane1 just slides on pane2.
as click anywhere on screen splitter-pane disappears(means collapsed or hidden) and screen again looks like image2.Also i require the effect of sliding like
j query when splitter pane gets collapse and expand.
Is it possible to implement?
image2
image3
The WebSplitter does not support hidding splitter bar and overlapping splitter panes. The best I can do for you, is to give example how to change size (width or height depending on orientation) of a splitter pane and to get reference to internal element, which represents splitter bar. Below example reduces size of 1st pane in a loop (like animated collapse), but instead of real collapse and hiding pane completely, it stops at size equals to 10px and hides splitter bar located between 1st and 2nd panes.
Note: if you want expand with similar functionality, then you may show splitter bar and after that increase size of 1st splitter pane to desired value. Size of pane within pane.set/get_size is measured in pixels and it should be number, but not string.
<script type="text/javascript"> function collapse() { var splitter = $find("WebSplitter1"); var pane = splitter.getPaneAt(0); var size = pane.get_size(); var timer = setInterval(function() { size -= 20; pane.set_size(Math.max(10, size)); if (size <= 10) { clearInterval(timer); var barFor1stPane = splitter._elements['b0']; // or //var barFor1stPane = $(splitter.get_element()).find("[mkr='b0']")[0]; barFor1stPane.style.display = 'none'; } }, 30); }</script>