Frage verzögert anzeigen: Frage "flimmert" schon direkt nach dem Laden der Seite kurz auf?

Question

Guten Tag!

Ich möchte eine Frage verzögert auf einer Fragebogenseite einblenden. Das funktioniert soweit ganz gut, mit diesem Code:

question('IH25');
<script type="text/javascript">
// <!--

// Funktion zum Einblenden der Frage
function showContent() {
  document.getElementById("IH25_qst").style.display="block";

 }

// Nach dem Laden der Fragebogen-Seite das Script starten
SoSciTools.attachEvent(window, "load",
  function() {
    // Objekt heraussuchen
    document.getElementById("IH25_qst").style.display = "none";
    // Den Timer starten
    window.setTimeout(showContent, 2000); // Nach 6 Sek = 2.000 ms
  }
);
 
// -->
</script>

Leider flimmert die Frage für einen Sekundenbruchteil bereits direkt nach dem Laden der Fragebogenseite auf, bevor sie ordnungsgemäß verschwindet und erst dann wieder korrekt auftaucht, wenn sie soll. Kann man das "Flimmern" vermeiden? Sonst müsste ich das über Seitenwechsel lösen, und das wird bei ein paar Dutzend Fragen schnell umständlich.

Vielen Dank und viele Grüße!

Answer 1

Kann man das "Flimmern" vermeiden?

Ja, und zwar indem Sie die Frage standardmäßig verbergen mittels folgendem PHP-Code.

pageCSS('
    #IH25_qst {
        display: none;
    }
');

Comments

Super, vielen Dank! Eine kleine Nachfrage noch: Ich habe dasselbe Problem mit dem next-Button, aber das lässt sich irgendwie nicht mit dem gleichen Mittel lösen:

pageCSS('#nextButton {display: none;}');

hilft leider nicht...

Danke schonmal für die Hilfe!

---

Der Weiter-Knopf hat in aller Regel die ID "submit0", also

#submit0 {
  display: none;
}

Aber vorsicht ... wenn jemand kein JavaScript aktiviert hat, dann kommt er/sie nicht weiter. Das kann zum Problem für die Barrierefreiheit werden.

---

Soweit, sogut. Leider wird er dann gar nicht mehr auf der Seite angezeigt, selbst wenn er soll, mit folgendem Code:

<script type="text/javascript">
<!--
// Knopf zunächst ausblenden
SoSciTools.submitButtonsHide();
// Nach Ablauf von 2 Sek = 2000 ms wieder einblenden
window.setTimeout(
  SoSciTools.submitButtonsDisplay, 3000
)
// -->
</script>

---

Das liegt daran, dass submitButtonsDisplay() den Wert der Eigenschaft "display" auf den Standard-Wert zurücksetzt. Und in Ihrem Fall ist das eben display:none.

Sie können
windows.getElementById("submit0").style.display = "inline";
verwenden, wenn Sie das von Ihnen definierte display:none überschreiben möchten.

Oder Sie können das Ausblenden via JavaScript zu Beginn der Seite erledigen statt mittels CSS, also

<script>
window.addEventListener("DOMContentLoaded", function() {
    windows.getElementById("submit0").style.display = "none";
});
</script>

---

Großartig, vielen herzlichen Dank!