Hintergrundhöhe anhand der verfügbaren Fensterbreite bestimmen
Grundlegende HTML- und JavaScript-Kenntnisse setze ich hier voraus! Nichtsdestotrotz auch für Laien interessant!
Was mich ja schon ewig am Webdesign nervt, sind die unterschiedlichen Arten und Weisen der verschiedensten Browser Inhalte darzustellen. Hauptaugenmerk lege ich heute auf den Hintergrund. Hat es Euch, speziell die Webdesigner und Hobby-Homepage-Schrauber, nicht auch schon zur Weißglut gebracht? Was?! Da legt man sich einen schönen neuen und riesenhaften TFT zu und die Hälfte der Internetseiten muss man sich in Zukunft mit einer Lupe anschauen.
Da hilft auch nicht die bewährte Tastenkombination "Strg" und "+" oder "Strg" und das Mausrad. Weil vielerorts die Seiten eine feste Größe haben um die oft wunderschönen Hintergrundgrafiken nicht zu verstümmeln oder diese nur als kleinen "Fleck" in irgendeiner Ecke oder zentriert darzustellen.
Ich denke, ich habe da eine kleine Lösung zu gefunden. Das Problem liegt (noch) darin, dass sich Hintergrundgrafiken nicht so ohne Weiteres auf die zur Verfügung stehenden Flächen zoomen lassen. Man muss dazu schon ein Wenig in die Trickkiste greifen. Sprich: mit JavaScript und etwas CSS sollte es schon klappen!
Wir dürfen aber nicht unser allseits beliebtes Google™ vergessen. Flux nach "background" und "100%" gesucht und schon gleich der erste Link wirkt Wunder: Hier geht´s lang!
Kleiner Wermutstropfen: Der Rammler wirkt bei Widescreen-Monitoren bisweilen etwas geplättet. Auch eine Änderung der Fenstergröße per Hand tut ihm nicht wirklich gut. Es muss ein erweitertes Script her, mit dem die vertikale Ausdehnung des Inhalts innerhalb des Browserfensters der horizontalen Breite des Hintergrundbildes möglichst genau angepasst wird.
Das Script sollte dabei auch nicht außer Acht lassen, dass die unterschiedlichen Browser dem Inhalt auch unterschiedlich viel Platz zur Entfaltung geben.
Erst noch etwas mehr Theorie!
Damit sich so etwas bewerkstelligen lässt, muss dem anzupassenden Element ein Name (ID) verpasst werden. In diesem Fall nennen wir die beiden benötigten Teile "background" und "scroller". Der "scroller" ist nötig, falls der Hintergrund auch wirklich komplett dargestellt werden soll, aber auch nicht mehr!
Um jedem Browser gerecht zu werden, braucht es, wie nicht anders zu erwarten, unterschiedliche Variablen, die ausgelesen werden müssen. Beschränken wir uns hier auf die Breite und Höhe des dargestellten Fensters. Den meisten reicht das Suchen nach "self.innerWidth", bzw "self.innerHeight". Aber nicht unser Liebling aus Redmond! Der mag es umfangreicher: "document.documentElement.clientWidth"/"document.documentElement.clientHeight". Aber auch andere benötigen eine gesonderte Behandlung, für die gilt: "document.body.clientWidth"/"document.body.clientHeight". Dieses Durcheinander muss im Script auseinander gehalten werden! Sieht kompliziert aus, ist es aber nicht!
Was auch in das JavaScript Einzug halten muss, ist natürlich die Originalgröße des Hintergrunds. Im späteren Beispiel 1024*1496. Selbstverständlich läuft beim Programmieren nichts ohne Variablen. Die sind auch zu definieren.
Das sollte für´s erste reichen. Frisch ans Werk - der Code! Ich beschränke mich auch hier nur auf das Nötigste.
Geben wir unserem Kind einen Namen.
function set_bg_height () {
Die leeren Klammern sind nötig, damit auch jeder weiß, dass keine Parameter übergeben werden. Die geschwungene Klammer dient sozusagen als Eröffnung.
Die Variablen definieren.
var x,y,bgy;
var bg = document.getElementById("background");
var scr = document.getElementById("scroller");
x,y und bgy brauchen wir für die Berechnungen. bg und scr beherbergen die Darstellungsoptionen der beiden Elemente.
Jetzt der Teil mit den unterschiedlichen Abfragemöglichkeiten.
if (self.innerWidth) // alle außer IE
{
x = self.innerWidth; y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) // IE 6 Strict Mode
{
x = document.documentElement.clientWidth;
y = document.documentElement.clientHeight;
}
else if (document.body) // andere Browser
{
x = document.body.clientWidth;
y = document.body.clientHeight;
}
Mit grundlegenden Englischkenntnissen und dem oben erklärten Sachverhalt erübrigt sich eine ausführliche Beschreibung.
Nun habe wir alle Informationen um unsere Berechnung in Gang zu bringen.
bgy = Math.floor((x/1024*1496)/y*100);
Hier fließt endlich die Größe der Originals ein. Wer sich jetzt wundert: Wir berechnen die Größen in Prozent.
Nun soll das Ganze aber auch in Form gebracht werden.
bg.style.height = bgy+"%";
scr.style.height = bgy+"%";
}
Die geschwungene Klammer schließt unsere Funktion nun ab.
Somit wäre das geklärt. Beim Aufruf der Seite mit unserem Hintergrund berechnet unser Script nun die Höhe des Fensters. Aber wir wollten doch auch, dass sich bei einer Größenänderung des Browserfensters der Hintergrund anpasst.
Das erledigt diese Zeile.
window.onresize=set_bg_height;
Und hier sehen wir einen Grund, warum Kinder einen Namen haben.
Fast fertig! Fast? Ja, denn ein entscheidendes Glied in der Kette fehlt noch: Nur die Funktion alleine reicht nicht. Der Browser muss ja auch wissen, was er WANN damit machen soll. Wir müssen unserem HTML-Code also etwas hinzufügen. Dieses geschieht innerhalb des BODY-Tags.
<.body onload="set_bg_height()">
Das war´s jetzt aber wirklich - für´s erste ... (Der Punkt vor "body" dient hier nur der Darstellung halber)
