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...

Scroll while mousedown

Nachdem ich jQuery und jQuery UI kennen und schätzen gelernt habe, wollte ich gleich mal probieren, wie ich eigene Scroll-Elemente erstellen könnte. Denn mal ehrlich — die Betriebssystem-Scrollbalken passen einfach nie zum Website-Design
Das mit dem scrollen war dank jQuery und scrollTo-Plugin schnell erledigt: Button-Element mit Event-Callback mousedown ausstatten und schon wird gerollt. Genau einmal! Hmm...
Also muss eine Art while(mousedown) her, nur leider gibt es das nicht so einfach. Dann fand ich aber den Forumsbeitrag von itsallkizza auf CodingForums, der aber ein kleines Problem aufweist, das wir im Folgenden beheben werden.
Das soll getan werden: Der Inhalt eines div-Containers soll über zwei weitere Elemente nach oben bzw. unten gescrollt werden. Diese Elemente können beliebige Bilder oder andere DOM-Objekte sein (um den Download der Demodateien klein zu halten, verwende ich hier HTML-Buttons).
Solange auf den Button gedrückt wird, soll die Scrollfunktion laufen, bei mouseup soll sie wieder aufhören. Das Problem: Die jQuery-Funktion mousemove ist sehr CPU-hungrig, die im Forum gefundene Lösung hat hingegen einen unschönen Seiteneffekt.

Weiter...