By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,516 Members | 1,178 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,516 IT Pros & Developers. It's quick & easy.

How to Program Two List Boxes to Scroll Together

P: 3
How to Program Two List Boxes to Scroll Together?
Thank you for the help.
Aug 30 '11 #1
Share this Question
Share on Google+
4 Replies


Frinavale
Expert Mod 5K+
P: 9,731
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
Sep 1 '11 #2

P: 3
Thank you very much for your replay. Could you give me example code how to do that?
Thank you.
Sep 1 '11 #3

Frinavale
Expert Mod 5K+
P: 9,731
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):

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.   <style type="text/css">
  4.     div.scroll
  5.     {
  6.       height:100px;
  7.       width:100px;
  8.       overflow:scroll;
  9.     }
  10.   </style>
  11. </head>
  12. <body>
  13.   <div class="scroll">
  14.     You can use the overflow property when 
  15.     you want to have better control of the layout. 
  16.     The default value is visible.
  17.   </div>
  18. </body>
Here is how you would use an inline CSS style to achieve the same thing:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head></head>
  3. <body>
  4.   <div style="height:100px; height:width; overflow:scroll;">
  5.     You can use the overflow property when 
  6.     you want to have better control of the layout. 
  7.     The default value is visible.
  8.   </div>
  9. </body>
Here is how you would set the style of an ASP.NET Panel using css inline styles:
Expand|Select|Wrap|Line Numbers
  1.   <asp:Panel style="height:100px; width:100; overflow:scroll;">
  2.     You can use the overflow property when 
  3.     you want to have better control of the layout. 
  4.     The default value is visible.
  5.   </asp:Panel>
  6.  

Here is how you would set the CSS class for the Panel:
Expand|Select|Wrap|Line Numbers
  1. <!-- 
  2. You would have to have the following CSS style 
  3. defined somewhere accessible to the page:
  4.   <style type="text/css">
  5.     div.scroll
  6.     {
  7.       height:100px;
  8.       width:100px;
  9.       overflow:scroll;
  10.     }
  11.   </style>-->
  12.  
  13.   <asp:Panel CssClass="scroll">
  14.     You can use the overflow property when 
  15.     you want to have better control of the layout. 
  16.     The default value is visible.
  17.   </asp:Panel>
  18.  

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.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.   <script type="text/javascript">
  4.     function scrollDiv(controllingElement, controlledElementID)
  5.     {
  6.         var controlledElement = document.getElementById(controlledElementID);
  7.         controlledElement.scrollTop = controllingElement.scrollTop;
  8.         controlledElement.scrollLeft = controllingElement.scrollLeft;
  9.     }
  10.   </script>
  11. </head>
  12. <body>
  13.  
  14.   <div id="div1" onscroll="scrollDiv(this,'div2');" style="overflow:scroll; height:100; width:70; border:solid 1px blue; float:left; margin:10;">
  15.     I am demonstrating how to scroll two 
  16.     sections of the page with one scroll bar...
  17.     In here you should place your ListBox instead of text.
  18.     Scroll more to show more text. 
  19.     This is a lot of text that needs to be scrolled for
  20.     demonstration purposes.
  21.   </div>
  22.  
  23.   <div id="div2" onscroll="scrollDiv(this,'div1');" style="overflow:scroll; height:100; width:70; float:left; border:solid 1px green;  margin:10;">  
  24.     I am demonstrating how to scroll two 
  25.     sections of the page with one scroll bar... 
  26.     In here you should place your ListBox instead of text.
  27.     Scroll more to show more text.
  28.     This is a lot of text that needs to be scrolled for
  29.     demonstration purposes.
  30.   </div>
  31.   <p style="clear:both">
  32.   You could set one of these div's to have an 
  33.   overflow style of hidden if you want to.</p>
  34. </body>
  35. </html>
-Frinny
Sep 1 '11 #4

P: 3
Thank you very much for your quick responce.
Sep 2 '11 #5

Post your reply

Sign in to post your reply or Sign up for a free account.