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

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 […]

30 August, 2023

Divs beim scrollen einblenden

Divs erst beim scrollen zeitverzögert einzublenden oder „reinfliegen“ zu lassen ist ein großer Trend in den letzten Jahren gewesen. Wenn man es nicht übertreibt und subtile Animationen, kann das durchaus ein netter Effekt sein. Wobei ich grundsätzlich eher Fan davon bin wenn eine Website schnell und direkt ist und die Darstellung der Inhalte nicht noch […]

30 August, 2023

Breadcrumb-Navigation für WordPress

Mit diesem Code kannst du automatisch eine Breadcrumb-Navigation für deine WordPress-Website generieren. Ergänze folgenden Code in deiner functions.php: Und anschließend rufst du die Funktion an gewünschter Stelle im Template auf:

27 August, 2023

Mit CSS clip-path kannst du divs in jeder beliebigen Form erstellen.

Standardmäßig ist ein div viereckig. Um außergewöhnliche Designs umzusetzen, ist es manchmal erforderlich, dass divs in einer anderen Form dargestellt werden müssen. In der Regel setzt man hier dann pngs mit Transparenz ein. Für einfache Formen sind CSS clip-paths allerdings die elegantere Lösung. So kann z.B. solch ein Hexagon mit folgendem Code erzeugt werden. Die […]

25 August, 2023

So verhinderst du, dass Bilder deines Servers auf externen Websites angezeigt werden (Hotlinking)

Wenn du eine Web-App baust, in der die User Bilder hochladen können, solltest du darüber nachdenken, Hotlinking zu verhindern, denn sonst könnte es passieren, dass deine App missbräuchlich als Imagehoster genutzt wird. Mit wenigen Zeilen in der htaccess ist dieses Problem gelöst:

24 August, 2023

So erstellst du eine Prozessgrafik mit HTML & CSS.

Eine Prozessgrafik (oder Ablaufdiagramm) ist ein sinnvolles Gestaltungselement um Abläufe zu visualisieren. Z.B. so: Step 1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Step 2 Exercitationem officiis doloribus quo pariatur reiciendis aliquid, laborum natus quibusdam? Step 3 Fugit eum aspernatur maiores ab odio voluptas explicabo inventore suscipit nobis accusamus. Für die Darstellung der Pfeile […]

20 August, 2023

jQuery „Live-Suche“ – So kannst du Elemente auf einer Website durchsuchen und nicht passende Ergebnisse ausblenden.

Mit folgendem jQuery-Script kannst du eine „Live-Suche“ oder eine Filterfunktion auf einer Website umsetzen. Sobald etwas im Suchfeld eingetippt wird, werden alle nicht-passenden Elemente ausgeblendet. Hier kannst du das Skript an Hand einer (fiktiven) FAQ für ein Hotel ausprobieren: Wie kann ich eine Reservierung vornehmen? Sie können online über unsere Website oder telefonisch über unsere […]

10 August, 2023

YouTube-Thumbnail-URL

Um direkt das Thumbnail eines YouTube-Videos aufzurufen, musst du lediglich in folgender URL die Video-ID einsetzen: https://i3.ytimg.com/vi/#VIDEO-ID#/maxresdefault.jpg

10 August, 2023

Automatische Weiterleitung bei unvollständiger URL in WordPress deaktivieren

WordPress „mag es nicht“, Fehlerseiten anzuzeigen. Deshalb versucht WordPress standardmäßig, URLs zu korrigieren oder zu erweitern und leitet auf auf existierende Seite um. So wird z.B. aus aus der Eingabe „https://www.fbnfrtg.de/link/“ > „https://www.fbnfrtg.de/links/“. Das ist grundsätzlich in vielen Fällen praktisch, kann aber auch zu unerwünschten Ergebnissen führen. Wenn z.B. die Seite „Link“ in diesem Beispiel“ […]

FRTG - Traces
Jetzt bei Apple Music & Spotify.