Ajaxschmiede.de

Mit übergroßen Inhalten hat man als Webmaster öfters mal zu tun. Dabei stellt man stets die Frage, wie man damit umgeht. Ich habe für dieses Problem eine div- und javascript-basierte Scroll-Funktion geschrieben, die es ermöglicht – ähnlich einem iframe – innerhalb des übergroßen Inhalts zu scrollen. Innerhalb des Inhalts ist ein Steuerkreuz zu sehen, dass im Ausgangszustand halbtransparent ist und erst beim Überfahren mit der Maus voll sichtbar wird. Das Steuerkreuz selbst ist eie Areamap.

Diese Funktion würde sich auch anbieten um einen Live-Ticker oder ähnliches zu realisieren.

Eine kleine Demonstration des Scriptes in Aktion kann man auf diesem Link hier sehen.

Wichtigster Bestand ist die Javascript-Funktion zum bewegen des Inhalts-div.

function moveDIV( var1, var2 ) {
	if ( var1 == 0 ) {
		document.getElementById("zeug").style.left = "0px";
		document.getElementById("zeug").style.top = "0px";
	} else {
		if ( var2 ) {
			/* alter Wert ohne Einheit */
			var2 = document.getElementById("zeug").style.left;
			var2 = Number(var2.substring(0, var2.length-2));
			var3 = document.getElementById("zeug").style.width;
			var3 = Number(var3.substring(0, var3.length-2));
			var4 = document.getElementById("tool").style.width;
			var4 = Number(var4.substring(0, var4.length-2));
			// wenn links am rand angekommen
			if ( var2 + var1 <= 0 ) {
				if ( var2 + var1 > -var3 + var4 ) {
					document.getElementById("zeug").style.left = var2 + var1 + "px";
				} else {
					document.getElementById("zeug").style.left = -var3 + var4 + "px";
				}
			}
		} else {
			/* alter Wert ohne Einheit */
			var2 = document.getElementById("zeug").style.top;
			var2 = Number(var2.substring(0, var2.length-2));
			// wenn links am rand angekommen
			if ( var2 + var1 <= 0 )	{
				document.getElementById("zeug").style.top = var2 + var1 + "px";
			}
		}
	}
}
&#91;/source&#93;

Diese Funktion unterscheidet, ob ein Benutzer vertikales oder horizontales Scrollen aktiviert hat. Aufgerufen wird die Funktion mittels folgenden Maus-Ereignissen, die die Scrollfuntion bei gedrückhalten der rechten Maustasten in 15 Millisekundentakt aufruft und dabei um jeweils 5px den Inhalt bewegt:

&#91;source language='javascript'&#93;
onmousedown="aktiv = window.setInterval('moveDIV(5, true)', 15); "
onmouseup="window.clearInterval(aktiv);
&#91;/source&#93;

Damit der Benutzer das Überfahren bemerkt, wird per Javascript der Mauszeiger verändert. Um einige Problemfälle auszuschließen und sicherzustellen, dass nur eine Intervallfunktion nur einmal ausgeführt wird, habe ich auch noch nachfolgende Eventhandler eingebaut:

&#91;source language='javascript'&#93;
onmouseover="this.style.cursor='pointer';"
onmouseout="if (aktiv) window.clearInterval(aktiv);
&#91;/source&#93;

Allgemein wird das div-Gerüst wie folgt eingebaut. An oberster Stelle wird das tool-div als Elternelement definiert.

&#91;source language='html'&#93;
<div id="tool" style="width: 500px; height: 200px; overflow: hidden; border: 1px solid gray; position: relative; ">

Anschließend wird das Menü eingebunden.

<div id="steuerung" style="position: absolute; top: 0px; left: 0px; margin-left: 420px; margin-top: 5px; z-index: 100; opacity: 0.2; filter: alpha(opacity=20); " onmouseover="fadeDIV(10); " onmouseout="fadeDIV(2); ">
<img src="kreuz.gif" alt="" usemap="#kreuz" border="0" />
<map name="kreuz">
<area shape="rect" coords="1,26,22,48" onmouseover="this.style.cursor='pointer';" onmousedown="aktiv = window.setInterval('moveDIV(5, true)', 15); " onmouseup="window.clearInterval(aktiv); " onmouseout="if (aktiv) window.clearInterval(aktiv); " alt="nach links" title="nach links" />
<area shape="rect" coords="53,26,74,48" onmouseover="this.style.cursor='pointer';" onmousedown="if (aktiv) window.clearInterval(aktiv); aktiv = window.setInterval('moveDIV(-5, true)', 15); " onmouseup="window.clearInterval(aktiv); " onmouseout="if (aktiv) window.clearInterval(aktiv); " alt="nach rechts" title="nach rechts" />
<area shape="rect" coords="28,1,47,22" onmouseover="this.style.cursor='pointer';" onmousedown="if (aktiv) window.clearInterval(aktiv); aktiv = window.setInterval('moveDIV(5, false)', 22); " onmouseup="window.clearInterval(aktiv); " onmouseout="if (aktiv) window.clearInterval(aktiv); " alt="nach oben" title="nach oben" />
<area shape="rect" coords="28,52,47,74" onmouseover="this.style.cursor='pointer';" onmousedown="if (aktiv) window.clearInterval(aktiv); aktiv = window.setInterval('moveDIV(-5, false)', 22); " onmouseup="window.clearInterval(aktiv); " onmouseout="if (aktiv) window.clearInterval(aktiv); " alt="nach unten" title="nach unten" />
<area shape="rect" coords="28,26,47,48" onmouseout="if (aktiv) window.clearInterval(aktiv); " onmouseover="this.style.cursor='pointer';" onclick="moveDIV(0)" alt="Ausgangsansicht" title="Ausgangsansicht" />
</map>
</div>

Danach wird noch das Kind-div mit dem Inhalt eingebettet und alle offenen divs werden geschlossen..

<div id="zeug" style="width: 1000px; margin-left: 0px; position: absolute; top: 0px; left: 0px;">
<-- INHALT -->
</div>
</div>