twee textarea's tegelijk scrollen

Door Adriaan op 05-10-2008 18:50

1.068 views

ik wil graag dat er twee textarea's tegelijk gaan scrollen. de textarea's staan naast elkaar en als dus de ene textarea naar beneden wordt gescrolled dan moet die andere textarea hem gelijk volgen.

om het probleem iets realistischer te maken: er staan twee textarea's naast elkaar, in de linker staan regelnummers, in de rechter staat de html code. de regelnummers moeten natuurlijk wel in lijn blijven met de coderegels als je gaat scrollen. het is voor een cms-systeempje.

dit lijkt me iets voor javascript, maar daarmee heb ik niets kunnen vinden.

wie kan mij op weg helpen?

- SanThe -

05-10-2008 19:13

Waarom zo moeilijk en waarom niet gewoon in één textarea?

Adriaan

05-10-2008 19:15

omdat je dan met kopieeren de regelnummers mee-selecteerd.
dan is niet gewenst bij het editen

Rens nvt

05-10-2008 20:43

Zoek even op google naar het onscroll event van javascript in combinatie met textarea's, ik krijg er wel wat hits op, maar heb het onscroll event nog niet eerder toegepast op textarea's.

Wessel Johnson

05-10-2008 20:55

<?php

$str = "
hoi test
";

for ($i = 0;$i < 7;$i++) {
	$str .= $str;
}

$aantalregels = substr_count($str, '
');

?>
<div style="overflow: scroll; height: 100%">
<div style="width: 40px; float:left; font-size: 16px; font-family: arial;">
<?php
for ($i = 0;$i < $aantalregels+1; $i++) {
	if ($i != 0) echo '<br>';
	echo ($i+1).'.';
}
?></div>
<textarea style="font-size: 16px; font-family: arial; position: relative; top: -1px; border: none;" rows="<?php echo $aantalregels+1; ?>" width="90%">
<?php echo $str; ?>
</textarea>
</div>

Beetje snel ge-code, maar hiermee moet je er uit mee kunnen komen :)

Het enige wat je nog moet doen is zorgen dat de regel van de textarea gelijk lopen met de div. In FF zit het nu redelijk goed, maar in IE niet zo.

Adriaan

05-10-2008 21:03

khad voor rens z'n post ook al wat gevonden:
deze werk in ie als in ff!

<html>
<head>
<script type="text/javascript">
function scrolltheother(){
var farea = document.testform.testarea;
var sarea = document.testform.stestarea;
sarea.scrollTop = farea.scrollTop;
setTimeout("scrolltheother()",10);
}
window.onload = scrolltheother;
</script>
</head>
<body>
<form name="testform">
<textarea cols="3" id="sArea" name="stestarea" style='overflow:hidden; height:100px;' disabled="disabled" >
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.</textarea>
<textarea wrap='off' cols="15" style='height:100px;' id="fArea" name="testarea" onscroll="scrolltheother()">
Regel 1
regel 2
regel 3
regel 4
regel 5
regel 6
regel 7
regel 8
regel 9
regel 10
regel 11
regel 12</textarea>
</body>
</html>

Reageren

Inloggen om te reageren