info@a-coding-project.de

DHTML: Dynamischer Inhalt und Positionierung

Die zwei wichtigsten Aufgaben von DHTML sind die Erzeugung von dymanischem Inhalt und dessen Positionierung.

Dynamischer Inhalt

Eines der Haupt-Aufgaben von DHTML ist das generieren von dynamischem Inhalt. Das heißt, der Inhalt eines Elementes soll während des Anzeigens geändert werden. Dazu gibt es bei den unterschiedlichen Browsern und Elementen wiederum unterschiedliche Verfahren.

Währen im Internet Explorer und Netscape Navigator 6.x der Inhalt eines Layers mit der innerHTML- bzw. innerText-Eigenschaft relativ einfach geschrieben und gelesen werden kann, benötigt der Netscape Browser der Version 4.x wieder etwas mehr Führsorge. Hier muss das document des Layers geöffnet, geschrieben und danach wieder geschlossen werden. Opera macht dazu noch mehr Schwierigkeiten (oder besser: unmöglich). Kann hier zwar der Layer des Internet Explorers verwendet werden und auch der Zugriff ähnlich geregelt werden aber leider verwehrt sich der Browser komplett des Inhalts eines Layers. Beispiel:

//NN 4.x
document.LayerName.document.open();
document.LayerName.document.writeln('<p>neuer Inhalt</p>');
document.LayerName.document.close();

//NN6.x
document.getElementById('LayerID').innerHTML = '<p>neuer Inhalt</p>';

//IE 4.x und hoeher
document.all.LayerID.innerHTML = '<p>neuer Inhalt</p>'; 

Positionierung

Eine weitere wichtige Aufgabe von DHTML ist die Positionierung von Objekten innerhalb des Browserfensters. Wer sich mit CSS auskennt, der weiß, dass Positionierung nicht gleich Positionierung ist: Man unterscheidet in absoluter und relativer Positionierung. Beide werden durch die CSS-Eigenschaft position ausgedrückt. Beispiel:

<style>
DIV.meineID1 { position:absolute; } /*absolute Pos.*/
DIV.meineID2 { position:relative; } /*relative Pos.*/
</style> 

Innerhalb von JavaScript kann darauf wie folgt zugegriffen werden:

<script>
//IE 4.x und hoeher
document.all.meinDiv1.style.position = 'absolute';
document.all.meinDiv2.style.position = 'relative';

//NN6.x
document.getElementById('meinDiv1').style.position = 'absolute';
document.getElementById('meinDiv2').style.position = 'relative';
</script> 

Was den Netscape Navigator 4.x angeht, so unterscheidet man hier nicht zwischen absoluter und relativer Positionierung eines einzelnen Layers. Ein layer wird immer absolut definiert und ein ilayer immer relativ.

Absolute Positionierung

Unter absoluter Positionierung versteht man die Positionierung eines Objektes relativ zu den Seitenrändern des Dokumentes. Als Beispiel: Ein mit 10 Pixel in y-Richtung absolut positioniertes Objekt befindet sich immer am oberen Anfang des Dokumentes - egal, ob das Objekt als erstes oder irgendwo innerhalb der Seite definiert wurde. Beispiel: Die Layer wurden absolut mit 200 Pixeln von Links aus beschrieben. Beide befinden sich auf der gleichen x-Ausrichtung, dennoch steht beim zweiten Layer ein anderes Objekt (der Text) vor dem Layer.

Relative Positionierung

Unter relativer Positionierung versteht man die Positionierung eines Objektes relativ zu seiner ursprünglich definierten Lage sowie den angrenzenden Objekten und Elternobjekten. Als Beispiel: Ein relativer Layer wird irgendwo innerhalb eines Dokumentes definiert. Außerdem bekommt er eine 10 Pixel Positionierung in y-Richtung. Der Layer wird dann genau um 10 Pixel nach unten verschoben dargestellt, wo er sich eigentlich (durch die definierte Lage im Dokument) befinden würde. Beispiel: Verwendet man im Prinzip das gleiche System wie oben beschrieben, nur mit relativer Positionierung, sieht man jedoch, dass die relativen Layer nur um 300 Pixel aus ihrer eigentlichen Lage verschoben wurden.

Vorder- und Hintergrund

Wichtig bei der Positionierung von Objekten ist, ob ein Objekt im Vordergrund oder im Hintergrund eines anderen liegt. Dies kann durch die z-index-Eigenschaft (als z-index-Attribut bei layer und ilayer oder z-index-Style-Eigenschaft bei div und span) geregelt werden. Sie beschreibt die Ebene auf der sich der Layer befinden soll. 0 (Null) ist die Grundschicht (das eigentliche Dokument) - alles was größer ist liegt darüber. Ebenso liegt beispielsweise auch immer ein Layer mit einem Wert von 3 über einem anderen Layer mit dem Wert 2.

Der Zugriff auf diese Eigenschaften erfolgt wie folgt:

//IE 4.x und Opera 5.x oder hoeher
document.all.LayerID.style.zindex = 2;

//NN 4.x
document.LayerName.zIndex = 2;

//NN 6.x
document.getElementById('LayerID').style.zindex = 2; 

Anzeige von Objekten

Des Weiteren bietet sich mit DHTML an, die Anzeige (genauer gesagt, ob etwas sichtbar ist oder nicht) von Objekten zu bestimmen. Dies geschieht allgemein mit der visibility-Eigenschaft (als visibility-Attribut bei layer/ilayer oder Style-Eigenschaft bei div/span). Mit dieser Eigenschaft kann ein Objekt zwei Formen annehmen: sichtbar und unsichtbar. Die Werte werden wie folgt definiert:

Elemente
Definition Bedeutung
layer / ilayer
visibility="show" Layer wird angezeigt.
visibility="hide" Layer wird nicht angezeigt.
visibility="inherit" Layer nimmt die Anzeigeart des Elternlayers an.
div / span
style="visibility:visible;" Layer wird angezeigt.
style="visibility:hidden;" Layer wird nicht angezeigt.
style="visibility:inherited;" Layer nimmt die Anzeigeart des Elternlayers an.

Bewegung von Objekten

Um nun eine Bewegung eines Objektes zu erreichen muss in regelmäßigen Abständen die Positionierung (top und left) gändert werden. Dies kann z.B durch einen Timeout (z.B. window.setTimeout('machwas()',1000)), ein Interval (z.B. window.setInterval('machwas()',1000)) oder ein Ereignis (z.B. document.onmousemove = machwas();) geschehen.

Zu beachten ist dabei, dass die Browser alle ihre eigenen Macken haben. Der Internet Explorer gibt .left immer mit Maßangabe (z.B. px, em oder pt) aus. Ebenso der Netscape Browser ab der Version 6.0. Netscape (4.x) und Opera kennen dagegen nur Ganzzahlen ohne Maßangabe. Für das Setzten eines neuen Wertes kann z.B. der folgende Code verwendet werden:

function SetzteWert(layername,wert)
{

 //Internet Explorer ab 4.x
 if(typeof(document.all) == 'object')
 {
 document.all[layername].style.left = wert+'px';
 }

 //Netscape 6.x
 if(typeof(document.getElementById(layername)) == 'object' &&
    typeof(document.all) != 'object')
 {
  document.getElementById(layername).style.left = wert+'px';
 }

 //Netscape 4.x
 if(typeof(document[layername]) == 'object')
 {
  document[layername].left = 0;
 }

 //Opera ab 5.x
 if(typeof(window.opera))
 {
  document.all[layername].style.left = 0;
 }

Bei der im Beispiel angegebenen Funktion wird davon ausgegangen, dass es einen layer oder ilayer sowie einen div oder span gibt. Beide müssen mit dem gleichen Namen/ID zu identifizieren sein. Es empfiehlt sich bei den meisten DHTML-Anwendungen eine Konstruktion wie die folgende:

<span style="position:relative; left:0px; top:0px" id="LayerID">
<ilayer left="0" top="0" name="LayerID"> ... Inhalt ... </ilayer>
</span>

<div style="position:absolute; left:0px; top:0px" id="LayerID">
<layer left="0" top="0" name="LayerID"> ... Inhalt ... </layer>
</div> 

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Auch interessant