Screen-Resizer
Voraussetzungen:
- openEngine 1.6 im Verzeichnis /htdocs
Ziel: Funktionen, die das Layout der Seite dynamisch der Fenstergröße anpassen.
In der Datei /htdocs/templates/_system/head.php wird für den IE ergänzt:
<script for=window event=onresize>
var b=document.body;
if(z=document.all.middle_col){z.style.height=b.clientHeight-160;z.style.width=b.clientWidth-375;}
else {z=document.all.middle_col2; z.style.height=b.clientHeight-160;z.style.width=b.clientWidth-220;}
document.all.left_col.style.height=b.clientHeight-160;
document.all.right_col.style.height=b.clientHeight-160;
</script>
<script for=window event=onload>
var b=document.body;
if(z=document.all.middle_col){z.style.height=b.clientHeight-160; z.style.width=b.clientWidth-375;}
else {z=document.all.middle_col2; z.style.height=b.clientHeight-160; z.style.width=b.clientWidth-220;}
document.all.left_col.style.height=b.clientHeight-160;
document.all.right_col.style.height=b.clientHeight-160;
</script>
Erläuterungen:
Die beiden Skript-Fragmente werden vom IE bei entsprechenden Events (onload, resize) ausgefüht. Die in der openEngine Strukturgebenden Elemente sind: middle_col, middle_col2, left_col, right_col; diese werden via Styles hinsicht ihrer Größe und Positionseigenschaften bechrieben. Wir brauchen alle Style-Attribute, die im Script angesprochen werden, damit es funktioniert. Also im style.css sind z. B. folgende Eintragungen enthalten:
#left_col {
position:absolute;
overflow:auto;
left:0px;
top:0px;
width:135px;
height:100%;
}
#right_col {
position:absolute;
overflow:auto;
right:0px;
top:0px;
width:200px;
}
#middle_col, #middle_col2 {
overflow:auto;
height:100%;
width:100%;
}
Um bei einem resize die width der middle_col auszurechnen, nehmen wir die width des document.body (die vorher per style auf 100% gesetzt wurde) und ziehen z. B. großzügigerweise 375px für die Weite der linken [135px] und rechten [200px] Spalten ab. Genauso wird für die Höhe (in diesem Beispiel 160px für Kopf- und Fußzeilen) verfahren. Da wir 4 Bereiche justieren müssen, werden halt 4x die gleichen Dinge getan.
Die Eintragungen im Style hinsichtlich der sowieso veränderten Werte ist also beliebig (siehe Beispiel für #left_col, in dem für height:100% angegeben ist).
Bei den middle_cols ist die Positionierung anders; daher nur darauf achten, dass die beiden Attrbute height und width definiert sind.
Bitte bei Änderungen, darauf achten, dass (1) keine Widersprüche im Layout entstehen, dass (2) nicht etwas aus versehen gelöscht wird und (3) nicht an anderer Stelle width bzw. height nochmals definiert werden.
Für die "Gecko"-Browser geht es anders (ich habe nur Firefox und Netscape 7.1 getestet):
In der Datei /htdocs/templates/_system/head.php wird ergänzt:
<body onLoad="resize_gecko()" onResize="resize_gecko()" >
und die JavaScript-Funktion wird zum Beispiel in die Datei \htdocs\templates\_javascript\javascript.js geschrieben:
function resize_gecko() {
if (window.navigator.product == 'Gecko'){
with (document) {
if(z=getElementById('middle_col').style){
z.height=window.innerHeight-160;
z.width=window.innerWidth-375;
}
else {
z=getElementById('middle_col2').style;
z.height=window.innerHeight-160;
z.width=window.innerWidth-220;
}
getElementById('left_col').style.height=window.innerHeight-160;
getElementById('right_col').style.height=window.innerHeight-160;
}
/* ... */
}
}
Ist im Grunde das gleiche wie beim IE, nur heissen die Variablen halt anders.