nicht angemeldet
<a href="#"> ein paar Sekunden nach dem draufklicken ausführen?
Matthias Apsel
Gunnar Bittersmann
Rolf B
TabellenkalkHallo, ich wollte auf meiner Website Animationen machen, wenn man auf einen Link drückt. Nur leider wird man dann ja direkt weitergeleitet. Gibt es einen Weg, die Weiterleitung für 1/2 Sekunden zu pausieren?
Danke schonmal für eure Hilfe.
akzeptierte Antworten
<a href="#"> ein paar Sekunden nach dem draufklicken ausführen?
Matthias Scharwies
Bewertung: keine Bewertung
-
Servus!
Hallo, ich wollte auf meiner Website Animationen machen, wenn man auf einen Link drückt. Nur leider wird man dann ja direkt weitergeleitet. Gibt es einen Weg, die Weiterleitung für 1/2 Sekunden zu pausieren?
Mit JavaScript: mit preventDefault wird das Standardverhalten unterdrückt, dann müsste Deine Animation kommen und dann aktivierst du den Link wieder.
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“-
Danke und wie würde ich das genau machen? Bin nicht wirklich vertraut mit Javascript. Angenommen ich möchte 0.5 Sekunden nachdem auf den Link geklickt wird weitergeleitet werden.
-
Hallo ilikecookies,
Danke und wie würde ich das genau machen? Bin nicht wirklich vertraut mit Javascript. Angenommen ich möchte 0.5 Sekunden nachdem auf den Link geklickt wird weitergeleitet werden.
Vielleicht solltest du doch noch mal ernsthaft darüber nachdenken, ob das wirklich das ist, was die Gäste auf deiner Seite sehen wollen.
Bis demnächst
Matthias--
Du kannst das Projekt SELFHTML unterstützen,
indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt. -
Liebe(r) ilikecookies,
Bin nicht wirklich vertraut mit Javascript.
das wäre doch einschöner Grund, sich damit eingehender zu beschäftigen.
Angenommen ich möchte 0.5 Sekunden nachdem auf den Link geklickt wird weitergeleitet werden.
Dann wäre wichtig, dass das Linkziel eben genau nicht "#" lautet.
Was Du benötigst, sind diese Stichworte:
- Ereignisse in JavaScript ("click"-Event)
- Default-Verhalten unterdrücken
location-Objekt manipulieren, um zu einer anderen Seite zu wechseln- wie man mit querySelectorAll alle Elemente findet, die einem (CSS-)Selektor entsprechen
- wie man eine Liste gefundener Elemente abarbeitet
Liebe Grüße
Felix Riesterer
-
@@Felix Riesterer
Bin nicht wirklich vertraut mit Javascript.
das wäre doch einschöner Grund, sich damit eingehender zu beschäftigen.
Die Schönheit des Grundes liegt im Auge des Betrachters.
Ich bin da bei @Tabellenkalk und @Matthias Apsel, dass dies kein guter Grund ist, mit JavaScript-Spielereien eine funktionierende Seite zu suboptimieren.
😷 LLAP
--
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon-
Lieber Gunnar,
Ich bin da bei @Tabellenkalk und @Matthias Apsel, dass dies kein guter Grund ist, mit JavaScript-Spielereien eine funktionierende Seite zu suboptimieren.
wir wissen doch nicht, um was für eine "Seite" es sich handelt. Die ganze Anfrage klingt für mich nach einem Teeny, welches mit den Möglichkeiten spielen will. Und wenn es sich dabei um eine Teeny-Seite handelt, auf der keine echten Inhalte, sondern nur Spielereien zum Ausprobieren sind, warum dann nicht auch die Frage beantworten, anstatt nur böse mit dem Zeigefinger zu winken?
Liebe Grüße
Felix Riesterer
-
-
@@Felix Riesterer
Was Du benötigst, sind diese Stichworte:
- wie man mit querySelectorAll alle Elemente findet, die einem (CSS-)Selektor entsprechen
Nein, das benötigt man nicht.
document.linksgibt’s schon. Zitat 2280 auch.Was aber auch noch benötigt wird:
- wie man Attributwerte von Elementen ausliest, in dem Fall das
href-Attribut des betreffenden Links
😷 LLAP
--
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon-
@@Gunnar Bittersmann
Was Du benötigst, sind diese Stichworte:
- wie man mit querySelectorAll alle Elemente findet, die einem (CSS-)Selektor entsprechen
Nein, das benötigt man nicht.
document.linksgibt’s schon. Zitat 2280 auch.Aber auch das benötigt man nicht, wenn man event delegation einsetzt:
click-Eventhandler fürbody, darin prüfen, ob der Auslöser (event.target) von einem Link stammt.Was aber auch noch benötigt wird:
- wie man Attributwerte von Elementen ausliest, in dem Fall das
href-Attribut des betreffenden Links
Ach, und noch was:
😷 LLAP
--
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon-
Lieber Gunnar,
Aber auch das benötigt man nicht, wenn man event delegation einsetzt:
click-Eventhandler fürbody, darin prüfen, ob der Auslöser (event.target) von einem Link stammt.diese Dogmen stören mich. Natürlich dachte ich für mich an einen zentralen
click-Handler. Aber was tue ich mit dem? Ich prüfe, obevent.targeteines aus einer Liste ist, für die ich diesen Effekt haben möchte. Diese Liste erstelle ich mir mit einemquerySelector, weil ich vielleicht nicht pauschal alle Elemente vondocument.linkshaben will.- wie man Attributwerte von Elementen ausliest, in dem Fall das
href-Attribut des betreffenden Links
Eben. Vielleicht will ich nur Links mit diesem Effekt ausstatten, die von meiner Domain hinweg führen, oder eben gerade anders herum, nur diejenigen Links, die weiterhin auf meine Domain verweisen.
Wir wissen ja nicht, um welche Art von Seite es sich handelt!
Das habe ich in der Tat vergessen aufzulisten. Stimmt.
Liebe Grüße
Felix Riesterer
-
Hallo Felix,
was listet ihr nur die ganzen Lernpunkte auf. Die Fragestellung ist doch eindeutig: gebt mir Code zum abschreiben!
Rolf
--
sumpsi - posui - obstruxi-
Lieber Rolf,
was listet ihr nur die ganzen Lernpunkte auf.
immer diese Lehrer...?!
Die Fragestellung ist doch eindeutig: gebt mir Code zum abschreiben!
Eben.
Liebe Grüße
Felix Riesterer
-
-
@@Felix Riesterer
Aber auch das benötigt man nicht, wenn man event delegation einsetzt:
click-Eventhandler fürbody, darin prüfen, ob der Auslöser (event.target) von einem Link stammt.diese Dogmen stören mich.
??
Natürlich dachte ich für mich an einen zentralen
click-Handler. Aber was tue ich mit dem? Ich prüfe, obevent.targeteines aus einer Liste ist, für die ich diesen Effekt haben möchte.Warum das? Zu prüfen, ob das
event.targetbestimmten Bedingungen genügt, dürfte performanter sein als zu prüfen, ob es in einer Liste (collection) vorkommt.if (event.target.nodeName === 'A')vs.
if (document.links.includes(event.target))Diese Liste erstelle ich mir mit einem
querySelector, weil ich vielleicht nicht pauschal alle Elemente vondocument.linkshaben will.Auch dafür brauchst du keine Liste zu erstellen:
if (event.target.nodeName === 'A' && event.target.classList.contains('foo'))oder einfacher
if (event.target.matches('a.foo'))vs.
if (document.querySelectorAll('a.foo').includes(event.target))(
document.querySelectorAll('a.foo')sollte dann natürlich außerhalb des Eventhandlers erledigt und in einer Variablen festgehalten werden. Der Punkt ist aber, dass man diese collection gar nicht braucht.)Eben. Vielleicht will ich nur Links mit diesem Effekt ausstatten, die von meiner Domain hinweg führen, oder eben gerade anders herum, nur diejenigen Links, die weiterhin auf meine Domain verweisen.
if (event.target.matches('a[href*="example.net"]'))bzw.
if (event.target.matches('a:not([href*="example.net"])'))
Das alles funktioniert nur, wenn im
a-Element kein weiteres Markup vorkommt (wovon man nicht ausgehen sollte).Wenn man in diesem Beispiel auf gelobte Land clickt, kommt B raus, nicht A.
Man mus sich also erstmal von
event.targetzuma-Element hochhangeln:const anchor = event.target.closest('a'); if (anchor?.matches(':not([href*="example.net"])')) {…}😷 LLAP
--
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon-
Hallo Gunnar,
optional chaining Operator? Seit wann gips den denn?
Was die ECMA nicht alles von Java oder C# abschreibt...
Rolf
--
sumpsi - posui - obstruxi
-
- wie man Attributwerte von Elementen ausliest, in dem Fall das
-
-
-
Hallo,
Nur leider wird man dann ja direkt weitergeleitet.
Andere versuchen alles, um die Performance zu optimieren. Warum möchtest du Besucher deiner Webseite absichtlich vergraulen?
Gruß
Kalk-
Hi there,
Nur leider wird man dann ja direkt weitergeleitet.
Andere versuchen alles, um die Performance zu optimieren. Warum möchtest du Besucher deiner Webseite absichtlich vergraulen?
Ich mein' ja, aber ist es wirklich nicht möglich, einfach einmal eine technische Frage zu beantworten ohne sofort mit der Web-Taliban-Keule zu fuchteln? Du weißt ja nicht einmal, ob er überhaupt Besucher hat, auf seiner "Webseite". Wenn ich bei jedem Blödsinn, den ich in Javascript programmiert oder probiert hätte an die Benutzerfreundlichkeit oder gar die Barrierefreiheit meines Tuns gedacht hätte, dann hätt' ich vermutlich nicht einmal ein alert("ich mag Euch auch alle") zusammengebracht.
Ich denke, es reicht ja, nachdem man sich am Technischen abgearbeitet hat, ein Hinweis, daß ein solches Vorgehen im RL eine schlechte Praxis wäre...
-
Hallo,
Ich denke, es reicht ja, nachdem man sich am Technischen abgearbeitet hat, ein Hinweis, daß ein solches Vorgehen im RL eine schlechte Praxis wäre...
Das stimmt.
Gruß
Kalk
-
-