Wie kann ich zufrieden, wenn Javascript nicht verfügbar ist, versteckt es, wenn Javascript verfügbar ist und nicht in jedem Fall flimmern?

StackOverflow https://stackoverflow.com/questions/1006798

Frage

Ich habe ein einfaches Formular für Versandoptionen und ich bin mit Javascript Auto senden Sie das Formular, wenn jemand eine neue Option aus der Dropdown-Liste auswählt.

Um Browsern zu unterstützen, ohne Javascript gibt es auch eine Taste, um das Formular abzuschicken. Dieser Button wird mit Hilfe von JavaScript versteckt.

Dies bedeutet jedoch, meine Taste für eine kurze Zeit sichtbar ist und kann ein Flimmern verursachen, da der Rest des Inhalts neu formatiert wird.

Kann jemand empfehlen, eine Möglichkeit, die Taste zu schaffen, so dass er sich versteckt beginnt, wird aber sichtbar gemacht nur, wenn Javascript nicht verfügbar ist? zB beginnt mit display: none; und auf magische Weise ändern Anzeige: Block; wenn und nur wenn kein Javascript ist.

War es hilfreich?

Lösung

Just alles innerhalb <noscript> ... </noscript> Tags gesetzt und dann wird es nur angezeigt, wenn JavaScript nicht aktiviert / verfügbar ist.

Andere Tipps

Es hängt davon ab, wie Sie es versteckt sind, sind Sie einen DOM bereit oder ein Fenster bereit, mit? Fenster bereit wartet auf alle Bilder zum Download, die in der Regel viel zu lang ist.

Für die Zugänglichkeit, gründe, würde ich es verstecken auf DOM geladen. Aber um sicherzustellen, dass es wird nicht angezeigt, können Sie es in einem noscript Elemente setzen 

<noscript>
    <input type="submit" />
</noscript>

Wie bei der letzten Absatz, nichts dergleichen in Abwesenheit von JavaScript passieren kann.

Schreiben Sie einfach unaufdringliche Javascript: http://icant.co .uk / articles / sieben-Regeln-of-unaufdringlich-javascript / .

Was Sie tun, ist Ihre Seite als normale Seite schreiben, aber dann am Ende den Code verwenden, um die Javascript zu starten, und starten Sie die Seite der Bearbeitung interaktiver zu gestalten. Das Schöne daran ist, dass, wenn sie haben Javascript deaktiviert die Seite ist normal, aber, wenn sie es haben auf, dann können Sie anmutig weitere Funktionen hinzuzufügen.

Ich bin kein großer Fan von der Option, wie viele zusätzlichen Codes bedeuten kann, dass ist nicht erforderlich heruntergeladen werden.

Auf dieser Seite sehen Sie Kommentar 5 für eine gute Lösung in der Lage sein, Änderungen vorzunehmen, bevor irgendetwas tatsächlich angezeigt wird: http://dean.edwards.name/weblog/2006/06/again/

Start- und End-Tags

Sie können Skript vor und nach dem Absenden-Button verwenden, um verstecktes div Element zu schreiben.

Eine Möglichkeit wäre, mit Taste zum Starten gezeigt, und dann seine CSS von JavaScript ändern: 

<head>
    ...
    <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8">
    <script>
        document.styleSheets[0].addRule(".hideMe", "display:none");
    </script>
    ...
</head>

Ändern des Sheet anstelle der Schaltfläche (und setzen diesen Code außerhalb eines onload) sorgt dafür, dass es versteckt werde, bevor die Schaltfläche gezogen wird.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top