OBOUT - ASP.NET Splitter - Synchronize Scroll example

Quick Links

Purchase

ASP.NET Splitter - Synchronize Scroll - File Compare

Try to scroll one of the panels content.
The other panel content will scroll also.

file 1

1 <%@ Register TagPrefix="obspl" Namespace="OboutInc.Splitter2" Assembly="obout_Splitter2_Net" %>
2 <%@ Page Language="C#" %>
3 <html>
4   <head />
5   <body>
6       <obspl:Splitter id="splDV" runat="server" StyleFolder="/splitter/splitterstyles/default" CookieDays="0">
7           <LeftPanel WidthDefault="140" WidthMin="50" WidthMax="400">
8               <header height="50">
9                  <div style="width:100%;height:100%;background-color:#ebe9ed" class="tdText" align="center">
10                      <br />
11                      optional left header
12                  </div>
13              </header>
14              <content>
15                  <div class="tdText" style="padding-left:10px;padding-top:10px">
16                      <br />
17                      left panel content
18                  </div>
19              </content>
20              <footer height="50">
21                  <div style="width:100%;height:100%;background-color:#ebe9ed" class="tdText" align="center">
22                      <br />
23                      optional left footer
24                  </div>
25              </footer>
26          </LeftPanel>
27          <RightPanel>
28              <header height="70">
29                  <div style="width:100%;height:100%;background-color:#ebe9ed" class="tdText" align="left">
30                      <br />
31                      Try to move the splitter separator. <br />
32                      The splitter is not resizable.
33                  </div>
34              </header>
35              <content>
36                  <div class="tdText" style="padding-left:10px;padding-top:10px">
37                      <br />
38                      right panel content
39                  </div>
40              </content>
41              <footer height="50">
42                  <div style="width:100%;height:100%;background-color:#ebe9ed" class="tdText" align="center">
43                      <br />
44                      optional right footer
45                  </div>
46              </footer>
47          </RightPanel>
48      </obspl:Splitter>
49  </body>
50 </html>

file 2

1 <%@ Register TagPrefix="obspl" Namespace="OboutInc.Splitter2" Assembly="obout_Splitter2_Net" %>
2 <%@ Page Language="C#" Debug="true" %>
3 <html>
4   <head>
5       <script language="javascript">
6           // add load event
7           function addLoadEvent(func) {
8               var oldonload = window.onload;
9               if (typeof window.onload != 'function') {
10              window.onload = func;
11              } else {
12                  window.onload = function() {
13                      if (oldonload) {
14                          oldonload();
15                      }
16                      func();
17                  }
18              }
19          }
20      </script>
21  </head>
22  <body>
23      <obspl:Splitter id="splDV" runat="server" StyleFolder="/splitter/splitterstyles/default">
24          <LeftPanel WidthDefault="140" WidthMin="50" WidthMax="400">
25              <header height="50">
26                  <div style="width:100%;height:100%;background-color:#ebe9ed" class="tdText" align="center">
27                      <br />
28                      optional left header
29                  </div>
30              </header>
31              <content>
32                  <div class="tdText" style="padding-left:10px;padding-top:10px">
33                      <br />
34                      left panel content
35                  </div>
36              </content>
37              <footer height="50">
38                  <div style="width:100%;height:100%;background-color:#ebe9ed" class="tdText" align="center">
39                      <br />
40                      optional left footer
41                  </div>
42              </footer>
42          </LeftPanel>
44          <RightPanel>
45              <content>
46                  <div class="tdText" style="padding-left:10px;padding-top:10px">
47                      <br />
48                      right panel content here ...
49                  </div>
50              </content>
51          </RightPanel>
52      </obspl:Splitter>
53  </body>
54 </html>

The feature also works in horizontal splitter.

Example code

    <obspl:Splitter SynchronizeScroll="true" id="spl1" runat="server" StyleFolder="styles/default">
        <LeftPanel>
            <Content>
                ... Left Panel content here ...
    ...

VB.NET

spl1.SynchronizeScroll = true

spl1.SynchronizeScroll = true;

JavaScript

spl1.SynchronizeScroll(true);

"Your TreeView component with the use of the Tree DB component are a real winner. I am using this with my CMS applications that allow the user to order the documents with a simple drag and drop. It's brilliant and my clients now have a more intuitive application."

Ben de Groot