M
Mark
How do I scroll two textareas in sync with FireFox/Mozilla? The IE
solution has been posted before by Martin Honnen.
solution has been posted before by Martin Honnen.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.
You should upgrade or use an alternative browser.
M
Mark
Mark said:How do I scroll two textareas in sync with FireFox/Mozilla? The IE
solution has been posted before by Martin Honnen.
No one has answered and a bit more searching seems to say that a bug
prevents the textarea onscroll event from firing in past or current
versions of Mozilla or Firefox.
The following code/hack seems to work in Firefox 1.01 on Win2k. It
aligns a appropriately sized DIV with scrollbars so it completely
covers the scrollbars of the lower textarea. This DIV's scrollbar is
used to synchronously scroll both upper and lower textareas.
Has anyone got some other/better work arounds?
<html>
<head>
<script>
</script>
</head>
<body>
<textarea id="ta1" rows=5 cols=80>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20</textarea>
<textarea id="ta2" rows=5 cols=80>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20</textarea>
<div onscroll="if (document.getElementById) {
document.getElementById('ta1').scrollTop = this.scrollTop;
document.getElementById('ta2').scrollTop = this.scrollTop;
}"
style="position: absolute; top: 113; left:654; height: 96px; width:
16px; overflow: auto;">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
R
rh
Mark said:No one has answered and a bit more searching seems to say that a bug
prevents the textarea onscroll event from firing in past or current
versions of Mozilla or Firefox.
The following code/hack seems to work in Firefox 1.01 on Win2k. It
aligns a appropriately sized DIV with scrollbars so it completely
covers the scrollbars of the lower textarea. This DIV's scrollbar is
used to synchronously scroll both upper and lower textareas.
Has anyone got some other/better work arounds?
It's not at all clear why you would want to do this, but presumably
this would only make sense if the content of the textareas is
equivalenced and synchronized as well.
An alternative, for FF and Netscape, would be to sync on
mouseup/mousemove (and keyup) events in the textarea elements, as it
seems mouse events are delivered when mouse activation is initiated
within the scroll bar areas.
This won't work for Mozilla, as it doesn't appear to deliver updated
scrollTop/Left values for the textareas.
../rh
S
Stephen Chalmers
Mark said:How do I scroll two textareas in sync with FireFox/Mozilla? The IE
solution has been posted before by Martin Honnen.
If this type of event isn't available, you can use simulate it using
periodic monitoring. The following example demonstrates the principle and
works in I.E. and Mozilla but not Opera. Under I.E. it works more smoothly
if the function is called also by the onscroll event:
<textarea id='ta1'onscroll="scrollTa()) ...... >
and you can experiment with shorter timeout the delays.
You don't say whether you want master/slave or dual master scrolling,
however if you want master/slave, remove the redundant code.
<script type='text/javascript'>
var ref1=document.getElementById('ta1'),
ref2=document.getElementById('ta2');
var vPos1=ref1.scrollTop,vPos2=ref2.scrollTop;
function scrollTa()
{
if(ref1.scrollTop!=vPos1)
vPos1=ref2.scrollTop=ref1.scrollTop;
else
if(ref2.scrollTop!=vPos2)
vPos2=ref1.scrollTop=ref2.scrollTop;
setTimeout('scrollTa()',250)
}
window.onload=scrollTa;
</script>
M
Mark Szlazak
rh said:It's not at all clear why you would want to do this, but presumably
this would only make sense if the content of the textareas is
equivalenced and synchronized as well.
Yes that's exactly it. Data values are transform into others and it is
very convenient to sync data pairs.
An alternative, for FF and Netscape, would be to sync on
mouseup/mousemove (and keyup) events in the textarea elements, as it
seems mouse events are delivered when mouse activation is initiated
within the scroll bar areas.
This won't work for Mozilla, as it doesn't appear to deliver updated
scrollTop/Left values for the textareas.
../rh
I haven't tried my posted solution in Mozilla but any solution should
work their as well.
Thanks for your suggestions.
Mark.
M
Mark Szlazak
Thanks, I'll check this one out as well.
Cheers. Mark.
Cheers. Mark.
Ask a Question
Want to reply to this thread or ask your own question?
You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.
Similar Threads
Forum statistics
Latest Threads
-
What steps are the key steps involved in designing a product?
- Started by remotedevelopers
-
How to fetch and console.log all items from an associative array
- Started by John Keets
-
The *Best Python Cheat Sheet
- Started by kmh
-
Programming Blog
- Started by WhiteCube
-
Why getting 404 errors?
- Started by IBMJunkman
-
Wonky image crisis
- Started by OBXKH
-
JS exercise ''find the mistake'' not understood well
- Started by Chris
-
How does Mobile App Development company approach user experience (UX)?
- Started by remotedevelopers
-
Media query issue
- Started by OBXKH