jQuery
Hier siehst Du eine Übersicht aller Beiträge, die mit dem Stichwort "jQuery" versehen wurden.
Umfangreiche Navigationen auf Smartphones benutzerfreundlich darzustellen ist gar nicht so einfach. Zwar ist es normalerweise problemlos möglich die Darstellung für den kleinen Bildschirm anzupassen - beispielsweise indem man alle Links untereinander abbildet - dann muss der Besucher aber erst über eine lange Liste an Links hinwegscrollen um den Content zu erreichen. Insbesondere bei Blogs will der Besucher aber häufig den neuesten Artikel lesen und nicht erst die Navigation sehen.
Das winzige jQuery-Plugin TinyNav wandelt ausgewählte Listen in Select-Listen um. Die sparen Platz und lassen sich auch auf Smartphones einfach bedienen.
Diesen Beitrag zu Ende lesen
Im Responsive Webdesign werden Bilder häufig proportional verkleinert um sie auch auf kleinen Displays noch ansehnlich darstellen zu können. Auch auf dieser Seite nutze ich diese Technik; sobald der Inhaltsbereich zu schmal wird, werden die Bilder prozentual zur Gesamtbreite des Inhalts abgebildet.
Diese Variante ist zwar sehr komfortabel - leider werden aber deutlich größere Bilddaten geladen als es für Smartphones überhaupt notwendig ist. Um die Ladezeiten und den Traffic für Besucher mit mobilen Endgeräten gering zu halten, kann es sich daher lohnen verschiedene Bilder für verschiedene Auflösungen anzubieten. Das jQuery-Plugin Doubletake vereinfacht diese Technik.
Diesen Beitrag zu Ende lesen
Mit diesem winzigen Snippet könnt ihr dem body-Tag eures HTML-Dokuments eine Klasse zuweisen, sofern JavaScript beim Besucher aktiv ist. Das Prinzip ist denkbar einfach: Wir fügen die entsprechende Klasse per jQuery hinzu. Wenn JavaScript deaktiviert ist, wird folglich auch keine Klasse zugewiesen.
Diesen Beitrag zu Ende lesen
Mit diesem Beitrag möchte ich ein Code-Snippet archivieren das es euch ermöglicht, Website-Inhalte per jQuery durch andere Inhalte zu ersetzen. Hierbei nutze ich drei verschiedene jQuery-Funktionen, die sich je nach Anforderung mehr oder weniger gut anbieten. Habt bitte immer im Hinterkopf, dass Google es grundsätzlich nicht gerne sieht, wenn ihr dem User andere Inhalte anbietet als dem Googlebot; Stichwort Cloaking. Ihr solltet beim Content-Replacement also immer genau prüfen, was der User und was Google sieht.
Diesen Beitrag zu Ende lesen
Ich habe beim Aufräumen meiner Dropbox ein praktisches Snippet zum Slide-Effekt mit jQuery wiedergefunden das ich hiermit im Blog archiviere. Per Klick auf die Überschrift wird ein ausführlicher Text eingeblendet. Gleichzeitig wird die Klasse des "Mehr lesen"-Links ausgetauscht. Dadurch lässt sich beispielsweise ein Icon dem Zustand entsprechend einblenden.
Ich habe eine Basis-Datei erstellt, die nur den elementaren Code der Funktion enthält. Zusätzlich habe die Demo optisch aufbereitet und ebenfalls als Download bereitgestellt. Das Mini-Script kann aber auch einfach kopiert und sofort eingesetzt werden.
Diesen Beitrag zu Ende lesen
Die meisten von euch wird es sicher genauso nerven wie mich. Sobald man eine Website mit CSS3 umsetzen möchte, muss man zusätzlich zu den normalen CSS3-Befehlen die so genannten Vendor-Prefixes schreiben damit auch alle Browser die Eigenschaften interpretieren können. Das ist nicht nur lästig, häufig weiß man auch gar nicht genau welcher CSS3-Befehl welche Prefixes benötigt.
Ein kleines JavaScript namens prefixfree.js erleichtert euch die Arbeit enorm.
Diesen Beitrag zu Ende lesen
Der Internet Explorer 7 ist mittlerweile ja schon etwas angestaubt. Nichts desto trotz wird er in den meisten Web-Projekten noch berücksichtigt, was angesichts der Verbreitung des Browsers auch nach wie vor sinnvoll ist. Der Internet Explorer 7 ist allerdings für einige sehr ärgerliche Bugs bekannt, zu denen unter anderem auch der z-index-Bug gehört. Hierbei ordnet der IE7 trotz korrekt vergebenem z-index Layout-Elemente falsch an. Bei Drop-Down-Navigationen oder ähnlichen überlappenden Bereichen kann dieser Fehler daher zu etlichen grauen Haaren führen. Ein Live-Beispiel des Bugs findet ihr hier. Der z-index-Bug lässt sich auf verschiedene Arten lösen. Eine sehr schnelle und komfortable Variante bietet jQuery. Mit wenigen Zeilen Code kann die fehlerhafte Funktionalität im IE7 nachgerüstet werden.
Da ich genau dieses Problem vor wenigen Tagen lösen musste, möchte ich euch hier einen möglichen Lösungsweg zeigen.
Diesen Beitrag zu Ende lesen