Keep scrollbar position for 3 textboxes in sync.

I have 3 textboxes that I need to keep the scrollbar positions in sync so all 3 scroll in unison.

In IE, it works only if you are moving the scrollbar around for just one of the Textboxes.  In this case, it moves the other 2 just fine.   However, if I alternate the textbox that I am moving the scrollbars for, on that first inital switch to a different textbox, it resets all scrollbars to the very top position.  So for instance, If I move the scrollbar in Textbox1 and then move the scrollbar in either Textbox2 or Textbox3, it resets alll of them to be at the very top.

To better illustrate this because I know it's a little confusing to read, I found a website where someone has an example of 2 scrollbars kept in sync.  You can see the "bug" or behavior that I am referring to.   Simply alternate which textbox's scrollbar you are clicking on, and you will see that it will jump up to the top.   This is the same thing I am running into.

http://home.arcor.de/martin.honnen/javascript/200407/test20040714.html

My first initial thought was that this is because IE keeps calling the event because once I move the scrollbar for another textbox, that "onscroll" event will now fire off as well.   However, even if that was the case, I don't see why it would be resetting them.   This appears to be working ok for me in Firefox but for whatever reason, I'm having this issue with IE.


Javascript
function setScrollPosition(control)
{
var top = control.scrollTop;
document.getElementById('<%= Textbox1.ClientID %>').scrollTop = top;
document.getElementById('<%= Textbox2.ClientID %>').scrollTop = top;
document.getElementById('<%= Textbox3.ClientID %>').scrollTop = top;
}
 
 
Code Behind
<asp:TextBox ID="Textbox1" runat="server" TextMode="MultiLine" onscroll="setScrollPosition(this);"></asp:TextBox>
<asp:TextBox ID="Textbox2" runat="server" TextMode="MultiLine" onscroll="setScrollPosition(this);"></asp:TextBox>
<asp:TextBox ID="Textbox3" runat="server" TextMode="MultiLine" onscroll="setScrollPosition(this);"></asp:TextBox>

Open in new window

amb1313Asked:
Who is Participating?
 
amb1313Author Commented:
I've tried out various ideas and it just looks like there is not a way to do this.  I am closing this question as it appears to be the behavior that IE has for this situation.
0
 
amb1313Author Commented:
Just to add to this some more.   This appears to be something that affects any textbox with a scrollbar...Not just what I am trying to do with Javascript as mentioned in the initial post.

I created a textbox with the Textmode set to Multiline.   I then put a bunch of information in that textbox and moved the scrollbar.   If I then put focus on something else on the page (click off the textbox), and then click back on the scrollbar (without clicking inside the textbox), it forces the scrollbar to the very top.

Any ideas??
0
 
CB_ThirumalaiCommented:
I have just made a sample out of this and realised two things.
1. I don't see the scroll position to be forced to the top unless it is clicked on the scroll bar.  This is because when you do that, the focus will automatically forced to that text area and by default WILL be forced to the top of the page.  Work around is to click INSIDE the the textbox.  I have written a function to force the scroll to where it is current located, but, this has not helped, because, the onfocus default behaviour fires before this.  There should have been some function like onbeforefocus (which is not there)

2. The value inside the text area should be equal and the number of rows should also be equal, for an expected behaviour.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.