ScrollTo Post mit jQuery

Oft sind es Kleinigkeiten, die die Benutzung einer Webseite entscheiden verbessern oder verschlechtern können. Auf der WebDesignerWall gibt es ein schönes Beispiel für einen Effekt den man schon auf zahlreichen Blogs so oder in ähnlicher Form findet: Eine kleine Navigationsfläche um von Beitrag zu Beitrag zu scrollen. Ihr findet dort nicht nur den Link zum jQuery-Plugin sondern auch gleich den notwendigen Code um es in Eure Seite zu intergrieren. Das Beispiel sollte übrigens schon relativ kompatibel zu zahlreichen WordpRess Themes sein.

Ob Ihr darin eine Bereicherung oder eine überflüssige Spielerei für Eure Seite seht bleibt natürlich Euch überlassen.

Foto: hinkelstone@flickr

Ein einfaches “Lightview Style” Popup mit CSS3 und jQuery

Täglich wächst die Zahl meiner Bookmarks aber leider nicht die Zahl der Beiträge in diesem Blog. Heute möchte ich Euch aber einen netten Beitrag zeigen, den ich heute im Netz gefunden habe (Quelle leider vergessen) die uns zeigt, wie wir mit einigen wenigen Zeilen HTML, CSS und jQuery ein richtig schickes Popup hinbekommen.

Den ganzen Beitrag findet Ihr bei http://www.sohtanaka.com/.

Wenn Ihr Interesse habt bastel ich daraus noch ein kleines jQuery-Plugin. Kommt ganz auf den Bedarf an.

Mit regulären Ausdrücken Links in Twitter einfügen

jQuery - write less do moreStatt vieler Worte heute mal nur ein paar Zeilen Code und eine kurze Erklärung:

Wenn Ihr über die Twitter-API Nachrichten von Twitter abfragt bestehen diese nur aus Text. Schöner wären hier natürlich anklickbare Links, Hashtags und Nutzernamen, was ihr mit folgendem Code einfach bewerkstelligen könnt. Die Regulären Ausdrücke lassen sich natürlich auch in anderen Sprachen realisieren. Gefunden habe ich sie bei Andrea Olivato

  1. var tweet = 'woohoo dank @ugotit von http://www.ugotit.de hab ich ein paar tolle #regular #expressions gefunden.';
  2. tweet = tweet.replace(/http([s]?):\/\/([^\ \)$]*)/,'<a href="http$1://$2" rel="nofollow" title="$2">http$1://$2</a>');
  3. tweet = tweet.replace(/@([a-zA-Z0-9_]*)/,'<a href="http://twitter.com/$1" title="$1 profile on Twitter" rel="nofollow">@$1</a>');
  4. tweet = tweet.replace(/\#([a-zA-Z0-9_]*)/,'<a href="http://search.twitter.com/search?q=%23$1" title="search for $1 on Twitter" rel="nofollow">\#$1</a>');

Lesestoff: Weave #1.2010

Blick in die Weave #1.2010Das neue Jahr beginnt gleich mit etwas Werbung: Johannes und ich haben mal wieder ein Tutorial für die Weave geschrieben, welches ihr ab dem 18.01. am Kiosk Eures Vertrauens erstehen könnt. Diesmal beschäftigen wir uns mit twitternden Karten: Wir haben mit ein wenig jQuery Google Maps und Twitter kombiniert und zeigen Euch, wie man Tweets für einen Ort auf einer Karte anzeigen lassen kann. Den passenden Quellcode der Demo findet Ihr auch auf der Homepage.

Was es sonst noch so zu entdecken gibt könnt Ihr auf der Homepage der Weave sehen.

Mehr als 25 aktuelle Cheat Sheets

ink and paperAus der Kategorie: Links die zumindest ich später nochmal brauche: Mehr als 25 Cheat Sheets zu HTML, CSS, jQuery & Co. Sicher einen Blick wert.

In Cheat Sheets oder “Spickzettel” werden die wichtigsten Informationen zu einem bestimmten Thema zusammengefasst. Besonders nützlich und zeitsparend sind sie für Webworker. So hat man z.B. einen schnellen Überblick über wichtige Funktionen oder über alle möglichen Shortcuts eines Programms, um effizienter arbeiten zu können.
web-tuts.de

Foto von Tom Bunny