Akkordeon blitzt bei Seitenwechsel kurz auf

[c.boeckmann]

Hi, nachdem ich stundenlang an meinem schicken Login-Aufklapp-Akkordeon gebastelt habe (im mootools template "display -1" zugefügt), funktioniert es jetzt auch prima und sieht sehr schick aus, aber leider blitzt bei jedem Seitenwechsel das eingeklappte Akkordeon mit dem Login-Bereich kurz auf - und das sieht alles andere als sauber aus.

Hat jemand eine Idee, wie ich das abschalten kann?

Danke schon mal,
Corinna

[KlausGrenoble]

Hat jemand eine Idee, wie ich das abschalten kann?

Vielleicht hilft Dir dies hier weiter:
https://community.contao.org/de/show...l=1#post134862

Oder hat vielleicht etwas mit jQuery und MooTools zu tun. Stören sich vielleicht gegenseitig.
Ich kenn' mich da aber viel zu wenig aus...

[c.boeckmann]

Danke, den Thread hatte ich schon gesehen, aber der bietet keine Lösung ... Ich benutze nur Mootools und das Template ist bis auf das hinzugefügte "display: -1" das Standart-Template.

[alexgr]

Das Akkordeon ist ja aus .toggler und .accordion aufgebaut. Das MooTools-Accordion-JavaScript fügt, wenn Du display: -1 setzt, dem .accordion Inline-Styling fürs Verbergen hinzu. Das sieht bei mir so aus (ob es irgendeine Browserweiche gibt, weiß ich nicht):

<div class="accordion" style="padding-top: 0px; border-top: medium none; padding-bottom: 0px; border-bottom: medium none; overflow: hidden; height: 0px; opacity: 0; visibility: hidden;" […]>

Das heißt das Akkordeon ist so lange aufgeklappt bis das JavaScript von MooTools anspringt und es verbirgt. Je nach Browser und Ladezeit der Seitenbestandteile kann dieser Vorgang sichtbar werden (schaust Du zufällig mit Chrome drauf?).

Abhilfe kannst Du schaffen, indem Du das Inline-CSS in Dein CSS aufnimmst, denn das sollte schneller/eher gerendert sein als das JavaScript:

.accordion {
    padding-top: 0px;
    border-top: medium none;
    padding-bottom: 0px;
    border-bottom: medium none;
    overflow: hidden;
    height: 0px;
    opacity: 0;
    visibility: hidden;
}

.accordion müsstest Du ggf. an Dein spezielles Akkordeon anpassen, falls Du noch andere Akkordeons hast, die sich davon unterscheiden.

Ich weiß allerdings wie gesagt nicht, ob sich das CSS eventuell je nach Browser unterscheidet. Du müsstest das also mal mit ein paar Browsern, ggf. auch älteren, durchtesten – oder vielleicht kann noch jemand was dazu sagen, der mehr übers MooTools Accordion weiß.

[Andreas]

Damit zerstörst du aber das Fallback. Also keine Ansicht, wenn JS ausgeschaltet ist.

Man müsste die Seite sehen. Versuche das JS performanter einzubinden. Und auf jeden Fall auch MooTools von lokal zu laden, anstatt von einem CDN.

[c.boeckmann]

Danke für eure Tipps! Mootools habe ich lokal geladen. Habe es auch in verschiedenen Browsern getestet, überall das gleiche Aufblitzen. Zu JS performanter finde ich nichts ... Meinst du, ich soll mootools anders einbinden? Kann ich es anders laden? Die Seite ist leider nicht öffentlich, aber wenn ich es richtig verstehe war es dann wohl keine gute Idee von mir ein Ausklappmenü fürs Login mit Akkordeon zu relisieren. Es wird der Inhalt der Seite geladen und dann das Javascript ausgeführt, ergo: Wenn alles zu langsam läuft, dann sieht man das Loginmenü kurz bis Mootools es einklappt, richtig? Aber was wäre die Alternative? Über css? Oder muss ich das Template ändern? Habt ihr noch mal einen Denkanstoss für mich?

[c.boeckmann]

Mit dem Inline-css von alexgr klappt es tatsächlich gut. Wenn jetzt jemand Javascript ausgeschaltet hat und es keinen Fallback gibt, bedeutet das dann, dass das Menü einfach nicht angezeigt wird?

[Andreas]

Ja genau, nicht sichtbar, entsprechend der CSS-Deklarationen welche oben aufgelistet sind.

Versuche eine Seite zu zeigen, kannst ja Dummycontent einfügen. Sonst kann man da schwer sagen, warum es so langsam geht.

Was du noch versuchen kannst ist
entweder folgende Eigenschaften mit einem anderen JS "früher" aufzusetzen.

.accordion {
    overflow: hidden;
    height: 0;
} 

oder über eine CSS-Animation das Element etwas später anzuzeigen.

.accordion {
  height: auto;
  overflow: hidden;
  animation-name: showLate;
  animation-duration: 2s;
}
@keyframes showLate {
  from {
    height: 0;
  }
  to {
    height: 0;
  }
} 

Die Animation startet sofort, also height:0, und springt am Ende (nach 2 Sekunden) wieder auf den gesetzten Wert, height:auto.