saskia: Javascript - Beim Klicken soll sich ein Fenster öffnen

Grüßt euch,

zurzeit erstelle ich eine (private) Homepage und möchte folgendes erstellen: In der Navigation befindet sich der Punkt "Login". Sobald man auf "Login" klickt, soll drunter das Fenster fürs Login erscheinen. Nur kriege ich das leider so nicht hin.

Ich benutze folgenden Script:

	<script>$('#button-login').click(function(){ 
  $('#login').toggle();
});
	</script>

Das Problem bei diesem Script ist jedoch, dass schon beim Aufrufen der Seite das Login-Fenster zu sehen ist und erst bei einem Klick auf "Login" es verschwindet.

  1. @@saskia

    	<script>$('#button-login').click(function(){ 
      $('#login').toggle();
    });
    	</script>
    

    Das Problem bei diesem Script ist jedoch, dass schon beim Aufrufen der Seite das Login-Fenster zu sehen ist und erst bei einem Klick auf "Login" es verschwindet.

    toggle() schaltet die Sichtbarkeit um. Du musst das Element per Stylesheet initial unsichtbar machen:

    #login { display: none }
    

    Damit das auch bei Screenreadern funktioniert, sollte das Element als Dialogbox gekennzeichnet werden:

    <div id="login" role="dialog">
    

    Ergänzung:

    Wenn das Login auch ohne JavaScript funktionieren soll, darf das ELement natürlich nicht so versteckt werden, sondern nur dann, wenn JavaScript ausgeführt wird: entweder

    $('#login').hide();
    

    oder dem html-Element eine Klasse js geben

    $('html').addClass('js');
    

    und per Stylesheet das Element nur verstecken, wenn diese Klasse gesetzt ist:

    .js #login { display: none }
    

    LLAP 🖖

    --
    Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
    1. Vielen Dank für die Hilfe! Klappt nun! :D

  2. Hallo und guten Tag,

    zurzeit erstelle ich eine (private) Homepage und möchte folgendes erstellen: In der Navigation befindet sich der Punkt "Login". Sobald man auf "Login" klickt, soll drunter das Fenster fürs Login erscheinen. Nur kriege ich das leider so nicht hin.

    Ich benutze folgenden Script:

    	<script>$('#button-login').click(function(){ 
      $('#login').toggle();
    });
    	</script>
    

    Das Problem bei diesem Script ist jedoch, dass schon beim Aufrufen der Seite das Login-Fenster zu sehen ist und erst bei einem Klick auf "Login" es verschwindet.

    Würde es auch ausreichen, wenn sich durch CSS ein Element zur Anzeige kommt, was das Login-Formular enthält?

    Das hat Gunnar hier nämlich schon mal sehr schön gezeigt. Ich finde es leider nicht mehr, nur in einem alten Projekt, leider hinter der AUTH-Wall...

    Grüße
    TS

    1. @@TS

      Würde es auch ausreichen, wenn sich durch CSS ein Element zur Anzeige kommt, was das Login-Formular enthält?

      Das hat Gunnar hier nämlich schon mal sehr schön gezeigt. Ich finde es leider nicht mehr,

      Du meinst Maintaining CSS Style States using “Infinite” Transition Delays?

      LLAP 🖖

      --
      Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
      1. @@Gunnar Bittersmann

        Würde es auch ausreichen, wenn sich durch CSS ein Element zur Anzeige kommt, was das Login-Formular enthält?

        Das hat Gunnar hier nämlich schon mal sehr schön gezeigt. Ich finde es leider nicht mehr,

        Du meinst Maintaining CSS Style States using “Infinite” Transition Delays?

        Hier ist das Posting und hier ist der Pen.

        LLAP 🖖

        --
        Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
  3. Liebe(r) saskia,

    	<script>$('#button-login').click(function(){ 
      $('#login').toggle();
    });
    	</script>
    

    "toggle" schaltet zwischen zwei Zuständen hin und her. Anfangs ist das Teil sichtbar und ein Klick schaltet es unsichtbar (weil eben toggle). Mach doch gleich einen toggle, dann ist es unsichtbar - und das auch nur, wenn JavaScript verfügbar ist:

        <script>$('#button-login')
                    .toggle() // gleich unsichtbar toggln
                    .click(function(){ 
                        $('#login').toggle(); // bei Klick (un-)sichtbar schalten
                    })
                ;
    	</script>
    

    Liebe Grüße,

    Felix Riesterer.

    1. @@Felix Riesterer

      Mach doch gleich einen toggle

      Das ist aber auch eher ein schmutziger Hack als eine vernünftige Lösung. Also nein zu toggle().

      dann ist es unsichtbar

      Mit hide() ist es garantiert unsichtbar. Und der Code aussagekräftig.

      Das sagte ich doch bereits.

      und das auch nur, wenn JavaScript verfügbar ist:

      Auch das.

      LLAP 🖖

      --
      Ist diese Antwort anstößig? Dann könnte sie nützlich sein.