Über Web, Tech, Games, Art,
Musik, Code & Design

Alle Beiträge zum Thema "jQuery"

7. August 2023

Mit der jQuery-Funktion „serialize()“ alle Formularfelder auf einmal auslesen

Die jQuery-Funktion „serialize()“ erleichtert die Übergabe von Formular-Eingaben, insbesondere bei sehr umfangreichen Formularen, an PHP enorm! Statt jedes Formularfeld einzeln in eine JS-Variable zu übergeben, werden mit „form.serialize()“ einfach alle Inhalte des Formulars in einer Variable gespeichert, die dann an das PHP-Script übergeben werden kann. In PHP kann die Eingabezeichenkette dann wieder ganz einfach in […]

25. Juli 2023

jQuery-Info-Pop-up

Pop-ups nerven. Meistens. Manchmal gibt es aber eben doch eine wichtige Info, die prominent kommuniziert werden muss. Z.B. geänderte Öffnungszeiten, eine aktuelle Stellenausschreibung o.ä. … Für diesen Fall eignet sich folgendes Snippet ganz hervorragend. Wenn auf das „x“ geklickt wird, wird das Pop-up erst wieder am nächsten Tag angezeigt. Wichtige Info Lorem ipsum dolor sit […]

12. Mai 2023

Uncaught TypeError: $ is not a function

Diese Fehlermeldung aus der Konsole kennt wohl jeder, der mit WordPress und jQuery arbeitet. Dieser Fehler tritt meistens auf, wenn es Konflikte mit anderem JavaScript gibt. In der Regel kannst du diesen Fehler beheben indem du deinen jQuery-Code mit folgenden Zeilen umschließt:

30. April 2023

Automatischer Reload von WebApps

WebApps können in vielen Fällen ein praktisches Tool sein. Insbesondere seitdem ist seit iOS 16.4 auch möglich ist Push-Nachrichten mit Web-Apps zu verschicken. Ein Praxis-Fall könnte z.B. sein: Du erhältst eine Push-Nachricht, die dich über eine Statusänderung informiert. Daraufhin öffnest du die WebApp. Das Problem: Du siehst einen alten Status, da die WebApp noch im […]

15. April 2023

Office Planner – ein einfacher HomeOffice-Kalender

In den letzen Jahren und Monaten hat sich ja in vielen Unternehmen das Home Office, zumindest zeitweise, etabliert. Um den Abstimmungsprozess, wer wann im Home Office ist, zu vereinfachen, habe ich für eine Abteilung unserer Agentur ein kleines Tool programmiert, in dem die Bürotage der jeweiligen Kolleg*innen eingetragen werden können. Hier geht´s zur Demo: https://www.fbnfrtg.de/tools/officeplanner/ […]

1. April 2023

5 praktische jQuery-Plug-ins, die man auf fast jeder Website gut gebrauchen kann

Das tolle an jQuery ist, dass es nicht nur sehr einfach ist, eigenen Code damit zu schreiben, sondern das es auch für nahezu jeden Anwendungsfall bereits ein passendes Plug-in gibt. Hier ist meine Top 5 der jQuery-Plugins, die ich fast auf jeder Website einsetze. Magnific Popup Ein Klassiker unter den Lightbox-Plugins. Schlicht, schön, einfach zu […]

24. März 2023

jQuery Count up

Mit folgendem jQuery-Script wird von 0 bis zu einer definierten Zahl hochgezählt, sobald die Zahl auf dem Bildschirm zu sehen ist.

20. März 2023

Formulareingaben lokal speichern

Mit folgendem JavaScript/jQuery-Code lassen sich Formulareingaben lokal speichern und müssen somit beim nächsten Aufruf der Seite nicht erneut eingegeben werden. Demo: Vorname Name Dieser Code sollte logischerweise nicht für sensible Daten oder Passwörter genutzt werden, da die Daten im Klartext im localStorage des Browsers gespeichert werden.

18. März 2023

Accordion mit jQuery

Accordions sind ein beliebtes UI-Element im Webdesign. Um ein Accordion zu erstellen kann man auf jede Menge WordPress- oder jQuery-Plugins zurückgreifen. Das ist aus meiner Sicht aber eigentlich gar nicht nötig, da man ein Accordion mit ein paar Zeilen Code selbst erstellen kann und somit auch die volle Kontrolle über Design & Funktionalität hat. So […]

12. März 2023

Vorher-Nachher-Slider in WordPress

Vorher-Nachher-Slider (Before-After-Image-Viewer) sind ein beliebtes und sinnvolles Tool um um Vorher-Nachher-Effekte zu demonstrieren, z.B. um Änderungen an einem Raumdesign, an der Haut von Personen oder Bildbearbeitungen zu zeigen. So z.B.: Um einen solchen Slider zu erstellen, gibt es bereits fertige Plug-ins für WordPress. Was mir hieran nicht gefällt ist, dass man hier erst den Slider […]