Galileo Computing < openbook > Galileo Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Galileo Computing
ISBN 3-89842-859-1
gp Kapitel 8 Fenster
  gp 8.1 Modale Fenster
    gp 8.1.1 Warnung – nur im Notfall
    gp 8.1.2 Bestätigungen
    gp 8.1.3 Benutzereingaben
  gp 8.2 Navigationsleiste mit JavaScript
    gp 8.2.1 Das History-Objekt
    gp 8.2.2 Vorwärts und rückwärts, Teil 2
    gp 8.2.3 Drucken mit JavaScript
  gp 8.3 Die Statuszeile
    gp 8.3.1 Erläuternde Links
    gp 8.3.2 Laufschrift
  gp 8.4 Das location-Objekt
  gp 8.5 Ein neues Fenster öffnen
    gp 8.5.1 Ein Fenster öffnen und füllen
    gp 8.5.2 Ein Fenster öffnen und verlinken
    gp 8.5.3 Ein Fenster öffnen und anpassen
    gp 8.5.4 Modale Fenster
  gp 8.6 Fernsteuerung
    gp 8.6.1 Links mit JavaScript
    gp 8.6.2 Links ohne JavaScript
  gp 8.7 Fenster schließen
    gp 8.7.1 Andere Fenster schließen
  gp 8.8 Fenster bewegen mit JavaScript
    gp 8.8.1 Fenster verschieben
    gp 8.8.2 Fensterinhalt scrollen


Galileo Computing

8.8 Fenster bewegen mit JavaScript  downtop

Prinzipiell gibt es zwei Möglichkeiten, ein Fenster zu bewegen, und das ist reine Definitionssache. Entweder wollen Sie das gesamte Fenster irgendwohin bewegen, oder Sie wollen den Inhalt des Fensters scrollen. Beides ist mit neueren Browsern möglich und wird an dieser Stelle kurz vorgestellt.


Galileo Computing

8.8.1 Fenster verschieben  downtop

Eine häufig gestellte Frage lautet: Wie kann ich das Browserfenster zentrieren? Andere Leute wiederum möchten, dass das Browserfenster maximiert oder minimiert wird (so viel vorweg: Das ist nicht möglich) oder dass es sich am oberen Bildschirmrand befindet. Dies ist kein aufwändiges Verfahren, es müssen einfach entsprechende Eigenschaften des window-Objekts gesetzt oder ausgelesen oder Methoden aufgerufen werden. Übertreiben Sie es jedoch nicht mit diesen Effekten. Viele Webbesucher reagieren ziemlich giftig, wenn man ihnen vorschreiben will, wo sich ein Fenster befindet.

Moderne Browser können ein Fenster verschieben, und zwar sowohl an eine bestimmte Position als auch um einen gewissen Wert. Dazu gibt es zwei Methoden:

gp  window.moveTo(x, y): Verschiebt das Fenster so, dass die linke obere Ecke die Koordinaten (x, y) hat. Es handelt sich hier um eine absolute Verschiebung. Sie können das Fenster damit nicht aus dem sichtbaren Bereich hinaus verschieben, außer Sie verwenden signierte Skripten (die werden in Kapitel 29 behandelt).
gp  window.moveBy(x, y): Verschiebt das Fenster horizontal um x Pixel, vertikal um y Pixel, führt also eine relative Verschiebung durch. Auch hier kann das Fenster nicht aus dem sichtbaren Bereich hinaus verschoben werden.

Erinnern Sie sich noch an die Auflistung der Parameter für window. open()? All diese Parameter sind auch gleichzeitig Eigenschaften für das window-Objekt. Somit werden beispielsweise mit window.outerHeight und window.outerWidth die Ausmaße des Browserfensters angegeben.

Um nun die Maximierung eines Fensters zu simulieren (man führt damit nicht die API-Funktion für die Fenstermaximierung aus, sondern vergrößert das Fenster nur entsprechend), muss man noch die Ausmaße des Bildschirms bestimmen. In JavaScript kann man diese Werte aus dem screen-Objekt erhalten:

gp  screen.availWidth enthält die Bildschirmbreite.
gp  screen.availHeight enthält die Bildschirmhöhe.

Eine Funktion zum Maximieren des Fensters sieht also folgendermaßen aus: Die linke obere Ecke des Fensters wird zunächst an die linke obere Ecke des Bildschirms gesetzt, und dann wird das Fenster entsprechend vergrößert.

function maximieren() {
   window.moveTo(0, 0);
   window.outerHeight = screen.availHeight;
   window.outerWidth = screen.availWidth;
}

Galileo Computing

8.8.2 Fensterinhalt scrollen  toptop

Bereits in JavaScript Version 1.1 wurden Methoden zum Scrollen des Fensterinhalts eingeführt. Die dazugehörige Methode heißt window.scroll(x, y). Sie scrollt den Fensterinhalt an die angegebenen Koordinaten. Es ist eigentlich unlogisch, dass das Scrollen eine Methode des window-Objekts ist, da ja nicht das Fenster gescrollt wird, sondern das Dokument, das sich darin befindet. Auch hier gilt: Übertreiben Sie es nicht. Der Benutzer ärgert sich immer, wenn er das Gefühl hat, nicht die Kontrolle über ein Fenster zu besitzen. Scrollen Sie also nur dann, wenn es wirklich Sinn macht.

Eine der möglichen Anwendungen besteht darin, nach oben zu scrollen. Auf vielen längeren Webseiten finden Sie einen Link, der nach oben scrollt – Sie ersparen Ihren Benutzern so die Mühe, mit der Maus den Scrollbalken zu treffen. Dieser Effekt wird meistens so angeboten:

<a href="#top">nach oben</a>

Am Anfang des Dokuments befindet sich eine Textmarke namens "top", zu der dann gescrollt wird. Das ist ein netter Effekt, vor allem bei längeren Dokumenten. Zum einen jedoch ändert sich die URL – was Neulinge immer stark irritiert, man glaubt es kaum –, und zum anderen ist es bei komplexeren Dokumenten nicht immer möglich, ganz oben eine Textmarke unterzubringen. Wenn beispielsweise direkt nach dem <body>-Tag ein Werbebanner eingefügt wird (manche Gratis-Hoster machen das so), kann man nie nach ganz oben scrollen.

Das Scrollen an den Dokumentenanfang geht ganz bequem. Es muss einfach zu den Koordinaten (0, 0) gescrollt werden:

<a href="javascript:window.scroll(0, 0)">nach oben</a>

In JavaScript 1.2 wurden zwei neue Methoden eingeführt. Dabei verhält sich window.scrollTo(x, y) genauso wie window.scroll(x, y), während window.scrollBy(x, y) neu ist: Ebenso wie bei window.moveBy(x, y) wird hier relativ gescrollt.

Die Methoden zum Scrollen werden im Zusammenhang mit der exakten Positionierung von HTML-Dokumenten bei DHTML noch interessant werden; fürs Erste aber sollte dieser Einblick genügen.




1  Der Koordinatenursprung liegt in der linken oberen Ecke des Bildschirms. Ein kurzes Wort zu diesem neuen Sprachelement von JavaScript. Bei with() handelt es sich primär um eine Sprachabkürzung. Wenn Sie, wie im Listing gezeigt, with (fenster.document) { ... } verwenden, können Sie sich innerhalb der geschweiften Klammern das Tippen von fenster.document sparen; die Aufrufe open(), write() und close() beziehen sich hier alle auf fenster.document, da dieses Objekt bei with() in den runden Klammern angegeben worden ist.

 <<   zurück
  
  Zum Katalog
Zum Katalog: JavaScript und AJAX
JavaScript und AJAX
bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: JavaScript und AJAX - Das Video-Training






 JavaScript und AJAX -
 Das Video-Training


Zum Katalog: Webseiten programmieren und gestalten






 Webseiten
 programmieren
 und gestalten


Zum Katalog: XHTML, HTML und CSS






 XHTML, HTML und CSS


Zum Katalog: CSS-Praxis






 CSS-Praxis


Zum Katalog: AJAX






 AJAX


Zum Katalog: PHP 5 und MySQL 5






 PHP 5 und MySQL 5


Zum Katalog: TYPO3 4.0






 TYPO3 4.0


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




Copyright © Galileo Press 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Galileo Computing]

Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de