Jan Gantzert Software Development
3. Januar 2014
WP Anti-Spam

Snippet: Spamschutz mit Honeypots

Wer mit Spam bei HTML-Formularen oder bei WordPress Blogs durch ungewünschte Massenkommentare konfrontiert wird, kann mit einer einfachen Methode schnell Abhilfe schaffen: Den so genannten Honeypots. Die HTML-/CSS-Methode trickst Spambots aus, die in der Regel immer alle Felder...
24. Dezember 2013
Breadcrumbs

Apple Breadcrumbs zum Nachbauen, 2. Teil

Wie bereits im ersten Teil der DIY Apple Breadcrumbs angesprochen, kann die Brotkrümelnavigation auch rein per CSS3 und ein wenig HTML, also ganz ohne Bilder als Trenner generiert werden. Der HTML-Aufbau zur Ausgabe der Breadcrumbs setzt sich ebenfalls wieder über einfache...
15. Dezember 2013
Breadcrumbs

Apple Breadcrumbs zum einfachen Nachbauen

Im folgenden stelle ich Euch über ein einfaches Tutorial vor, wie man die Brotkrümelnavigation (besser bekannt als Breadcrumbs), die u.a. auf apple.com im Footer zum Einsatz kommt, auf die eigene Website mit wenigem HTML/CSS-Code bringen kann. Dieses Code-Beispiel ist auch für...
8. Dezember 2013
Scroll to-Funktion

Scroll to top-Funktion mit jQuery

Einen Scroll to top-Button findet man immer öfters, sowohl bei umfangreichen Websites aber auch bei Weblogs. Gerade lange Seiten profitieren von dieser Funktion, weil der Besucher statt mit endlosem Scrollen mit der Funktion mit nur einem Klick schnell wieder zum Anfang der Seite...
6. Dezember 2013
Google Maps Infobubbles

Google Maps V3 als Infokarte

Google Maps lässt sich natürlich nicht nur zur Routenplanung nutzen, auch Kartenmarkierungen mit Anzeige weiterer Infos sind geläufig. Heute stelle ich dazu ein kleines Tutorial mit „Tabbed Infobubbles“ vor, denn nicht nur einfache Infoblasen sind möglich, sondern...
18. Juli 2013
Sliding Menu mit Anchors

„Sliding Menu“ mit jQuery & Anchors

Um mehr Dynamik in die eigene Website oder den eigenen Webshop zu bekommen, kann man anstelle einer fixierten Navigation auch schon mal ein so genanntes „Sliding Menu“ verwenden. Die Variante, die ich Euch heute vorstelle, basiert auf ein wenig jQuery und einfachen...
1. Mai 2013
Awkward Showcase IE-Bugfix

Kleiner IE 8-Bugfix für Awkward Showcase

Das jQuery-Plugin Awkward Showcase ist ein multifunktional einsetzbarer Content-Slider, den wir auch schon bei dem ein oder anderen Webprojekt eingesetzt haben. Obwohl das Plugin zum Crossbrowser-Einsatz durchaus geeignet ist, gibt es in Verbindung mit dem Internet Explorer 8...
12. April 2013

Box-Shadow mit CSS3

Seit dem es mit CSS 3 und box-shadow die Möglichkeit gibt, HTML-Elementen ohne Zuhilfenahme von Bildern einen Schatten zuzuweisen, gehört das nachfolgende Beispiel mittlerweile wohl zu den Klassikern: CSS für den umfassenden Boxschatten
22. Februar 2013
Toggle Accordion mit jQuery

Simple jQuery Accordion (ohne Plugin), Teil II

Im Vorgängerbeitrag zur jQuery Toggle Box wurde für einen einzelnen DIV-Container eine Funktion zum Anzeigen und Wiederausblenden von Textdetails näher erörtert. Nun gehen wir einen Schritt weiter. In der Regel besteht ein jQuery Accordion aus mehreren solcher Abschnitte, wobei...
18. Februar 2013
jQuery Toggle Box

Simple jQuery Accordion (ohne Plugin), Teil I

Es gibt mittlerweile zahlreiche jQuery-Plugins für die Verwendung von so genannten Accordions. Mit Hilfe der Code-Library könnt Ihr ein solches jQuery Accordion sehr einfach und schnell mit wenig Code nachbauen. Bevor wir ein komplettes jQuery Accordion nachstellen, beginnen wir...
12. Februar 2013
Hover-Menü mit CSS

Horizontales 2 Level Menu mit CSS

Ein 2 Level Menu rein per CSS zu erstellen, ist weit verbeitet. Einige Anreize zum Selber(nach)bauen liefern wir Euch mit folgendem, leicht zu modifizieren Basismodell – die klassische 2 Level Menu-Variante in der horizontalen Ansicht. Beim MouseOver über die einzelnen...
5. Februar 2013
Textrotation mt CSS

Tipp: Text Rotation per CSS

Was früher nur als Bild möglich war, geht schon seit längerem auch per CSS: Die Rotation von Texten rein per CSS. Für Browser wie den Safari oder Firefox reicht die Angabe der transform-Eigenschaft, um Elemente zu drehen. Zur Umsetzung benötigt Ihr folgenden CSS-Code: CSS-Styl...