Andreas: Overlay-Div bildschirmfüllend anzeigen

Hallo,

ich möchte in meiner Ajaxseite ein Overlay-Div anzeigen, wenn Operationen ausgeführt werden. Div und Anzeigemechanismus ist schon vorhanden und funktioniert super. Leider ist die CSS-Einstellung für das Div noch nicht optimal.

Hier mal die Einstellungen:
position: absolute;
background-image: url('images/progessBack.png' );
width: 100%;
height: 100%;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;

Wenn ich in der Seite nun etwas runtergescrollt habe, wird das Div trotzdem von ganz oben angezeigt und dann nur in der höhe eines Bildschirms. D.h. es ist irgendwo auf der Seite Schluss mit dem Div. Das kann natürlich nicht so bleiben.

Gibt es denn eine Einstellung, wie ich das Div wirklich immer auf der ganzen Seite anzeigen kann? Als Beispiel kann man die Siete wetter.com verwenden und dort in der Schnellsuche eine Suche durchführen.

Super wäre auch, wenn die Inhalte im Div auch immer in der Mitte der Seite angezeigt werden.

Andreas

  1. Hallo,

    2 Möglichkeiten mit Javascript:

    1.) Du setzt die Höhe des DIV auf tatsächliche Höhe des body http://de.selfhtml.org/javascript/objekte/all.htm#offset_height

    2.) Du ermittelst die Scrollposition von oben und setzt diesen Wert als top-Position des DIVs http://de.selfhtml.org/javascript/objekte/window.htm#page_y_offset

    Grüße Basti

    1. 2 Möglichkeiten mit Javascript:

      für gute browser empfiehlt sich in jedem fall die methode mit position: fixed per css (da man dann auf javascript nicht angewiesen ist)

      1. Hallo,

        2 Möglichkeiten mit Javascript:
        für gute browser empfiehlt sich in jedem fall die methode mit position: fixed per css (da man dann auf javascript nicht angewiesen ist)

        stimmt, daran habe ich nicht gedacht - allerdings sollte man, wenn das div, wie beschrieben, während AJAX-Aktionen eingeblendet werden soll, von aktiviertem Javascript ausgehen können;-)

        Grüße Basti

        1. allerdings sollte man, wenn das div, wie beschrieben, während AJAX-Aktionen eingeblendet werden soll, von aktiviertem Javascript ausgehen können;-)

          so weit hab ich jetzt grade nicht gedacht :D
          aber warum soll javascript was berechnen, wenns eh css auch kann?

          1. so weit hab ich jetzt grade nicht gedacht :D
            aber warum soll javascript was berechnen, wenns eh css auch kann?

            vor allem kriegst du mit css nicht solche unschönen "ruckler" beim scrollen. eine kombination aus CSS + JS für unbefähigte browser  wäre natürlich am besten.