 Window positionieren
Beim Öffnen eines Pop-Up-Windows kann man auch Anweisungen für die Positionierung des Fensters einbinden. Dabei werden Angaben für die X- / Y-Werte der linken oberen Ecke des Windows festgelegt, die sich auf die linken obere Ecke des Browserfensters / des Frames beziehen.
Die Angaben für die X- Y-Position werden dort eingetragen, wo üblicherweise die Attribute (Eigenschaften) notiert werden.
window.open("datei.htm","Fenstername","Attibute");
Zur Positionierung stehen unterschiedliche Eigenschaften zur Verfügung, die allerdings nicht alle in jedem Browser eingesetzt werden konnen. Mit 'right' und 'top' ist man offenbar auf der sicheren Seite.
| JavaScript-Anweisung |
für die linke obere Ecke des Fensters |
Browser |
| screenX=xx |
horizontaler Wert (in Pixel) |
    |
| screenY=xx |
vertikaler Wert (in Pixel) |
|
| right=xx |
horizontaler Wert (in Pixel) |
  |
| top=xx |
vertikaler Wert (in Pixel) |
|
Fenster an einer fixen Position
 Eine Funktion für ein Pop-Up-Window, das immer an ein und derselben festgelegten Position angezeigt werden soll. Die Koordinaten sind im Script festgelegt.
Man kann also die Werte für die Fensterposition, neben den möglichen anderen Attributen für ein Window, schon bei der Definition des Pop-Up-Windows festlegen. Übersichtlich ist eine Zusammenfassung aller Attribute die man in eine Variable (Platzhalter) schreibt. Den Namen dieser Variablen trägt man dann an der Stelle ein, wo die Attribute notiert werden sollten.
Script im Head:
Hier werden die Attribute in der Variablen 'eigenschaften01' zusammengefasst.
Übergabeparameter beim Aufruf: Dateiname, Breite, Höhe
function Fenster01Auf(Datei,b,h)
{
// Positionswerte
px = 100;
py = 100;
// Attribute für die Position
var eigenschaften01 = "left=" + px + ",top=" + py;
// weitere Attribiute
eigenschaften01 = eigenschaften01 + ",width="+b+",height="+h+",menubar=no";
fenster01=window.open(Datei,'Info01',eigenschaften01);
}
Aufruf im Body
Übergabeparameter beim Aufruf: Dateiname, Breite, Höhe
<a href="javascript:Fenster01Auf('gelb.htm','350','250')">
Textlink
</a>
Testen:  Funktion Fenster01Auf() aufrufen
Zur Anpassung ändern sie die übergebenen Parameter im Aufruf:
| für |
hier im Beispiel |
ersetzen mit |
| Dateiname | gelb.htm | Dateiname |
| Fensterbreite | 350 | Wert in Pixel |
| Fensterhöhe | 250 | Wert in Pixel |
Positionswerte beim Aufruf übergeben
Eine Funktion für ein Pop-Up-Window, dessen Position sie erst beim Aufruf bestimmen werden. Die Koordinaten werden übergeben.
Möchten sie ein JavaScript für den Mehrfacheinsatz entwerfen, die X-Y-Koordinaten für die Fensterposition aber erst beim Aufruf festlegen, müssen sie der Funktion auch diese beiden Werte als Parameter übergeben. Da kommen dann schon 5 Angaben auf die Funktion zu:
Script im Head:
Übergabeparameter beim Aufruf: Dateiname, Breite, Höhe, X-Pos, Y-Pos
function Fenster02Auf(Datei,b,h,px,py)
{
// Attribute für die Position
var eigenschaften02="left=" + px + ",top=" + py;
// hier werden weitere Attribiute hinzugefügt
eigenschaften02 = eigenschaften02 + ",width="+b+",height="+h+",menubar=no";
Fenster02=window.open(Datei,"Fenstername",eigenschaften02);
}
Hier wurden die Attribute in der Variablen 'eigenschaften02' zusammengefasst.
Aufruf im Body
Übergabeparameter beim Aufruf: Dateiname, Breite, Höhe, X-Pos, Y-Pos
<a href="javascript:Fenster02Auf('rot.htm','550','350','100','100');">
Textlink
</a>
Testen: Funktion Fenster02Auf() aufrufen
Zur Anpassung ändern sie die übergebenen Parameter im Aufruf:
| für |
hier im Beispiel |
ersetzen mit |
| Dateiname | dateiname.htm | Dateiname |
| Fensterbreite | 550 | Wert in Pixel |
| Fensterhöhe | 350 | Wert in Pixel |
| X-Position | 100 | Wert in Pixel |
| Y-Position | 100 | Wert in Pixel |
weitere Möglichkeiten der Positionierung
Zum Thema Pop-Up-Windows positionieren könnte man nun noch zwei interessante Bereiche behandeln:
- Fenster in der Bildschirm- oder Fenstermitte positionieren
- Fenster bewegen, mit dem 'moveTo-Befehl' positionieren
Dazu werde ich separate Beispielseiten erstellen.
|
WWW.WEB-TOOLBOX.NET
Quellcode 
ZURÜCK 
SITEMAP