kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

JavaScript


Scrolling-Effekte: CSS-Klasse per JavaScript hinzufügen, wenn sich ein Element im Viewport befindet

Scrolling-Effekte sind ein beliebtes Gestaltungsmittel auf modernen Websites. Sinnvoll eingesetzt können Sie dazu beitragen, dass eine Website gleichermaßen erfolgreich als auch ästhetisch ansprechend ist. In diesem Beitrag findet ihr ein JavaScript-Snippet, mit dem Elemente eine CSS-Klasse erhalten, sobald Sie sich im Viewport befinden. Die Klasse kann optional wieder entfernt werden, sobald sich das Element nicht mehr vollständig im Viewport befindet.

Beitrag zu Ende lesen

Touchscreen optimierte DropDown-Navigation mit jQuery

Umfangreiche Navigationen stellen insbesondere auf großen Touchscreens eine Herausforderung dar. Da Mouse-Over-Effekte nicht funktionieren, werden tiefer liegende Navigationsebenen häufig durch einen Klick auf das unverlinkte Elternelement geöffnet. Wenn ein anderes Elternelement angeklickt wird, soll das zuvor geöffnete Untermenü geschlossen und das neue Menü geöffnet werden. In diesem Beitrag archivieren wir ein Snippet, dass diese Aufgabe erledigt.

Beitrag zu Ende lesen

Animiertes Scrolling (Smooth Scrolling) mit jQuery

Die Verwendung von Sprungmarken (Ankern) kann deutlich zur Verbesserung der Benutzerfreundlichkeit von Webprojekten beitragen und findet daher häufige Anwendung. Anker werden unter anderem in Inhaltsverzeichnissen, für »Zurück nach oben«-Buttons oder zur Navigation auf One-Pagern verwendet. Leider springt der Anwender bei einem Klick auf die Sprungmarke schlagartig zum Ziel – was die Orientierung und die User Experience beeinträchtigen kann. In diesem Beitrag archivieren wir ein Snippet, mit dem ihr das Verhalten durch ein animiertes Scrollen (Smooth Scrolling) ersetzen könnt.

Beitrag zu Ende lesen

Alle Elemente zwischen zwei Elementen mit Hilfe von jQuery umschließen

Mit Hilfe von jQuery lassen sich Elemente von anderen Elementen umschließen. Das ist immer dann hilfreich, wenn ihr keine Möglichkeit habt an den HTML-Code zu gelangen oder ihn aus anderen Gründen nicht bearbeiten wollt. In diesem Beitrag stellen wir euch ein jQuery-Snippet zur Verfügung, mit dem ihr alle Elemente, die zwischen zwei bestimmten Elementen liegen, mit HTML-Code umschließen könnt. Beitrag zu Ende lesen

HTML Class-Attribut (CSS Klasse) per JavaScript hinzufügen

Für viele Aufgaben wird jQuery eingesetzt, obwohl pures JavaScript (Vanilla JS) die Aufgabe genau so gut lösen kann. Ein typisches Beispiel ist das Hinzufügen eines Klassenattributes in HTML. In jQuery wird dafür addClass() geschrieben doch viel länger ist es mit Vanilla JS auch nicht. Und man spart sich ggf. das jQuery-Framework.

Beitrag zu Ende lesen

Anzahl der geschriebenen Zeichen mit jQuery zählen

Bei der Nutzung von Formularen kann es hilfreich sein, dem Anwender anzuzeigen wie viele Zeichen er bereits eingegeben hat. In vielen Layouts gibt es beispielsweise eine ideale Textmengen für bestimmte Elemente, die möglichst eingehalten werden soll. Auch spielt die Anzahl der verfassten Zeichen für verschiedene Abrechnungsmodelle eine Rolle.

In diesem Beitrag archivieren wir ein jQuery-Snippet, mit dem die Anzahl der eingegebenen Zeichen angezeigt werden kann.

Beitrag zu Ende lesen

jQuery: Gleiche Höhe für Elemente

In flexiblen Web-Layouts kann die Höhe von Elementen eine Herausforderung darstellen. Beispielsweise findet man auf vielen Websites nebeneinander angeordnete Teaser-Elemente mit Text und einem »Weiterlesen«-Button. Redaktionell sollte man natürlich darauf achten, dass die Texte gleich lang sind, aber je nach Breite des Displays brechen die Wörter anders um, was wiederum dazu führt, dass die Buttons nicht immer auf gleicher Höhe sitzen. Mit CSS lässt sich das Problem nur schwer lösen, daher möchte ich in diesem Beitrag ein praktisches jQuery-Snippet archivieren.

Beitrag zu Ende lesen