24. August 2023

So erstellst du eine Prozessgrafik mit HTML & CSS.

• CSS
• Design
• HTML

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

• HTML
• JavaScript
• jQuery

12. August 2023

JPG, PNG, WEBP, SVG oder GIF – so entscheidest du, welches Dateiformat das optimale für deine Website ist.

Hier hatte ich schon mal darüber geschrieben, warum es wichtig ist auf die Bild- und Dateigrößen im Web zu achten: https://www.fbnfrtg.de/warum-man-beim-pflegen-einer-website-unbedingt-auch-die-bildgroessen-im-blick-behalten-sollte/ Neben der Bildgröße, spielt auch das Dateiformat eine wichtige Rolle. Aktuell sind JPG und PNG noch die meistgenutzten Dateiformate im Web. Bis vor einigen Jahren waren diese beiden Formate im Prinzip auch noch alternativlos. […]

• Photoshop

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

• WordPress

10. August 2023

QR-Codes mit PHP generieren

Mit folgendem PHP-Script, das nur aus einer einzigen Datei besteht, kannst du sehr einfach QR-Codes „on-the-fly“ generieren indem du Parameter per GET oder POST an das Script übergibst. https://github.com/psyon/php-qrcode/blob/master/qrcode.php Folgender Aufruf erzeugt z.B. einen QR-Code mit einem Link zu dieser Seite in der Größe 1000 x 1000px. Weitere Options findest du hier: https://github.com/psyon/php-qrcode

• PHP

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

• jQuery
• PHP

2. August 2023

So kannst du mit PHP PDFs erstellen oder verändern

Der FPDI (Free PDF Document Importer) macht es dir sehr einfach, Text in einem PDF zu ergänzen. Das ist z.B. sehr hilfreich, wenn du Teilnahmezertifikate für Online-Schulungen, Urkunden oder ähnliches generieren willst. Alles was du dafür brauchst, ist ein PDF als Template/Vorlage und ein paar Zeilen Code. Vorher musst du neben dem FPDI auch noch […]

• PDF
• PHP

26. Juli 2023

Suchen & Ersetzen mit Wildcard in Visual Studio Code

„Suchen & Ersetzen“ ist beim Programmieren eine praktische Sache. So kann man z.B. mit einem Klick sämtliche Klassennamen ersetzen oder erweitern. Etwas komplizierter wird es, wenn allen gewünschten Elementen unterschiedliche Klassen zugewiesen sind, z.B. in der WordPress-Navigation. In diesem Fall kann man eine Wildcard einsetzen. Da in Visual Studio Code reguläre Ausdrücke (Regex) verwendet werden, […]

• HTML

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

• CSS
• HTML
• jQuery

24. Juli 2023

Autocomplete oder Autosuggest in einem Formularfeld ohne JavaScript

Das einem bei der Eingabe eines Suchbegriffs oder einer Adresse bereits Begriffe vorgeschlagen werden ist heute völlig normal. Dieses Verhalten zu programmieren ist häufig allerdings doch recht aufwändig. Tatsächlich gibt es aber eine Möglichkeit ein Formularfeld mit Autocomplete-Funktion mit reinem HTML – ohne JavaScript – umzusetzen: Mit einer „datalist“. In das Input-Feld lässt sich, anders […]

• HTML