« Ruby on Rails: Datums Formatierung | Startseite | cakePHP: Wie überliste ich Cake / Sortierung ohne Paginierung »
Zwei DIV Bereiche gleichzeitig (synchron) scrollen
Malte | 27.08.2009
Um zwei Bereiche (hier: DIV Elemente) gleichzeitig mit nur einem Scrollbalken zu verschieben, nutzen Sie folgenden Code:
<script type="text/javascript">
var Marker = [0,0];
function CS(div1, div2) {
if (!div1 || !div2) return;
var control = null;
if (div1.scrollTop != Marker[0])
control = div1;
else
if (div2.scrollTop != Marker[1])
control = div2;
if (control == null)
return;
else
div1.scrollTop = div2.scrollTop = control.scrollTop;
Marker[0] = div1.scrollTop;
Marker[1] = div2.scrollTop;
}
window.setInterval("CS(document.getElementById('ta1'), document.getElementById('ta2'))", 100);
</script>
<table>
<tr><td><div style="height: 70px; width: 100px; overflow: auto" id="ta1">
Testzeile 1<br>Testzeile 2<br>
Testzeile 3<br>Testzeile 4<br>
Testzeile 5<br>Testzeile 6<br>
Testzeile 7<br>Testzeile 8<br></div></td>
<td><div id="ta2" style="height: 70px; width: 200px; overflow: auto">
Testzeile Rechts 1<br>Testzeile Rechts 2<br>
Testzeile Rechts 3<br>Testzeile Rechts 4<br>
Testzeile Rechts 5<br>Testzeile Rechts 6<br>
Testzeile Rechts 7<br>Testzeile Rechts 8<br></div></td>
</tr>
</table>
Folgendes Beispiel zeigt die Funktionsweise. Innerhalb des angezeigten (leeren) Bereiches ist das o.a. JavaScript für das Beispiel definiert:
|
Testzeile 1
Testzeile 2 Testzeile 3 Testzeile 4 Testzeile 5 Testzeile 6 Testzeile 7 Testzeile 8 |
Testzeile 1
Testzeile 2 Testzeile 3 Testzeile 4 Testzeile 5 Testzeile 6 Testzeile 7 Testzeile 8 |
Kategorie: Allgemeines, Anleitungen | 4 Kommentare »
19.03.2010 um 13:02
Hallo,
Können Sie mir bitte sagen, was am Code verändert werden muss, damit man statt senkrecht, „waagerecht“ mit den DIVs scrollen kann. Danke & Gruss
19.03.2010 um 16:09
Hallo Herr Scholz,
ersetzen Sie dafür im Beispiel die “scrollTop” durch “scrollLeft”.
Hinweis
“scrollTop” und “scrollLeft” sind IE spezifisch.
Für andere Browser (Firefox etc.) sollte “pageXOffset” und “pageYOffset” verwendet werden.
19.03.2010 um 16:34
Hallo admin,
danke für Ihre Antwort. Ich habe dies nun wie folgt umgesetzt:
var Marker = [0,0];
function CS(div1, div2) {
if (!div1 || !div2) return;
var control = null;
if (div1.scrollLeft != Marker[0])
control = div1;
else
if (div2.scrollLeft != Marker[1])
control = div2;
if (control == null)
return;
else
div1.scrollLeft = div2.scrollLeft = control.scrollLeft;
Marker[0] = div1.scrollLeft;
Marker[1] = div2.scrollLeft;
}
window.setInterval(“CS(document.getElementById(‘ta1′), document.getElementById(‘ta2′))”, 100);
Testzeile 1Testzeile 2
Testzeile 3Testzeile 4
Testzeile 5Testzeile 6
Testzeile 7Testzeile 8
Testzeile Rechts 1Testzeile Rechts 2
Testzeile Rechts 3Testzeile Rechts 4
Testzeile Rechts 5Testzeile Rechts 6
Testzeile Rechts 7Testzeile Rechts 8
Leider bringt dies jedoch kein Ergebnis. Die Scrollbars am rechten Fensterrand bleiben bestehen & die Funktion des gleichzeitigen Verschiebens besteht nun nicht mehr. Die waagerechten Scrollbars werden nicht angezeigt.
Gruss,Ingo
19.03.2010 um 16:59
Beispiel für das horizontale Koppeln von DIV Bereichen:
var Marker = [0,0];
function CS(div1, div2) {
if (!div1 || !div2) return;
var control = null;
if (div1.scrollLeft != Marker[0])
control = div1;
else
if (div2.scrollLeft != Marker[1])
control = div2;
if (control == null)
return;
else
div1.scrollLeft = div2.scrollLeft = control.scrollLeft;
Marker[0] = div1.scrollLeft;
Marker[1] = div2.scrollLeft;
}
window.setInterval("CS(document.getElementById('ta1'), document.getElementById('ta2'))", 100);
[Hier wieder die Tabelle ...]