JavaScript Debugging Features of the
VwdCms.SplitterBar ASP.NET Server Control

This is a basic usage of the control except that I have added styles to give it a background image, left border, and right border. To show how the debugging features of the VwdCms.SplitterBar can be used, I added a TextArea to the page so we can see what the SplitterBar is doing when we use it.

The 3 minimum requirements to use the VwdCms.SplitterBar are:
1. Include a runat="server" attribute
2. Give the control an ID
3. Set the LeftResizeTargets property to a control on the page.

Notes:
1. This example also shows how the SplitterBar takes into account the thickness of the table's borders when determining the resizing range as well as the thickness of the left and right borders of the SplitterBar.
2. Always set the table's CellPadding="0".
3. Always set the table's CellSpacing="0".
4. Do not set a css padding on the table or set it to style="padding:0px;".

    <VwdCms:SplitterBar runat="server" ID="vwdSplitter1"
    DebugElement="txtDebug"
    LeftResizeTargets="tdResize1"
    style="background-image:url(images/vsplitter.gif);
    background-position:center center;
    background-repeat:no-repeat;
    border-left:solid 1px black;
    border-right:solid 1px black;" />

This code sample has been automatically colorized by the VwdCms.CodeViewer control, an ASP.NET server control code colorizer that supports HTML, ASPX, XML, C#, and JavaScript code formats.


   

Note: Outputting debugging information severely slows down the UI performance of the SplitterBar.
Debugging Output: (newest events on the top)        

All SplitterBar examples presented here are using a Master Page with the following DOCTYPE declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">