Thomas J.S.: screen.availWidth in Netscape

Hallo an Alle!

Einige Threads weiter unten wurde schon über "Breite des Bildschirms auslesen" diskutiert.
Ich habe einiges ausprobiert, aber beim NS wird was ganz durcheinenader gebarcht, obwohl im quelltext die Einträge richtig sind (js-console liefert keine Fehlermeldung).
Das duch JS plazierte <div> sollte etwa in der Mitte des Fensterns erscheinen. Tut es aber keines wegs.
Weiss jemand was da los ist?

Grüße
Thomas

<html>
<head>
<title>wo ist es</title>
<style type="text/css">
<!--
#oben { position:absolute; top:50px; left:50px; width:200px; height:50px; }
#mitte { position:absolute; top:48%; left:45%; width:200px; height:50px; }
-->
</style>
</head>

<body>
<script language="JavaScript">
function bild(){
  var x, y;
  x = screen.availWidth/2;
  y = screen.availHeight/2;
  hoehe = y-25
  breite = x-100

document.write("<div id="bild" style="position:absolute; top:"+hoehe+"px; left:"+breite+"px; width:200px; height:50px;">");
document.write("<img src="bild.gif" width=200 height=50 border=0 alt="WOISTES">");
document.write("</div>");
}
bild();
</script>
<div id="etw"><img src="bild.gif" width=200 height=50 border=0 alt="OBEN"></div>
<div id="mitte"><img src="bild.gif" width=200 height=50 border=0 alt="MITTE"></div>
</body>
</html>

  1. Hallo an Alle!

    Einige Threads weiter unten wurde schon über "Breite des Bildschirms auslesen" diskutiert.
    Ich habe einiges ausprobiert, aber beim NS wird was ganz durcheinenader gebarcht, obwohl im quelltext die Einträge richtig sind (js-console liefert keine Fehlermeldung).
    Das duch JS plazierte <div> sollte etwa in der Mitte des Fensterns erscheinen. Tut es aber keines wegs.
    Weiss jemand was da los ist?

    Grüße
    Thomas

    Hallo Thomas,

    was da los ist kann ich dir auch nicht so genau sagen. Aber ich habe herausgefunden, beim Ändern der Fenstergröße im Navi greift das Script und es wird richtig positioniert. Dabei wird der obere div jedoch gelöscht. Ich vermute, daß Schreiben des Divs erfolgt erst nach dem Aufbau der Seite, d.h. wenn die Positionierung schon fertig ist und der Navi positioniert nicht neu.

    Viele Grüße
    Antje

    1. Hallo Antje!

      »»Aber ich habe herausgefunden, beim Ändern der Fenstergröße im Navi greift das Script und es wird richtig positioniert.
      »»

      Leider nicht!
      Deshalb habe ich die bilder als "OBEN" "MITTE" und "WOISTES" benannt.
      im NS wird das "oben" ganz unten plaziert, auch wenn ich das Fenster resize.

      »»Ich vermute, daß Schreiben des Divs erfolgt erst nach dem Aufbau der Seite, d.h. wenn die Positionierung schon fertig ist und der Navi positioniert nicht neu.

      Das ist nur eine der Probleme. 2 von dem <div>'s sind ja ganz normal (ohne JS) positioniert.
      Wenn ich den Script in eine 'function bild()' lege und <body onLoad="bild();"> schreibe kommt es noch schlimmer, sogar unter dem IE.

      Grüße
      Thomas

      1. Hallo,

        Das duch JS plazierte <div> sollte etwa in der Mitte des Fensterns erscheinen. Tut es aber keines wegs.
        Weiss jemand was da los ist?

        Ich probier's mal:

        [...]
        #oben { position:absolute; top:50px; left:50px; width:200px; height:50px; }
        #mitte { position:absolute; top:48%; left:45%; width:200px; height:50px; }
        -->
        </style>
        [...]
          x = screen.availWidth/2;
          y = screen.availHeight/2;
          hoehe = y-25
          breite = x-100
        document.write("<div id="bild" style="position:absolute; top:"+hoehe+"px; left:"+breite+"px; width:200px; height:50px;">");
        document.write("<img src="bild.gif" width=200 height=50 border=0 alt="WOISTES">");
        document.write("</div>");
        [...]

        Du schreibst ein <div> mit ID. ID existiert aber nicht in CSS-Definition.
        Darin vermute ich die Krux. Die STYLE-Angabe wird wahrscheinlich nicht wirksam, weil ID.
        Aber in ID ist nichts defniert, also erscheint das Bild an der Stelle, an der es auch ohne egliche CSS erscheinen wuerde.
        Lass mal ID weg. Dann muesste es eigentlich gehen.
        Oder brauchst Du eine ID, um spaeter auf das Element zuzugreifen?
        In dem Fall muesste man wohl noch ein <DIV> mit ID um Dein <DIV> drumrumbasteln.

        BTW: Du wolltest - so hast Du geschrieben -, dass das Bild in der Mitte des Fensters erscheint. Du benutzt aber die Mitte des BIldschirms (screen.availHeight/-Width).
        Geeigneter self.innerHeight/-Width.
        Komplizierter wird es, wenn Du sowas fuer MSIE machen willst.
        Da muesste man auf die passenden Eigenschaften von document.body zurueckgreifen. Aber die stehen erst nach dem Laden der Seite zur Verfuegung, also wohl nix damit, HTML-Code so zu generieren, dass gleich beim Laden der richtige Anzeigeort ermittelt und benutzt wird.
        Fazit: Mir faellt fuer MSIE nix anderes ein, als nachtraeglich zu verschieben (sichtbar machen am besten erst danach).

        Das ist nur eine der Probleme. 2 von dem <div>'s sind ja ganz normal (ohne JS) positioniert.
        Wenn ich den Script in eine 'function bild()' lege und <body onLoad="bild();"> schreibe kommt es noch schlimmer, sogar unter dem IE.

        Na ja, das ist nun wieder logisch.
        Nach dem Laden der Seite (BODY onload), d.h., nachdem "<<BODY><<BODY>" geladen ist, ist die Seite fertig. HTML-Code - nichts anderes entsteht durch document.write() -, der danach kommt, gehoert nicht mehr zu dieser Seite.

        So, habe ich es jetzt geschafft, alle evtl. noch vorhandenen Klarheiten vollends zu beseitigen? ;-))

        Christine

        1. Huch, meine heutigen Vertipper tragen sicher zusaetzlich zur Verwirrung bei.
          Ist besser, ich unternehme einen Korrekturversuch:

          Du schreibst ein <div> mit ID...

          Du schreibst ein <div> mit ID...

          Nach dem Laden der Seite (BODY onload), d.h., nachdem "<<BODY><<BODY>" ...

          Nach dem Laden der Seite (BODY onload), d.h., nachdem "</BODY></HTML>" ...

          Christine

        2. Hallo Christine!

          Du schreibst ein <div>h; mit ID. ID existiert aber nicht in CSS-Definition.
          Darin vermute ich die Krux. Die STYLE-Angabe wird wahrscheinlich nicht wirksam, weil ID. Aber in ID ist nichts defniert, also erscheint das Bild an der Stelle, an der es auch ohne egliche CSS erscheinen wuerde. Lass mal ID weg. Dann muesste es eigentlich gehen.

          »»

          Das war es, in der Tat.

          Geeigneter self.innerHeight/-Width.
          Komplizierter wird es, wenn Du sowas fuer MSIE machen willst.
          Da muesste man auf die passenden Eigenschaften von document.body zurueckgreifen.

          »»

          Danke, ich habe es mir jetzt einfach gemacht:

          if (document.layers){
            x = self.innerWidth/2;
            y = self.innerHeight/2;
            }
            else {
            x = document.body.offsetWidth/2;
            y = document.body.offsetHeight/2;
            }
            hoehe = y-25;
            breite = x-100;

          »»Aber die stehen erst nach dem Laden der Seite zur Verfuegung, also wohl nix damit, HTML-Code so zu generieren, dass gleich beim Laden der richtige Anzeigeort ermittelt und benutzt wird.

          Fazit: Mir faellt fuer MSIE nix anderes ein, als nachtraeglich zu verschieben (sichtbar machen am besten erst danach).

          Ja. Obwohl gerade beim IE erscheinen mir CSS-Prozentangaben (trozt der Nachteile) besser geeignet, da beim ändern der Fenstergröße diese auch mitgeändert werden.

          Na ja, das ist nun wieder logisch.
          Nach dem Laden der Seite (BODY onload), d.h., nachdem "<<BODY><<BODY>" geladen ist, ist die Seite fertig. HTML-Code - nichts anderes entsteht durch document.write() -, der danach kommt, gehoert nicht mehr zu dieser Seite.

          »»

          AHA! ;-)

          So, habe ich es jetzt geschafft, alle evtl. noch vorhandenen Klarheiten vollends zu beseitigen? ;-))

          Ich hätte gern, daß alle meine "Klarheiten" so beseitigt werden! =:)

          Schnöne Grüße
          Thomas