robsite

In jquery

Heises 2-Klick-Like-Button

heises-2-klick-like-button

Verhindert, dass Daten schon beim Laden der Seite an Facebook, Twitter oder Google ĂŒbertragen werden. Facebook hat sich schon am nĂ€chsten Tag beschwert, dann aber einen RĂŒckzieher gemacht.

Alternativ könnte man das ganze Geraffel auch einfach weglassen.

Oder...

· jquery, privacy, webdev · ★

jQuery-Combinators

Vier kleine Kombinator-basierte Funktionen, mit denen eigene Funktionen Àhnlich leicht zu benutzen sind wie jQuerys.

So kann z.B. dies:

var items = $('.item');
if (items.length) {
    do_stuff(items);
}
items.removeClass('some_class');

geschrieben werden als

$('.item').ergo(do_stuff).removeClass('some_class');
· javascript, jquery · ★

jQuery Masonry

jquery-masonry

Ordnet Elemente vertikal so an, dass es möglichst kleine LĂŒcken zwischen ihnen gibt.

Edit: Version 1.1 kann nun Elemente live resizen und dabei animieren: Demo

· jquery, tool, webdesign · ★

Smooth path in canvas

Ich spiel grad mit <canvas> rum und wollte eine Kurve möglichst fließend durch Punkte fĂŒhren:

/images/posts/0000/2068/smooth_path_explanation_big.png

Viele Algorithmen laufen entweder nicht durch jeden Punkt oder setzen voraus, dass man die Pixel selbst malen will, was gerade bei Anti-Aliasing recht mĂŒhselig wird. Ich fand dann einen netten Algorithmus von Jean-Yves QuĂ©inec, der BĂ©zier-Splines so hinbiegt, dass eine durchgehende schöne Kurve entsteht. Manchmal gibts noch leicht merkwĂŒrdige Kurventeile aber insgesamt funktioniert es gut.

Der Code: smooth_path.js

Die Funktion bekommt ein Array von Punkten und erstellt einen Pfad, den man dann selbst malen kann.

  • path - Ein Punkte-Array der Form [{x:0, y:0}, {x:10, y:10}, ...]

  • smoothness - Der Grad der Biegung. 0 glĂ€ttet nichts, 1.05 macht aus einem Quadrat einen Kreis und auch sonst schöne Kurven, alles andere erzeugt lustige Formen.

  • joinPath - Falls true werden die Kurven am Anfang und Ende des Pfades aufeinander ausgerichtet, sodass eine durchgehende Form entsteht, wenn Anfangs- und Endpunkt aufeinander liegen.

  • c - der canvas-Kontext

Wer Fehler findet oder Verbesserungen hat, immer her damit :)

Beispiel:

var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
var path = [{x: 100, y: 100}, {x: 20, y: 150}, {x: 200, y: 200}, {x: 100, y: 100}];
var smoothness = 1.05;
var joinPath = true;
c.beginPath();
smoothPath(path, smoothness, joinPath, c);
c.stroke();
c.closePath();

Und eine kleine Demo. Per Maus die Punkte setzen, mit dem Slider die smoothness verÀndern.

· meins, canvas, grafik, javascript, jquery · ★
Mastodon