Alle Beiträge zum Thema "JavaScript"

13. Februar 2024

Kalender mit Monatsübersicht (mit Bootstrap & jQuery und optional mit WordPress)

Bei der Suche nach einem schlichten, schicken Kalender mit Monatsansicht, bin ich auf folgendes Template aufmerksam geworden: https://github.com/ylli2000/bootstrap-4-calendar Der Kalender sieht nicht nur sehr schick aus, er ist auch sehr leicht mit Terminen zu befüllen, zu konfigurieren und anzupassen. Termine können ganz einfach mit einem Array in den Kalender eingetragen werden: Solch ein Array lässt […]

21. Januar 2024

Location Based Content und QR-Codes

Mit der Geolocation API kannst du den Standort des Users ermitteln. Diese API lässt sich durchaus auch kreativ einsetzen. So können z.B. basierend auf dem Standort des Users bestimmte Informationen und Funktionen angezeigt werden. Z.B.: All diese Beispiele lassen sich ideal mit einem QR-Code nutzen, der an entsprechendem Ort angebracht ist. Folgender Code kann als Basis für […]

30. Dezember 2023

CSS 100vw und das Problem mit der Scrollbar

Die Einheit „vw“ („Viewport Width“) ist sehr praktisch, wenn man ein Element mit CSS bildschirmfüllend darstellen möchte. Das Problem hierbei ist, dass die Scrollbars im Browser, je nach Einstellung und Betriebssystem, automatisch ein- und ausgelblendet werden oder die ganze Zeit sichtbar sind. Dieser Umstand ist im dynamischen Wert „vw“ leider nicht berücksichtigt. Und so kommt […]

27. Dezember 2023

So kannst du das Laden von gecachtem JavaScript und CSS verhindern

Dass JavaScript und CSS-Dateien nach einer Änderung im Browser nicht neu geladen, sondern aus dem Cache geladen werden, kann eine nervige Angelegenheit sein. Insbesondere auch auf dem iPhone, auf dem kein „Hard Refresh“ möglich ist. Um den Browser anzuweisen, immer die aktuelle JS uns CSS vom Server zu laden, reicht es einen sich ändernden Parameter […]

14. Dezember 2023

Text-Fade-in-Effekt mit CSS und JavaScript

Mit folgendem Snippet lässt sich ein subtiler, schicker Text-Eingangs-Effekt erzielen, der sich insbesondere für große Headlines eignet. Lorem ipsum dolor sit amet constructor Noch mal

1. November 2023

setTimeout() – JavaScript-Code zeitverzögert ausführen

Mit folgendem Code lässt sich JavaScript zeitverzögert ausführen.

9. Oktober 2023

Responsive Text

Im responsive Webdesign wird wird die Schriftgröße in der Regel durch Breakpoints und Mediaqueries angepasst. Z.B. auf kleinen Bildschirmen 14px und auf großen Bildschirmen 22px. Das funktioniert in den meisten Layouts auch sehr gut. Manchmal soll eine Headline aber auch stufenlos skaliert werden. Z.B. wenn sie, wie in diesem Beispiel, genau so breit sein soll, […]

29. September 2023

Mit jQuery Position innerhalb eines divs bestimmen

Mit folgendem jQuery-Script kannst du die Postion eines Punktes innerhalb eines divs bestimmen. Das ist zum Beispiel sehr hilfreich wenn du den Fokuspunkt eines Bildes bestimmen willst oder wenn du ein Overlay baust.

20. September 2023

So kannst du ein 360°-Panorama in eine Website einbauen

360°-Panoramen sind ein fantastisches Tool mit dem sich die User einer Website einen sehr guten Überblick über einen entfernten Ort verschaffen können, z.B. einer Immobilie, einer Ferienwohnung, einem Museum oder einem touristischen Ziel. Mit dem Panorama-Viewer Pannellum, lassen sich 360°-Panoramen ganz einfach in eine Website einbinden. Image by Freepik Auch Touren mit Hotspots und Links […]

19. September 2023

Mit simplegmaps kannst du individuelle Google Maps mit mehreren Markern ganz einfach erstellen

Google Maps sind ein fantastisches Tool zur Darstellung von – Überraschung – Standorten. Während es sehr einfach ist, einen einzigen Standort auf einer Karte darzustellen und im iFrame einzubinden, ist es relativ umständlich und kompliziert mehrere Marker auf einer Karte zu platzieren und mit eigenen Tooltips zu versehen. Das JavaScript(-Plug-in) simplegmaps vereinfacht diesen Prozess enorm. […]