Automatischer Index mit jQuery

Die Arbeit mit jQuery spart Zeit, die man wunderbar für Schnickschnack nutzen kann. Obwohl... eigentlich ist so ein Index bei langen Texten ganz schön praktisch.
Nach dem absatzweisen Scrollen zur Erhöhung des Lesegenusses ;O) werden nun lange Texte automatisch indiziert und über eine Sidebar navigierbar (Beispiel). Auch hier verwenden wir jQuery und das scrollto-Plugin.

Weiter...

Scrolling absatzweise

Hier eine Abwandlung der Scroll-Routine. Der Text wird absatzweise gescrollt. Außerdem habe ich mit einer Lesehilfe experimentiert und den Text zoombar gemacht.
Im ersten scroll-Artikel wurde der Inhalt mit jQuery und dem scrollTo-Plugin pixelweise gescrollt. Diesmal soll sich das Scrollen am Inhalt orientieren und absatzweise scrollen.

Struktur finden

Wie kann ich durch eine unbekannte Anzahl Elemente scrollen, die nicht nummeriert sind? Mit jQuery gibt es dafür mehrere Lösungen:

• Ersten finden, dann mit .prev und .next arbeiten
• Liste erstellen
• Nummerierte Klassen vergeben

Ich habe mich für die dritte Möglichkeit entschieden. Zu Beginn werden die entsprechenden Absätze mit Klassennamen versehen und erhalten dadurch einen Identitifier, der eventuell vorhandene Id's nicht überschreibt und trotzdem jeden Absatz individuell adressierbar macht. Mit jQuery ein Klacks:

$(document).ready( function() {
  $("#scrollcontent").scrollTop(0);   // anfangsposition setzen
  paras = $('#scrollcontent p');      // alle <p>-Elemente holen
  paras.each(function(index) {        // 'index' wird von jQuery gefüllt
    $(this).addClass('scroll_'+index);  // klassennamen basteln
    maxpara = index;                  // maxpara mitlaufen lassen
  });
  aktpara = 0; //aktueller paragraph

(Die Variablen sind weiter oben im Originaltext definiert.)

Nach der Ausführung dieser Schritte hat jeder Absatz im Zielcontainer scrollcontent einen Klassennamen, der sich aus scroll_ und einer Nummer zusammensetzt, also scroll_0, scroll_1, scroll_2 etc.
Diese können dann mit .scrollto direkt angefahren werden:

Weiter...

Das fluid-Projekt - Teil 1: Rechnen

 Falls ihr die Artikel aus dem Intro gelesen habt, wisst ihr ja bereits, dass wir mit einem 'Standard'-Layout in vorgegebener Größe beginnen und dann feste Angaben (px) durch relative (%) ersetzen.
Bauen wir also zunächst das feste Grundgerüst, hier bestehend aus wrapper, header, content und footer.

Browser: Fenstergrösse auf Knopfdruck

Da freut sich der Entwickler: Eigentlich auf der Suche nach einer Möglichkeit, in Safari Bookmarks zu setzen, fand ich diesen Artikel über das Erstellen kleiner Bookmarklets zum Einstellen der Fenstergröße.
Und da das auch in Firefox funktioniert, habe ich es gleich ausprobiert und empfehle es zur Nachahmung. Öffnet einfach die Bookmark-Sidebar und erstellt ein neues Bookmark. Als Adresse gebt ihr eines der folgenden Skripte ein.

Weiter...

Das fluid-Projekt – works well in a crowded area™

 Das fluid-Projekt fasst einige Tricks zusammen, auf die ich während der Arbeit an der Site des Fotografen Michael Eckstein gestoßen bin.
Fluid bedeutet in diesem Zusammenhang: Bei einer Fenstergrößenänderung skalieren alle Elemente einer Website mit, wobei Schriftgrößen nicht bzw. anders verändert werden. Hierbei gehe ich von einer Maximalgröße der Seite aus, für die alle Bilder angelegt werden.
Die Nutzer kleinerer Bildschirme können dann ein verkleinertes Abbild der Site sehen, ohne auf Lesekomfort durch Skalieren der Schrift verzichten zu müssen.
Auf der oben genannten Site könnt ihr sehen, wie das dann aussieht (einfach mal das Browserfenster verkleinern/vergrößern).
Hier die Leute, die mit ihren Blogs und Tutorials geholfen haben, das ganze zu verstehen:

• Ethan Marcotte, The unstoppable Robot Ninja und sein Artikel Fluid Images

• Vom gleichen Autor auf A list apart der Artikel Fluid Grids

Weiter...