• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 654
  • Last Modified:

scroll divs simultaneously

Hi Guys -

how do i get two divs with scrollbars and have scroll simultaneously. i mean if i scroll one div the other div should also scroll accordingly?

Can this be achieved?

Thank You
0
jagadeesh_motamarri
Asked:
jagadeesh_motamarri
  • 4
  • 3
1 Solution
 
Eternal_StudentCommented:
Why don't you put the content in the same div and use columns? Controlling two divs with the scroll on one seems a bit strange to me.
0
 
jagadeesh_motamarriAuthor Commented:
well..... i actually need two separate divs with scroll bars on each of them. Scrolling in one div should trigger scrolling on the other div as well.

I basically need this functionality because i have to compare two different sections of data which has same number of fields.
0
 
TNameCommented:
Hi, have a look at this - scroll the lower div manually:

<html>
<head>
<script>
function scrollIt(obj){
  var t=document.getElementById('txt');
  var q=obj.scrollTop;
  t.value=q+' px';
  document.getElementById('scroll1').scrollTop=q;

}
</script>
<style>
div {width: 400px; height: 100px; overflow-y:scroll; border: 1px solid #444;}
</style>
</head>
<body>
<div id="scroll1" >
<p>
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
</p>
</div>
<br><br><br><br>
<div id="scroll1" onScroll="scrollIt(this);">
<p>
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
</p>
</div>
<br><br><br><br>
<input type="text" id="txt">
</body>
</html>
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
TNameCommented:
A simplified version that works both ways - scroll any of the divs to make the other one scroll too:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
div {width:400px; height:100px; overflow-y:scroll; border:1px solid #000;}
</style>
</head>
<body>
<div id="scroll1" onScroll="document.getElementById('scroll2').scrollTop=this.scrollTop;">
  <p>
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
  </p>
</div>
<br><br><br><br>
<div id="scroll2" onScroll="document.getElementById('scroll1').scrollTop=this.scrollTop;">
  <p>
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
  </p>
</div>
</body>
</html>
0
 
TNameCommented:
One last version  ;)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
function scrollIt(obj, otherId){
  var t=document.getElementById('txt');
  var q=obj.scrollTop;
  t.value=q;
  document.getElementById(otherId).scrollTop=q;
}
</script>
<style>
div {width:400px; height:100px; overflow-y:scroll; border:1px solid #333; margin:40px; padding-left:4px;}
input  {margin-left:40px; width:40px; text-align:right;}
</style>
</head>
<body>
<div id="scroll1" onScroll="scrollIt(this, 'scroll2')">
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>  
</div>
<div id="scroll2" onScroll="scrollIt(this, 'scroll1')">
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
</div>
<input type="text" id="txt"> <span style="vertical-align:15%; font-weight:bold;">px</span>
</body>
</html>


0
 
jagadeesh_motamarriAuthor Commented:
Hi TName -

That looks pretty good. But how about the horizontal scroll bars.


Thank You,

0
 
TNameCommented:
>But how about the horizontal scroll bars.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
function scrollIt(obj, otherId){
  var t=document.getElementById('txt');
  var t2=document.getElementById('txt2');
  var q=obj.scrollTop;  
  var h=obj.scrollLeft;  
  t.value=q;
  t2.value=h;
  document.getElementById(otherId).scrollTop=q;
  document.getElementById(otherId).scrollLeft=h;
}
</script>
<style>
div {width:400px; height:100px; overflow:scroll; border:1px solid #333; margin:40px; padding-left:4px;}
input  {margin-left:40px; width:40px; text-align:right;}
</style>
</head>
<body>
<div id="scroll1" onScroll="scrollIt(this, 'scroll2')">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <br>    
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>  
    bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</div>
<div id="scroll2" onScroll="scrollIt(this, 'scroll1')">
    ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br>
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
    ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>
<input type="text" id="txt"> <span style="vertical-align:15%; font-weight:bold;">px</span>
<input type="text" id="txt2"> <span style="vertical-align:15%; font-weight:bold;">px</span>
</body>
</html>
0
 
jagadeesh_motamarriAuthor Commented:
Wonderful!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now