Beiträge von Amon

Amon · 20. Februar 2019

Mit kleinen Anpassungen und mittels Hilfe von diesem Autoprefixer hab ich es für Webkit hinbekommen.

Nur im IE klappt es leider noch nicht .

Dort scheint sich main nicht um den verfügbaren ungenutzten Platz zu vergrößern und der Footer sitzt direkt darunter und nicht am unteren Bildschirmrand.

Warum?

Das ist mein aktueller Code:

CSS

body {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;   
 min-height: 100vh;
 margin: 0 auto;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
 font-size: 1em;
 font-family: Arial, sans-serif;
 overflow-y:scroll;
}

.main {
 -webkit-box-flex: 1;
     -ms-flex: 1 0 auto;
         flex: 1 0 auto;
}

.footer {
 width: 100%;
 margin: 60px 0px 10px 0px;
}

Alles anzeigen

HTML

<body>
 <div class="main">
  gesamter Inhalt...
 </div>

 <div class="footer">
  Footer
 </div>

</body>

Amon · 19. Februar 2019

Hallo Forum,

ich brauche mal wieder eure Hilfe.

Es geht um die Abwärtskompatibilität eines Flexbox-Layouts für ältere Browser.

Konkret habe ich über das Flexbox-Modell einen Footer, der sich immer am unteren Bildschirmrand befindet, auch bei sehr wenig Hauptinhalt.

Gelöst hab ich das ganze folgendermaßen:

CSS

body {
 display: flex;
 min-height: 100vh;
 margin: 0 auto;
 flex-direction: column;
}

main {
 flex: 1;
}

footer {
 width: 100%;
 margin: 60px 0px 10px 0px;
}

Alles anzeigen

HTML

<body>

 <main>
  Hier befindet sich der komplette Inhalt...
 </main>

 <footer>
  Hier sitzt der Footer (mit 10px Abstand zum unteren Rand und 60px Abstand zum Inhalt...
 </footer>

</body>

Alles anzeigen

Das Ganze funktioniert wunderbar in modernen Browsern, die das Flexbox-Modell verstehen.

Ich möchte aber natürlich auch, dass es in älteren Browsern funktioniert.

Ich habe schon herausgefunden, dass es dafür z.B. ms-flex oder webkit-flex Präfixe gibt.

Nur weiß ich leider nicht, wie die genaue Syntax auszusehen hat. Ich habe schon alles mögliche probiert.

Es klappt einfach nicht bei mir.

Scheinbar spielt wohl auch die richtige Reihenfolge bei der Deklaration eine Rolle.

Kann mir da jemand auf die Sprünge helfen?

Amon · 10. Februar 2019

Hallo Forum,

da ich mich mit JavaScript null auskenne, brauche ich mal eure Hilfe beim anpassen von 2 JS Funktionen.

Hintergrund:

Ich setze auf einer Homepage eine Fotogalerie mit der Lightbox-Variante "MediaboxAdvanced" ein.

Es funktioniert auch alles soweit.

Mein einziges Problem ist, dass der Code nicht HTML5 valid ist.

Das liegt daran, dass die Lightbox über "rel=lightbox" angesprochen wird. Also z.B. <a href="bild.jpg" rel="lightbox">.

Und lightbox ist halt in HTML5 kein definiertes Keyword für das rel Attribut.

Um das Problem zu lösen, habe ich irgendwo gelesen, dass man die Lightbox einfach mit z.B. <a href="bild.jpg" data-rel="lightbox"> aufrufen soll.

Damit das funktioniert, muss man natürlich auch den JavaScript Teil abändern, so dass nach "data-rel=lightbox" anstatt "rel=lightbox" gesucht wird.

Wie ich hier gelesen hab, müsste man in der mediaboxAdv-1.3.4b.js wohl diese 2 Funktionen ändern:

Code

linkMapper = linkMapper || function(el) {
                elrel = el.rel.split(/[\[\]]/);
                elrel = elrel[1];
                return [el.href, el.title, elrel];
            };

Code

Mediabox.scanPage = function() {
    var links = $$("a").filter(function(el) {
        return el.rel && el.rel.test(/^lightbox/i);
    });
    $$(links).mediabox({/* Put custom options here */}, null, function(el) {
        var rel0 = this.rel.replace(/[[]|]/gi," ");
        var relsize = rel0.split(" ");
        return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1]));
    });
};

Was muss ich ändern, damit der HTML-Code <a href="bild.jpg" data-rel="lightbox"> wieder die Lightbox triggert?

Beiträge von Amon

Wie Flexbox anpassen für ältere Browser?

Wie Flexbox anpassen für ältere Browser?

Hilfe bei Anpassung Suchstring