How to Program Two List Boxes to Scroll Together

**Frinavale** · Sep 1 '11, 02:38 PM

That will require JavaScript implementation.

You will have to place the ListBox's into <div>s (or asp.net Panels which are rendered as HTML <div>s)

Then use CSS styling to set the height and width of the <div>/Panels. Also, use CSS styling to set the overflow style to "scroll" for one or both of the <div>s/Panels.

Once you've done that you will have to implement JavaScript that will match the scrolling property of both <div>s/Panels.

-Frinny

**Latchy** · Sep 1 '11, 03:23 PM

Thank you very much for your replay. Could you give me example code how to do that?
Thank you.

**Frinavale** · Sep 1 '11, 05:05 PM

Here is an example of how to set the style of an HTML <div> tag so that it uses the overflow:scroll style (taken directly out of the link I posted in my last reply):

Code:

<html>
<head>
  <style type="text/css">
    div.scroll
    {
      height:100px;
      width:100px;
      overflow:scroll;
    }
  </style>
</head>
<body>
  <div class="scroll">
    You can use the overflow property when 
    you want to have better control of the layout. 
    The default value is visible.
  </div>
</body>

Here is how you would use an inline CSS style to achieve the same thing:

Code:

<html>
<head></head>
<body>
  <div style="height:100px; height:width; overflow:scroll;">
    You can use the overflow property when 
    you want to have better control of the layout. 
    The default value is visible.
  </div>
</body>

Here is how you would set the style of an ASP.NET Panel using css inline styles:

Code:

  <asp:Panel style="height:100px; width:100; overflow:scroll;">
    You can use the overflow property when 
    you want to have better control of the layout. 
    The default value is visible.
  </asp:Panel>

Here is how you would set the CSS class for the Panel:

Code:

<!-- 
You would have to have the following CSS style 
defined somewhere accessible to the page:
  <style type="text/css">
    div.scroll
    {
      height:100px;
      width:100px;
      overflow:scroll;
    }
  </style>-->

  <asp:Panel CssClass="scroll">
    You can use the overflow property when 
    you want to have better control of the layout. 
    The default value is visible.
  </asp:Panel>

So, the above code examples show how you can set the CSS style for an HTML <div> or an ASP.NET Panel control so that they show scroll bars.

Now you will have to implement a method that will handle the JavaScript onscroll event for the div/Panel. In that method you should use the scrollTop and scrollLeft properties of the controlling div to change the scroll position in the other div/panel.

Here is a HTML example that has 2 <div> elements that have synchronized scrolling. You should read the article about how to use JavaScript in ASP.NET so that you fully understand how JavaScript and ASP.NET work together.

Code:

<html>
<head>
  <script type="text/javascript">
    function scrollDiv(controllingElement, controlledElementID)
    {
        var controlledElement = document.getElementById(controlledElementID);
        controlledElement.scrollTop = controllingElement.scrollTop;
        controlledElement.scrollLeft = controllingElement.scrollLeft;
    }
  </script>
</head>
<body>

  <div id="div1" onscroll="scrollDiv(this,'div2');" style="overflow:scroll; height:100; width:70; border:solid 1px blue; float:left; margin:10;">
    I am demonstrating how to scroll two 
    sections of the page with one scroll bar...
    In here you should place your ListBox instead of text.
    Scroll more to show more text. 
    This is a lot of text that needs to be scrolled for
    demonstration purposes.
  </div>

  <div id="div2" onscroll="scrollDiv(this,'div1');" style="overflow:scroll; height:100; width:70; float:left; border:solid 1px green;  margin:10;">  
    I am demonstrating how to scroll two 
    sections of the page with one scroll bar... 
    In here you should place your ListBox instead of text.
    Scroll more to show more text.
    This is a lot of text that needs to be scrolled for
    demonstration purposes.
  </div>
  <p style="clear:both">
  You could set one of these div's to have an 
  overflow style of hidden if you want to.</p>
</body>
</html>

-Frinny

**Latchy** · Sep 2 '11, 03:43 PM

Thank you very much for your quick responce.

How to Program Two List Boxes to Scroll Together

How to Program Two List Boxes to Scroll Together

Comment

Comment

Comment

Comment