nicht angemeldet
Matthias Scharwies
klawischnigg
Der Martin
Gunnar Bittersmann
Gunnar Bittersmann
Der Martin
Gunnar Bittersmann
Hallo Leute,
ich arbeite mich noch in HTML und CSS ein, bin also kein Profi.
Ich gestalte zur Zeit eine Webseite und habe auf meine Startseite vier Icons gepackt, welche einen Effekt auslösen sollen, sobald man auf diese klickt. Das habe ich eigenlich gut hinbekommen, allerdings nur mit einem "a-Element". Das Problem hierbei ist, dass sobald man auf das entsprechende Icon klickt (wegen <a href="#">) die Seite immer auf den Seitenanfang scrollt.
Ich möchte einfach nur, dass beim klicken der entsprechende Text erscheint.
Hier findet ihr meinen Code: https://jsfiddle.net/8rd7usmc/4/
Wie kann ich den Code umschreiben, dass das nicht passiert?
Oder gibt es eine Möglichkeit, zu verhindern, dass beim klicken die Seite hochscrollt?
Vielen Dank vorab :)
Wünsche ein schönes Wochenende
Grüße
Servus!
Hallo Leute,
ich arbeite mich noch in HTML und CSS ein, bin also kein Profi.
Ich gestalte zur Zeit eine Webseite und habe auf meine Startseite vier Icons gepackt, welche einen Effekt auslösen sollen, sobald man auf diese klickt. Das habe ich eigenlich gut hinbekommen, allerdings nur mit einem "a-Element". Das Problem hierbei ist, dass sobald man auf das entsprechende Icon klickt (wegen <a href="#">) die Seite immer auf den Seitenanfang scrollt.
Das ist das Standardverhalten bei einem Link. Dieser Link zeigt auf einen internen Anker ( eingeleitet durch #), den es nicht gibt und geht deshalb zum Seitenanfang.
Ich möchte einfach nur, dass beim klicken der entsprechende Text erscheint.
Dann würde ich einen Button nehmen.
Hier findet ihr meinen Code: https://jsfiddle.net/8rd7usmc/4/
Wie kann ich den Code umschreiben, dass das nicht passiert?
Oder gibt es eine Möglichkeit, zu verhindern, dass beim klicken die Seite hochscrollt?
Das kann man mit JavaScript erreichen. Besser ist es einen Button zu verwenden.
Herzliche Grüße
Matthias Scharwies
Servus!
Grad auf Twitter gefunden:
https://css-tricks.com/a-complete-guide-to-links-and-buttons/
Herzliche Grüße und ein schönes Wochenende!
Matthias Scharwies
@@Matthias Scharwies
Grad auf Twitter gefunden:
Auf @SELFHTML?
Wie das da wohl hinkommt … 😏
😷 LLAP
Servus!
@@Matthias Scharwies
Grad auf Twitter gefunden:
Auf @SELFHTML?
Wie das da wohl hinkommt … 😏
Hatte mich schon gewundert, weil es ja schon von ~März~ Februar 2020 war. 😀
Herzliche Grüße
Matthias Scharwies
Vielen Dank für deine Nachricht. Tatsächlich hat mir einfach nur der Hinweis "button" gefehlt. Damit funktioniert es genauso wie ich es mir vorgestellt habe. Vielen lieben Dank!
Hi there,
ich arbeite mich noch in HTML und CSS ein, bin also kein Profi.
Ohne Dir nahetreten zu wollen, aber mit diesen Kenntnissen sollte man keine Seiten erzeugen, in denen Menüpunkte (oder Icons, wie Du es nennst) vorkommen, die "Schneller Versand", "Täglicher Versand" und "Sicher Einkaufen dank SSL" heissen.
Ich gestalte zur Zeit eine Webseite und habe auf meine Startseite vier Icons gepackt, welche einen Effekt auslösen sollen, sobald man auf diese klickt. Das habe ich eigenlich gut hinbekommen, allerdings nur mit einem "a-Element". Das Problem hierbei ist, dass sobald man auf das entsprechende Icon klickt (wegen <a href="#">) die Seite immer auf den Seitenanfang scrollt.
Logisch. Denn das bedeutet, daß die Seite neu geladen werden soll. Und das wird sie auch, und deshalb steht sie wieder am Seitenanfang. Immer wieder - das HTTP-Protokoll hat kein Gedächtnis.
Ich möchte einfach nur, dass beim klicken der entsprechende Text erscheint.
Welcher Text? Das was Du in den h3-Überschriften stehen hast? Das müsstest Du ein wenig konkreter erläutern...
Hi,
Das Problem hierbei ist, dass sobald man auf das entsprechende Icon klickt (wegen <a href="#">) die Seite immer auf den Seitenanfang scrollt.
Logisch. Denn das bedeutet, daß die Seite neu geladen werden soll. Und das wird sie auch
nein, bei einem seiteninternen Verweis wird in der Regel nichts neu geladen, sondern nur zum angegebenen Anker gescrollt.
und deshalb steht sie wieder am Seitenanfang.
Nicht deshalb, sondern weil der Link auf einen Anker verweist, der nicht existiert.
Immer wieder - das HTTP-Protokoll hat kein Gedächtnis.
HTTP spielt hier zur Abwechslung keine Rolle.
Live long and pros healthy,
Martin
Hi there,
Das Problem hierbei ist, dass sobald man auf das entsprechende Icon klickt (wegen <a href="#">) die Seite immer auf den Seitenanfang scrollt.
Logisch. Denn das bedeutet, daß die Seite neu geladen werden soll. Und das wird sie auch
nein, bei einem seiteninternen Verweis wird in der Regel nichts neu geladen, sondern nur zum angegebenen Anker gescrollt.
Wo er recht hat, hat er recht. Man sollte vor dem Frühstück nichts posten...
@@klawischnigg
Welcher Text? Das was Du in den h3-Überschriften stehen hast?
Oh, so tief hatte ich gar nicht ins Markup geschaut.
Das sind keine Überschriften. (Für was denn auch? Das Fitzelchen Text danach?) Die Auszeichnung als <h3> ist nicht richtig.
Manchmal ist ein <span> einfach nur ein <span>.
😷 LLAP
Naja ich denke jeder hat mal klein angefangen. Mir macht all das sehr viel Spaß und ich muss echt sagen: Ich glaube ich habe meinen Beruf verfehlt. So kann ich aber wenigstens in meiner Freizeit ein wenig mich mit dem Thema beschäftigen und es zu meinem Hobby machen. Ich bin kein Profi und kenne mich natürlich nicht mit den richtigen Begriffen aus :/ Vielen Dank für deinen Hinweis, hat mir sehr weiter geholfen :)
Hi there,
Naja ich denke jeder hat mal klein angefangen.
Das darfst Du nicht falsch verstehen. Aber die Begriffe "Versand", "SSL" etc. haben entweder mit Sicherheit oder mit Kohle zu tun, und das ist halt etwas, was man vor allem als "Klein-Anfänger" eher ganz zuletzt angehen sollte, also eigentlich eher dann, wenn sich das mit dem "Anfänger" schon etwas erledigt hat.
Mir macht all das sehr viel Spaß und ich muss echt sagen: Ich glaube ich habe meinen Beruf verfehlt.
Das freut mich für Dich und ausserdem, es ist ja (fast) nie zu spät...😉
Hallo,
Das freut mich für Dich und ausserdem, es ist ja (fast) nie zu spät...😉
das war so ähnlich der Werbeslogan der Fahrschule, bei der ich den PKW-Führerschein gemacht habe:
"Es ist selten zu früh, und nie zu spät."
Live long and pros healthy,
Martin
Hi there,
Das freut mich für Dich und ausserdem, es ist ja (fast) nie zu spät...😉
das war so ähnlich der Werbeslogan der Fahrschule, bei der ich den PKW-Führerschein gemacht habe:
"Es ist selten zu früh, und nie zu spät."
Naja, ich hab mir das nie angetan weil mir schon in jungen Jahren bewußt war, daß ich den neu erworbenen Schein vermutlich recht bald hätte abgeben müssen...😉
Hallo,
das war so ähnlich der Werbeslogan der Fahrschule, bei der ich den PKW-Führerschein gemacht habe:
"Es ist selten zu früh, und nie zu spät."Naja, ich hab mir das nie angetan weil mir schon in jungen Jahren bewußt war, daß ich den neu erworbenen Schein vermutlich recht bald hätte abgeben müssen...😉
das Risiko bin ich nie eingegangen. Ich habe zwar in all den Jahren den einen oder anderen Bußgeldbescheid bekommen (meist wegen zu schnellem Fahren), aber es war nie so tragisch, dass ich den Lappen hätte abgeben müssen. Auch nicht vorübergehend.
In meiner Bundeswehrzeit habe ich sogar den LKW-Führerschein auf Staatskosten machen dürfen, der dann nach einer formalen Umschreibung auch im Zivilbereich anerkannt wird (hat damals ein paar Mark Bearbeitungsgebühr gekostet, weiter nichts). Hatte BW-bedingt sogar die Lizenz zum Gefahrguttransport, die aber nach drei Jahren verfällt, wenn man sie nicht auffrischt, was ich nie getan habe. Aber die Gelegenheiten, bei denen ich mal wieder einen LKW mit über 7.5t fahren durfte, kann ich seither an einer Hand abzählen. Ein paarmal im Studium (Praxissemester, Diplomarbeit), einmal als ich einen Fahrer auf einer Baustelle hinreichend lang bequatscht habe, und dann mal eine Überführungsfahrt für eine Autovermietung.
Seit ich 50 bin, müsste ich alle 5 Jahre meine Eignung ärztlich bescheinigen lassen, damit der LKW-Führerschein gültig bleibt. Den Aufwand ist es mir aber nicht wert.
Live long and pros healthy,
Martin
Hi there,
das war so ähnlich der Werbeslogan der Fahrschule, bei der ich den PKW-Führerschein gemacht habe:
"Es ist selten zu früh, und nie zu spät."Naja, ich hab mir das nie angetan weil mir schon in jungen Jahren bewußt war, daß ich den neu erworbenen Schein vermutlich recht bald hätte abgeben müssen...😉
das Risiko bin ich nie eingegangen. Ich habe zwar in all den Jahren den einen oder anderen Bußgeldbescheid bekommen (meist wegen zu schnellem Fahren), aber es war nie so tragisch, dass ich den Lappen hätte abgeben müssen. Auch nicht vorübergehend.
Ich wäre wahrscheinlich nicht zu schnell sondern gelegentlich zu wenig äh, geradlinig gefahren. Und da hab ich mir gedacht, geb' ich mein leichtverdientes Geld lieber für Taxis und verflüssigte Gewächse aus dem Piemont oder dem Bordeaux aus als für Führerschein, Karre, Benzin und Verwaltungsstrafen. Im Setzen der richtigen Prioritäten zeigt sich die wahre menschliche Reife...😉
Seit ich 50 bin, müsste ich alle 5 Jahre meine Eignung ärztlich bescheinigen lassen, damit der LKW-Führerschein gültig bleibt. Den Aufwand ist es mir aber nicht wert.
Na immerhin, dann wüßtest Du halt, daß Du noch halbwegs gesund bist...😉
Hallo,
Ich wäre wahrscheinlich nicht zu schnell sondern gelegentlich zu wenig äh, geradlinig gefahren. Und da hab ich mir gedacht, geb' ich mein leichtverdientes Geld lieber für Taxis und verflüssigte Gewächse aus dem Piemont oder dem Bordeaux aus als für Führerschein, Karre, Benzin und Verwaltungsstrafen. Im Setzen der richtigen Prioritäten zeigt sich die wahre menschliche Reife...😉
Naja, das ist aber auch abhängig davon, wo man groß wird und ist...
Gruß
Kalk
Hi there,
Ich wäre wahrscheinlich nicht zu schnell sondern gelegentlich zu wenig äh, geradlinig gefahren. Und da hab ich mir gedacht, geb' ich mein leichtverdientes Geld lieber für Taxis und verflüssigte Gewächse aus dem Piemont oder dem Bordeaux aus als für Führerschein, Karre, Benzin und Verwaltungsstrafen. Im Setzen der richtigen Prioritäten zeigt sich die wahre menschliche Reife...😉
Naja, das ist aber auch abhängig davon, wo man groß wird und ist...
Völlig richtig. Als Trachtenpärchen ist man ohne Auto oder Traktor meistens aufgeschmissen...
@@Kevin
Das Problem hierbei ist, dass sobald man auf das entsprechende Icon klickt (wegen <a href="#">) die Seite immer auf den Seitenanfang scrollt.
Für manche Nutzer (Sreenreader-Nutzer) ist das das kleine Problem (oder gar keins). Das größere ist, dass interaktive Elemente als Links angesagt werden, die gar keine Links sind.
Daumenregel: Wann immer <a href="#"> auftaucht, ist es falsch. Es sollte <button> sein.
<a href="…"> ist für Verweise zu anderen Stellen im Web. Zum Auslösen von Aktionen ist <button> das richtige HTML-Element.
Ich möchte einfach nur, dass beim klicken der entsprechende Text erscheint.
Warum erst beim Clicken? ‚Da bin ich aber neugierig, welchen Sinn dieser Button denn haben könnte.‘ —kein Nutzer jemals
Warum die Texte verstecken? Entweder sie sind wichtig, dann gleich anzeigen. Oder sie sind überflüssig, dann ganz weglassen.
😷 LLAP
Vielen Dank für deine Nachricht. Damit hast du mich auch ein wenig ins grübeln gebracht, ob ich wirklich nicht irgendwie den Text einfach direkt anzeige :D Ich werde mich weiter probieren! Dein Hinweis hat mir aber sehr geholfen. Vielen Dank
Hallo Kevin,
ich arbeite mich noch in HTML und CSS ein, bin also kein Profi.
kein Problem, wir haben alle mal klein angefangen.
Ich gestalte zur Zeit eine Webseite und habe auf meine Startseite vier Icons gepackt, welche einen Effekt auslösen sollen, sobald man auf diese klickt.
... den du aber im Beispiel nicht realisiert hast? - Oder er ist nur für einen Augenblick zu sehen, so dass ich nichts mehr erkenne, wenn ich wieder runterscrolle.
Das habe ich eigenlich gut hinbekommen, allerdings nur mit einem "a-Element".
Das Problem hierbei ist, dass sobald man auf das entsprechende Icon klickt (wegen <a href="#">) die Seite immer auf den Seitenanfang scrollt.
Das ist das normale Verhalten eines a-Elements, also eines Links: Er führt den Besucher an eine andere Stelle - innerhalb derselben Seite, oder auch auf eine ganz andere Seite. Das '#' ist das Kennzeichen für einen Anker, eine Art Lesezeichen innerhalb der Seite - und da der Ankername fehlt, springt der Browser an den Seitenanfang.
Du möchtest also eigentlich ein anderes Element verwenden. Meiner Ansicht nach wäre ein <button> hier das richtige Element.
Oder gibt es eine Möglichkeit, zu verhindern, dass beim klicken die Seite hochscrollt?
Wenn man noch eine Portion Javascript in die Suppe rührt und einen Eventhandler nutzt. wäre das auch möglich. Aber es wäre ein Missbrauch des a-Elements.
Live long and pros healthy,
Martin
@@Kevin
Ich gestalte zur Zeit eine Webseite und habe auf meine Startseite vier Icons gepackt
Welche alle keinen Alternativtext haben.
Was gehört da ins alt-Attribut? „Text anzeigen“? Macht wenig Sinn. Die jeweiligen anzuzeigenden Texte („Schneller Versand – Täglicher Versand“ usw.) schon eher.
Dann ist der Button, woraufhin derselbe Text nochmal vorgelesen wird, für Screenreader-Nutzer auch recht sinnfrei. Aber wie gesagt: das ist das Feature wohl für alle Nutzer.
😷 LLAP
@@Gunnar Bittersmann
Was gehört da ins
alt-Attribut? „Text anzeigen“? Macht wenig Sinn. Die jeweiligen anzuzeigenden Texte („Schneller Versand – Täglicher Versand“ usw.) schon eher.
Oder auch gar nichts …
Dann ist der Button, woraufhin derselbe Text nochmal vorgelesen wird, für Screenreader-Nutzer auch recht sinnfrei.
… Der für sie sinnfreie Button wird vor Screenreadern mit aria-hidden="true" versteckt.
Der Text wird visuell versteckt. Beim Click auf den Button wird die entsprechende Klasse weggenommen und damit der Text angezeigt. Sollte doch so gehen, oder?
😷 LLAP
Hallo Gunnar,
ich habe jetzt parallel auch gebastelt, und Aria erstmal außen vor gelassen.
Mein Vorschlag, ohne Javascript, nur mit :focus und :hover, bis hierher wäre
https://jsfiddle.net/Rolf_b/f4oLuvh0/
Ob man das auch ohne JS ariafiziert bekommt, weiß ich nicht so genau.
Rolf
Du hast jetzt in 4 Foren die gleiche Frage gestellt ,hier und da https://www.html-seminar.de/forum/thread/10000-a-focus-verhindern-auf-seitenanfang-zu-springen/?postID=68240#post68240 hast du antwort bekommen.
Findest du das richtig das in den anderen Foren auch nach
Lösungen gesucht werden, obwohl du hier auch mögliche Lösungen hast?
Jetzt hast du mehrere Lösungen bekommen, von leicht bis etwas schwerer. Was machst du jetzt? In welchen Forum möchtest du jetzt weiter schreiben?
Ohne Javascript eine mögliche Lösung
Servus!
Ohne Javascript eine mögliche Lösung
Sieht (auf den ersten Blick) gut aus, aber …
Du musst lange mit der Maus drauf bleiben, um den Effekt zu sehen,
Es gibt (wie @Gunnar Bittersmann schon sagte) keinen Grund die Informationen zu verstecken und sie dann eher unintuitiv auf Klick anzuzeigen. Der Effekt würde eher zu einem "Do you want to know more?" und dann einem details-Element zum Aufklappen passen.
Wsl. ist es aber eh nur ein Test und nicht die Grundlage für ein neues E-Shopping-Portal.
Herzliche Grüße
Matthias Scharwies
Um den TO zu verwirren, schmeiße ich mal Checkbox Hack in den Raum. Ist vielleicht nicht die beste Lösung , aber für die Verwirrung musste es mal erwähnt werden.
Die beste Lösung ohne Javascript, finde ich die von @Rolf B 👍
Hallo basti1012,
nicht ganz - es fehlt Aria. Vermutlich muss ich den Info-Teil als figure den Button setzen, visuell verstecken und dann mit dem Nachbarschafts-Kombinator hervorholen, wenn man hovert oder focust.
Rolf
@@basti1012
Um den TO zu verwirren, schmeiße ich mal Checkbox Hack in den Raum. Ist vielleicht nicht die beste Lösung , aber für die Verwirrung musste es mal erwähnt werden.
😂
Ah, wait! Was gegen den Checkbox-Hack spricht: nicht für alle Nutzer bedienbar. Aber das Ding soll ja für die betreffenden Nutzer gar nicht bedienbar sein, sondern per aria-hidden versteckt.
Heißt: in diesem Fall spricht nichts gegen den Checkbox-Hack. Oder übersehe ich da was?
Die beste Lösung ohne Javascript, finde ich die von @Rolf B 👍
😷 LLAP
Hallo Gunnar,
.info input:not(:checked) ~ .info-text,
Ja, sowas hatte ich auch noch im Sinn. Aber da stand ein Pfund Hack und ein Grill auf der Terrasse und die lachten mich so an 🍔 😋😋
Und danach fing der Fußball an - 🇩🇰 ⚽ 🇨🇿
Rolf
Vielen Dank für deine Nachricht. Tatsächlich wusste ich nicht, dass es eher nicht so gerne gesehen wird, wenn man in unterschiedlichen Foren den gleichen Beitrag erstellt :( Ich wollte lediglich so viel (und auch so schnell :)) Input wie möglich haben, dass war im Grunde meine Intention. Tut mir sehr Leid.
Entweder werde ich einfach die a-Klasse zum button machen oder einfach doch den Text direkt anzeigen lassen, was wohl einfacher für mich und auch für evtl mal einen Kunden sein wird. Bin mir da noch unschlüssig :)
Tabellenkalk
Rolf B