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

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

24 Juli, 2023

4 Weiterleitungen (redirects) in HTML, JavaScript, PHP & htaccess

Eine Weiterleitung auf eine andere Website ist in vielen Fällen erforderlich. Z.B. nach erfolgreichem Log-in oder wenn eine Seite nicht mehr existiert oder umgezogen ist… Hier findest du 4 Möglichkeiten auf einer andere Seite weiterzuleiten. HTML JavaScript PHP htaccess Um mit JavaScript, abhängig von der aktuellen URL, auf eine andere Seite umzuleiten, ist dieses Snippet […]

• HTML
• JavaScript
• PHP

27 Juni, 2023

CSS PageFlip-Effekt für einen Magazin-Titel

Mit folgendem HTML-Snippet lässt sich schnell und unkompliziert eine schicke kleine Animation erzeugen, die einen kleinen Einblick auf Seite 3 eines Print-Magazins gewährt und z.B. auf das PDF des Magazins verlinken könnte.

• CSS
• Design
• HTML

16 Mai, 2023

HTML-„Accordion“ ohne JavaScript

Dass Accordions ein beliebtes UI-Element im Webdesign sind, hatte ich hier schon mal geschrieben. Tatsächlich kann man Accordions auch ohne HTML und im Prinzip sogar ohne CSS erstellen. Hierfür gibt es das wenig bekannte HTML5-Element „details“: Ganz ohne CSS sieht das Element so aus: Lorem ipsum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam […]

• HTML

15 April, 2023

Manuelle Silbentrennung auf Websites mit einem bedingten Trennstrich (soft hyphen)

Hier hatte ich vor einigen Tagen bereits geschrieben, dass ich für die manuelle Silbentrennung auf Websites ein JavaScript geschrieben habe. Inzwischen habe ich eine Möglichkeit gefunden, mit der das u.U. gar nicht notwendig ist. Es gibt nämlich tatsächlich einen unsichtbaren bedingten Trennstrich, den man in Wörter einfügen kann. Hier ist er zum copy&pasten zwischen den […]

• HTML
• WordPress

1 April, 2023

Mehrspaltiges Layout mit gleichgroßen divs mit CSS Grid

Mit folgendem Code lässt sich mit CSS Grid ein mehr-spaltiges Layout mit divs in gleicher Höhe ohne jQuery oder JavaScript umsetzten. Box 1 Lorem ipsum, dolor sit. Box 2 Button Box 3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, placeat inventore. Lorem ipsum dolor sit amet. Button Box 4 Lorem ipsum dolor sit […]

• CSS
• HTML