Höhenangepasste Inhalte einfügen

1. die Notierung (HTML-Code) für Grafiken
2. die Notierung (HTML-Code) für Höhenangaben einer Tabelle / Tabellenzeile
3. die Notierung (HTML-Code) für Höhenangaben eines iFrames
4. ...

Rechts sehen sie die Abbildung eines Beispiels. Oben steht ein fester Seitenbestandteil mit einer Höhe von 102 Pixel, darunter Grafiken und Text. Abhängig von der zur Verfügung stehenden Fensterhöhe möchte ich neben 3 Standardelementen zusätzlich weitere Seitenelemente von jeweils 116 Pixel Höhe anzeigen lassen. Ein JavaScript stellt zuerst die zur Verfügung stehende Fensterhöhe fest. Aktuell gilt hier Platz für reservierte Bereiche (hier 102 Pixel) muss abgezogen werden. Das JavaScript errechnet den Restwert = höhe - 102. Aktuell gilt hier Der verbleibende Platz kann für die Darstellung der Seitenelemente verwendet werden. Zunächst 3 Standardtemente, darunter sollen die zusätzlichen Elemente stehen, falls der Platz ausreicht. Abhängig vom errechneten Restwert sollen Anweisungen für die Darstellung der zusätzlichen 116 Pixel hohen Elemente in das Dokument geschrieben werden. Das könnte so aussehen: if( rest > 384) { document.write('<img src="img4.gif" ... ><br>'); } if( rest > 500) { document.write('<img src="img5.gif" ... ><br>'); } if( rest > 616) { document.write('<img src="img6.gif" ... ><br>'); }

Ein ähnliches Beispiel mit einer Seite, deren Inhalte innerhalb einer Tabelle stehen. Das wird zwar weniger häufig vorkommen, ist aber eine gute Demo für das nächste Beispiel weiter unten auf dieser Seite (iFrames). Der mit einem Maßpfeil gekennzeichnete Bereich soll variabel definiert werden. Im Gegensatz zu den beiden oberen und unteren Seitenbereichen (Kopf und Fuß), für welche die Höhen fix festgelegt wurden, soll die Höhenangabe für diesen Bereich durch das Script geschrieben werden.

<table .. >
<tr><td height="260">
Kopf
</td></tr>

<script type="text/javascript" language="JavaScript">
<!--
document.write('Abmessungen()')
document.write('<tr><td height="' + rest +'" ... >')
//-->
</script>
Mitte
</td></tr>

<tr><td height="80">
Fuß
</td></tr>
</table>

Aktuell sind das . Dann könnte der I-Frame - 272 Pixel = Pixel hoch werden. Weil man den Wert für die i-Framehöhe nicht als festen Wert eintragen kann bleibt auch hier nur die Option, dem Javascript die Notierung der HTML-Tags zu übertragen. Nur dann kann man auch den errechneten Wert von Pixel dort vom Script schreiben lassen. Immer angepasst, so wie die Fensterhöhe das zulässt. Die Funktion Abmessungen() zur Ermittlung der Fensterhöhe, wird innerhalb des Body aufgerufen. Nur wenn die Seite zumindest bereits im Aufbau ist, kann die Fensterhöhe ausgelesen werden.

<table .. >
<tr><td height="122">
Titel
</td></tr>
<tr><td height="20">
Navigation
</td></tr>

<tr><td>
<script type="text/javascript" language="JavaScript">
<!--
document.write('Abmessungen()')
document.write('<iframe height="' + rest + '" width="610" ... >');
//-->
</script>
i-Frame Inhalt
</iframe>
</td></tr>

<tr><td height="130">
Fuß
</td></tr>
</table>

 Doctype-Notierung

<script type="text/javascript" language="JavaScript">
<!--
// Bildschirmabmessungen

var hoehe;
var rest;

// von ihnen festgelegter Abzug
var abzug = 150;

function Abmessungen()
{

// alle außer IE
if (self.innerHeight)
{
        hoehe = self.innerHeight;
}

// IE 6 strict Mode
else if (document.documentElement && document.documentElement.clientHeight)

{
        hoehe = document.documentElement.clientHeight;
}

// andere IE
else if (document.body)
{
        hoehe = document.body.clientHeight;
}


// zum Testen
//alert( "Inner Height: " + hoehe);

// festgelegter Abzug subtrahieren)
rest = (hoehe - abzug);

// zum Testen
//alert( "zur Verfügung Höhe: " + rest );
}

//-->
</script>

 Umleitung abhängig von der Auflösung