Javascript - Beim Klicken soll sich ein Fenster öffnen

[saskia]

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.

[Gunnar Bittersmann]

@@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 🖖

[saskia]

Vielen Dank für die Hilfe! Klappt nun! :D

[TS]

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

[Gunnar Bittersmann]

@@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 🖖

[Gunnar Bittersmann]

@@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 🖖

[Felix Riesterer]

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.

[Gunnar Bittersmann]

@@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 🖖