php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 18-12-2010, 12:47
lx-club
 Registrierter Benutzer
Links : Onlinestatus : lx-club ist offline
Registriert seit: Nov 2003
Beiträge: 846
lx-club ist zur Zeit noch ein unbeschriebenes Blatt
Standard jquery - overlay dynamisch an Fenstergröße anpassen

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.

Code:
$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?
Mit Zitat antworten
  #2 (permalink)  
Alt 18-12-2010, 13:09
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #3 (permalink)  
Alt 18-12-2010, 13:30
lx-club
 Registrierter Benutzer
Links : Onlinestatus : lx-club ist offline
Registriert seit: Nov 2003
Beiträge: 846
lx-club ist zur Zeit noch ein unbeschriebenes Blatt
Standard

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

HTML-Code:
<div class="overlay">
    <span class="close">[X] Schliessen</span>
    <div class="overlay-content">
        <p>Inhalt Inhalt</p>
    </div>
</div>
Mit Zitat antworten
  #4 (permalink)  
Alt 18-12-2010, 13:38
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Die Höhe des Elements hängt maßgeblich davon ab, wie es und seine Inhalte formatiert sind.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #5 (permalink)  
Alt 18-12-2010, 13:41
lx-club
 Registrierter Benutzer
Links : Onlinestatus : lx-club ist offline
Registriert seit: Nov 2003
Beiträge: 846
lx-club ist zur Zeit noch ein unbeschriebenes Blatt
Standard

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

HTML-Code:
.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;
            }
Mit Zitat antworten
  #6 (permalink)  
Alt 18-12-2010, 13:44
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Wenn ich das in ein HTML-Dokument einfüge, zeigt mir Firebug eine offsetHeight von 102px, und die erscheint auch plausibel.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #7 (permalink)  
Alt 18-12-2010, 13:48
lx-club
 Registrierter Benutzer
Links : Onlinestatus : lx-club ist offline
Registriert seit: Nov 2003
Beiträge: 846
lx-club ist zur Zeit noch ein unbeschriebenes Blatt
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 19-12-2010, 11:59
lx-club
 Registrierter Benutzer
Links : Onlinestatus : lx-club ist offline
Registriert seit: Nov 2003
Beiträge: 846
lx-club ist zur Zeit noch ein unbeschriebenes Blatt
Standard

@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.
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
jQuery Overlay: Kann Element nicht ansteuern kerbstone HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 12 04-12-2010 12:53
PDF beim Öffnen an Fenstergröße anpassen thesilencer5 HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 3 16-12-2008 17:34
Bildgröße dynamisch anpassen Miomo PHP Developer Forum 3 28-04-2008 19:35
iframe dynamisch anpassen seitsu HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 10 09-08-2005 12:53
Fenstergröße anpassen? TimoW HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 2 30-07-2003 16:55

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

PHP Server Monitor

PHP Server Monitor ist ein Skript, das prüft, ob Ihre Websites und Server betriebsbereit sind.

11.09.2018 Berni | Kategorie: PHP/ Security
PHP WEB STATISTIK ansehen PHP WEB STATISTIK

Die PHP Web Statistik bietet Ihnen ein einfach zu konfigurierendes Script zur Aufzeichnung und grafischen und textuellen Auswertung der Besuchern Ihrer Webseite. Folgende zeitlichen Module sind verfügbar: Jahr, Monat, Tag, Wochentag, Stunde Folgende son

28.08.2018 phpwebstat | Kategorie: PHP/ Counter
Affilinator - Affilinet XML Produktlisten Skript

Die Affilinator Affilinet XML Edition ist ein vollautomatisches Skript zum einlesen und darstellen der Affili.net (Partnerprogramm Netzwerk) Produktlisten und Produktdaten. Im Grunde gibt der Webmaster seine Affilinet PartnerID ein und hat dann unmittelb

27.08.2018 freefrank@ | Kategorie: PHP/ Partnerprogramme
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 18:45 Uhr.