kulturbanause Blog

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

JavaScript


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

WordPress: interne jQuery-Version über Google CDN im Footer laden

Wer jQuery in WordPress verwenden will, integriert das Script häufig manuell im Header oder Footer der Seite. Das Script wird dazu heruntergeladen, in den Website-Ordner kopiert und von dort aus verknüpft. Alternativ wird es über ein Content Delivery Network (CDN) von Google & Co. geladen.
WordPress verfügt jedoch auch über eine eigene Version von jQuery, die genutzt werden kann. Diese Version wird auch von Plugins verwendet. Wenn ihr jQuery also manuell hinzufügt, kann es passieren, dass jQuery mehrfach geladen wird. Das dauert länger und kann zu erheblichen Konflikten mit Plugins führen.

Beitrag zu Ende lesen

Die neue Quelle für Webentwickler – WebPlatform.org

Mit der Website webplatform.org wurde eine neue Anlaufstelle für Webworker geschafften. Angefangen bei den Klassikern HTML5 und CSS3 über thematische Schwerpunkte wie Animationen, Media Queries und Medienformate deckt das Projekt diverse Bereiche der modernen Webentwicklung ab. Die Community steht dabei ganz klar im Mittelpunkt. Die Inhalte werden in Form eines Blogs, diverser Foren, Tutorials und Frage/Antwort-Seiten vermittelt und von der Community ergänzt. Unterstützt wird das Projekt von den ganz Großen der Szene: Adobe, Facebook, Google, HP, Microsoft, Nokia, Mozilla, Opera und das W3C sind mit von der Partie.

Beitrag zu Ende lesen

CSS-Files automatisch nachladen: CSS refresh

Mein Workflow bei der Umsetzung einer Website sieht normalerweise etwa so aus: Sobald ich das grobe HTML-Markup geschrieben habe, lege ich die CSS-Datei an und füge Style-Angaben hinzu. Dabei wechsle ich permanent zwischen dem Code-Editor, der Debug-Konsole des Browsers und dem Browser selbst. Ich schreibe einige Zeilen Code, speichere das Stylesheet, und überprüfe das Ergebnis im Browser. Dazu muss ich jedes Mal den Browser neu laden um die Änderungen auch sehen zu können. Und weil ich ungern Zeit verschwende, nutze ich ein Bookmarklet um die Seite immer automatisch aktuell zu halten. Das Tool ist zwar nicht gerade neu, aber dennoch ungemein praktisch.

Beitrag zu Ende lesen

Höhe von Facebook iframe-Tabs anpassen

Aus aktuellem Anlass (und da ich bereits diverse Mails erhalten habe) ein kurzer Hinweis. Um den Scrollbalken in langen Facebook-Tabs zu deaktivieren und die Höhe des Tabs an den Inhalt anzupassen, wird ein kleines JavaScript benötigt. Das bisherige Snippet funktioniert seit einigen Tagen nicht mehr! Ich habe den entsprechenden Beitrag hier im Blog aktualisiert. Ersetzt einfach das alte Snippet mit dem neuen Code und tragt eure App-ID und die Höhe des Inhalts ein.

Scrollbalken in Facebook-iFrame-Tabs deaktivieren →

Syntax Highlighting mit Prism

Prism Syntax Highlighter

Plugins und Scripte zum farbigen Strukturieren von Quellcode gibt es einige. Mit Prism ist ein weiteres Script erschienen, das im Vergleich zu den anderen mir bekannten Methoden einige Vorteile bietet. Ihr müsst beispielsweise keinen für das Plugin angepassten Quellcode verwenden, sondern werdet vielmehr gezwungen semantisch korrektes HTML5-Markup zu schreiben. Das Script lässt sich darüber hinaus kinderleicht anpassen, kommt in drei Designs daher und ist gerade einmal 1.5KB groß.

Beitrag zu Ende lesen