M
Mark Szlazak
The following code fails in Firefox to get at selected text in the
right-side textarea. Any help would be appreciated.
<html>
<head>
<script>
var agt = navigator.userAgent.toLowerCase();
var safari = ((agt.indexOf('safari') != -1) && (agt.indexOf('mac') !=
-1))? true:false;
var opera = (window.opera)? true:false;
var ie = (document.all && !safari && !opera)? true:false;
var moz = (document.getElementById && !safari && !opera && !ie)?
true:false;
var i, str, lineHeight = 16;
function setScrollBar (ta, sb) {
var textareaBorderWidth = 2;
sb.style.left = ta.offsetParent.offsetParent.offsetLeft +
ta.offsetParent.offsetLeft + ta.offsetLeft + ta.clientWidth +
textareaBorderWidth + 1;
sb.style.top = ta.offsetParent.offsetParent.offsetTop +
ta.offsetParent.offsetTop + ta.offsetTop + textareaBorderWidth;
sb.style.height = ta.clientHeight;
sb.style.width = 16;
}
function syncScrollBars (sb1, sb2, ta1, ta2) {
sb1.onscroll = function() {
ta1.scrollTop = this.scrollTop;
ta2.scrollTop = this.scrollTop;
sb2.scrollTop = this.scrollTop;
}
sb2.onscroll = function() {
ta1.scrollTop = this.scrollTop;
ta2.scrollTop = this.scrollTop;
sb1.scrollTop = this.scrollTop;
}
}
function syncTextareas (ta1, ta2) {
ta1.onscroll = function (evt) {
ta2.scrollTop = this.scrollTop;
}
ta2.onscroll = function (evt) {
ta1.scrollTop = this.scrollTop;
}
}
onload = function () {
if (!moz) syncTextareas (document.getElementById('ta1'),
document.getElementById('ta2'));
else {
syncScrollBars (document.getElementById('sb1'),
document.getElementById('sb2'), document.getElementById('ta1'),
document.getElementById('ta2'));
setScrollBar(document.getElementById('ta1'),
document.getElementById('sb1'));
setScrollBar(document.getElementById('ta2'),
document.getElementById('sb2'));
}
}
</script>
</head>
<body>
<form name="f">
<table border=0 cellpadding=0 cellspacing=0>
<tr valign="top">
<td>
<textarea id="ta1" rows=10 cols=40>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20</textarea>
</td>
<td> </td>
<td>
<textarea id="ta2" rows=5 cols=40>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20</textarea>
<input type="button" value="show selection"
onclick="var ta = this.form.ta2;
if (document.selection) {
var range = document.selection.createRange();
if (range.parentElement() == ta)
alert(range.text);
}
else if (ta.selectionStart)
alert(ta.value.substring(ta.selectionStart, ta.selectionEnd));
else alert('no selection detected');"</td>
</tr>
<tr>
</table>
</form>
<script>
if (moz) {
str = "<div id=\"sb1\" style=\"position: absolute; overflow:
auto;\">";
for (i = 0; i <
Math.round((document.getElementById('ta1').scrollHeight - 70) /
lineHeight); i++)
str += '<br>';
str += "<\/div>";
str += "<div id=\"sb2\" style=\"position: absolute; overflow:
auto;\">";
for (i = 0; i < Math.round(document.getElementById('ta2').scrollHeight
/ lineHeight); i++)
str += '<br>';
str += "<\/div>";
document.write(str);
}
</script>
</body>
</html>
right-side textarea. Any help would be appreciated.
<html>
<head>
<script>
var agt = navigator.userAgent.toLowerCase();
var safari = ((agt.indexOf('safari') != -1) && (agt.indexOf('mac') !=
-1))? true:false;
var opera = (window.opera)? true:false;
var ie = (document.all && !safari && !opera)? true:false;
var moz = (document.getElementById && !safari && !opera && !ie)?
true:false;
var i, str, lineHeight = 16;
function setScrollBar (ta, sb) {
var textareaBorderWidth = 2;
sb.style.left = ta.offsetParent.offsetParent.offsetLeft +
ta.offsetParent.offsetLeft + ta.offsetLeft + ta.clientWidth +
textareaBorderWidth + 1;
sb.style.top = ta.offsetParent.offsetParent.offsetTop +
ta.offsetParent.offsetTop + ta.offsetTop + textareaBorderWidth;
sb.style.height = ta.clientHeight;
sb.style.width = 16;
}
function syncScrollBars (sb1, sb2, ta1, ta2) {
sb1.onscroll = function() {
ta1.scrollTop = this.scrollTop;
ta2.scrollTop = this.scrollTop;
sb2.scrollTop = this.scrollTop;
}
sb2.onscroll = function() {
ta1.scrollTop = this.scrollTop;
ta2.scrollTop = this.scrollTop;
sb1.scrollTop = this.scrollTop;
}
}
function syncTextareas (ta1, ta2) {
ta1.onscroll = function (evt) {
ta2.scrollTop = this.scrollTop;
}
ta2.onscroll = function (evt) {
ta1.scrollTop = this.scrollTop;
}
}
onload = function () {
if (!moz) syncTextareas (document.getElementById('ta1'),
document.getElementById('ta2'));
else {
syncScrollBars (document.getElementById('sb1'),
document.getElementById('sb2'), document.getElementById('ta1'),
document.getElementById('ta2'));
setScrollBar(document.getElementById('ta1'),
document.getElementById('sb1'));
setScrollBar(document.getElementById('ta2'),
document.getElementById('sb2'));
}
}
</script>
</head>
<body>
<form name="f">
<table border=0 cellpadding=0 cellspacing=0>
<tr valign="top">
<td>
<textarea id="ta1" rows=10 cols=40>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20</textarea>
</td>
<td> </td>
<td>
<textarea id="ta2" rows=5 cols=40>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20</textarea>
<input type="button" value="show selection"
onclick="var ta = this.form.ta2;
if (document.selection) {
var range = document.selection.createRange();
if (range.parentElement() == ta)
alert(range.text);
}
else if (ta.selectionStart)
alert(ta.value.substring(ta.selectionStart, ta.selectionEnd));
else alert('no selection detected');"</td>
</tr>
<tr>
</table>
</form>
<script>
if (moz) {
str = "<div id=\"sb1\" style=\"position: absolute; overflow:
auto;\">";
for (i = 0; i <
Math.round((document.getElementById('ta1').scrollHeight - 70) /
lineHeight); i++)
str += '<br>';
str += "<\/div>";
str += "<div id=\"sb2\" style=\"position: absolute; overflow:
auto;\">";
for (i = 0; i < Math.round(document.getElementById('ta2').scrollHeight
/ lineHeight); i++)
str += '<br>';
str += "<\/div>";
document.write(str);
}
</script>
</body>
</html>