kulturbanause Blog

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

JavaScript


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

Automatisches Inhaltsverzeichnis mit jQuery

Ein Inhaltsverzeichnis in den Beiträgen eines Blogs oder in komplexen Unterseiten einer Website bietet sich aus verschiedenen Gründen an. Einerseits bietet ihr euren Lesern einen Mehrwert, andererseits verbessert ihr die Struktur des Beitrags für Suchmaschinen. Wenn ihr ein Inhaltsverzeichnis erstellen möchtet, solltet ihr dafür einen Automatismus einsetzen. Andernfalls müsst ihr das Inhaltsverzeichnis jedes Mal aufwändig anpassen, sobald die Inhalte der Seite verändert werden. In diesem Beitrag archiviere ich ein jQuery-Snippet mit dessen Hilfe ein Inhaltsverzeichnis erzeugt und eingefügt werden kann.

Beitrag zu Ende lesen

SVG mit PNG-Fallback

Das Dateiformat SVG (Scalable Vector Graphic) ist die Zukunft der Grafikformate im Web. Sofern sich SVG gestalterisch anbietet, überzeugt das Vektor-Format mit brillanter Bildqualität auf allen Displaytechnologien (z. B. Retina/HiDPI), stufenloser Skalierbarkeit und verhältnismäßig geringer Dateigröße.
Leider wird SVG in älteren Browsern (< IE8) nicht unterstützt. Bis diese Browser an Relevanz verloren haben, muss also eine Übergangslösung her. Mit Hilfe von Modernizr lässt sich ohne Schwierigkeiten ein sehr wartungsfreundlicher PNG-Fallback herstellen.

Beitrag zu Ende lesen

jQuery über WordPress laden

Das JavaScript-Framework jQuery wird in vielen Webprojekten verwendet. Wenn ihr jQuery in Zusammenhang mit WordPress einsetzen möchtet empfiehlt es sich die bereits integrierte Version von jQuery zu laden. Andernfalls kann es passieren, dass ihr das Framework mehrfach ladet. Beachtet jedoch, dass die jQuery-Version in WordPress bei einem Update der Software ggf. ebenfalls aktualisiert wird.

Beitrag zu Ende lesen

Leere Absätze mit jQuery entfernen

Viele Content Management Systeme – z. B. WordPress – erzeugen leere Absätze, wenn der Redakteur im WYSIWYG-Editor mehrmals Enter drückt. Oft ist der somit entstehende Abstand vom Redakteur sogar gewünscht, doch vor dem Hintergrund eines einheitlichen Layouts, möchten Frontend-Designer die Abstände gerne verhindern. Mit jQuery können leere Absätze gefunden und entfernt werden.

Beitrag zu Ende lesen

Inhalte per Ajax (jQuery) nachladen

Wenn Website-Inhalte nachgeladen oder verändert werden ohne dass die Website dazu vollständig neu geladen werden muss spricht man von Ajax (Asynchronous JavaScript and XML). Meist wird Ajax mit komplexen Funktionen oder Formularabfragen in Verbindung gebracht, es macht es aber auch in eher einfachen Projekten Sinn nicht direkt benötigte Inhalte per Ajax nachzuladen und somit die Performance zu verbessern. In diesem Beitrag archiviere ich ein kleines jQuery-Snippet mit dessen Hilfe HTML-Inhalte per Klick nachgeladen werden können.

Beitrag zu Ende lesen

:nth-child über jQuery im Internet Explorer 6, 7 und 8 nutzen

Mit der CSS-Pseudoklasse :nth-child lassen sich Elemente nach einem berechneten Muster ansprechen. Ein häufiges Anwendungsgebiet ist beispielsweise das abwechselnde Einfärben von Tabellenzeilen. Einen ausführlichen Artikel zu dieser CSS-Eigenschaft habe ich bereits vor einiger Zeit veröffentlicht.
Leider unterstützt der Internet Explorer das Pseudoelement erst ab Version 9, doch mit ein wenig JavaScript kann das Verhalten ebenfalls erreicht werden.

Beitrag zu Ende lesen