jquery - overlay dynamisch an Fenstergröße anpassen

[lx-club]

Hi,

ich möchte ein Overlay erstellen, in dem viel Text angezeigt wird. Die Höhe soll nun max. so groß werden wie das Browserfenster.

$overlay.appendTo('body');

Leider kann ich die Höhe des Overlay erst abfragen, wenn es schon sichtbar ist. Um die Höhe aber dynamisch anzupassen müsste ich ja vor der Ausgabe schon wissen wie hoch das Overlay ist. Wenn ich vor den obigen Befehl $overlay.height(); angebe, erhalte ich einen falschen Wert. Hat jmand eine Idee wie ich die Höhe schon vor der Ausgabe ermitteln kann?

[wahsaga]

Vor dem Einhängen ins DOM hat ein Element keine abfragbaren Maße.

Du kannst es höchstes erst mal versteckt (visbility) einfügen, dann die Maße abfragen, und anschließend sichtbar schalten.
Falls du befürchtest, dass es größer ist als der Viewport, und deshalb Scrollbalken verursachen wird, hilft absolute Positionierung im negativen Bereich oben links.

[lx-club]

Hi,

das klappt gut, die Höhe wird mir nun angezeigt.
Leider bekomme ich 39px angezeigt und wenn ich das aber ausmesse sind es 119px. Der Balken zum Schliessen ist ja schon 35px hoch.

Hast du da evtl. noch einen Tip?

$overlay.height() => 39px
$overlay.outerHeight() => 49px

<div class="overlay">
    <span class="close">[X] Schliessen</span>
    <div class="overlay-content">
        <p>Inhalt Inhalt</p>
    </div>
</div>

[wahsaga]

Die Höhe des Elements hängt maßgeblich davon ab, wie es und seine Inhalte formatiert sind.

[lx-club]

hier mal die Definitionen:
Auf eine Höhenangabe habe ich im CSS verzichtet.

.overlay{

                width: 600px;
                background-color: #f4f4f4;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -300px;
                margin-top: -300px;
                border: 5px solid #f90;
                -moz-border-radius: 5px;

            }

            .overlay span{
                color: #fff;
                display: block;
                background-color: #f90;
                padding: 5px;
                cursor: pointer;
            }

            .overlay-content{
                padding: 5px;
            }

[wahsaga]

Wenn ich das in ein HTML-Dokument einfüge, zeigt mir Firebug eine offsetHeight von 102px, und die erscheint auch plausibel.

[lx-club]

Ich hatte es auch grad mal ins Dokument eingefügt, und dann stimmt die Ausgabe.
Das HTML erzeuge ich alles per Javascript. Die Ausgabe sieht allerdings genauso aus. Dann muss dort noch irgendwo ein Fehler sein.

[lx-club]

@wahsaga

ich hatte hide() zum verstecken genommen, aber dadurch haben die Elemente ja keine Dimensionen mehr.
Hab es dann mit visbility: hidden gemacht (wie du auch schon vorgeschlagen hast) und das funktioniert. Da das Overlay eh absolut positioniert ist, wirkt sich diese CSS-Angabe auch nicht auf das restliche Layout aus.