jQuery resize

Kleines (quick and dirty) Beispiel für die jQuery Resize Funktion
In einem Projekt musste ich ein genau hinter einem Logo ein Hintergrund-Bild starten lassen, welche dann dann horizontal den Rest des Bildschirms ausfüllen sollte… Wie ein Strahl der aus dem Logo kommt.
Auf Grund der bestehenden CSS/HTML Struktur und natürlich zu wenig Zeit ist diese kleine Javascritp Lösung entstanden.

bgposition = function(){
    var left = $('a.logo').position().left;
    left = Math.ceil(left);
    $('.containerMitCSSBackgroundImage').css('background-position', left+'px 0');
  }
    bgposition()
  $(window).resize(function(){
    bgposition();
  });

Die Funktion bgposition() wird beim Start der Seite aufgerufen und die Position des Logos abgefragt, dieser Wert wird gerundet und dann dem Container mit dem background-image als Hortizontale „Start“ Position mitgegeben.

Wenn das Fenster nun verkleinert oder vergrößert wird, greift die die resize() Funktion von jQuery und die Funktion wird erneut ausgeführt. Schnell, klein, praktisch das mag ich an jQuery.

Custom Event in JQuery

In einem Projekt wird asyncron eine JSON Abfrage gemacht und die Daten verarbeitet, das Ganze ist ausgelagert in eine separate JavaScript Datei.  Jetzt möchte ich gerne die Anzahl der zurück gegebenen Elemente auf der Seite ausgeben, dafür nutz ich der Einfachheit halber ein jQuery Schnipsel und füge die Zahl hinter einem bestimmten Element ein. Um diesen Individuellen Schnipsel jetzt allerdings nicht die Ablauf Logik der JSON Abfrage unterzubringen habe ich einen individuellen Trigger integriert und reagieren in einer anderen JavaScript Datei darauf und kann somit beiden „sauber“ von einander trennen.

$.getJSON(this.url, function (data) {
  // ... data verarbeiten

  // wenn fertig diesen CustomTrigger aufrufen
  // für bessere Zuordnung einen individuellen Namenspace nutzen
  // und dann noch die Anzahl derDaten übergeben
  $(document).trigger('AppNameSpace/ItemsCountReady', data.length );
});

In der anderen  JavaScript Datei frage ich dieses Event ähnlich einem Click-Event ab und verarbeite die übergebenen Daten.

(function(){
	$(document).on('AppNameSpace/ItemsCountReady', function(e, results){
		$('h1').after($('<p />').text( results + ' items'));
	});
})();

Quelle:
http://tutsplus.com/lesson/custom-events-and-the-observer-pattern/

Bilder invertieren mit Canvas

Für ein kleines Fun Projekt wollte ich auf einer Internetseite die Bilder von Personen  invertieren und habe dafür ein wenig mit dem Canvas Element rumgebastelt.

Bei einem Click auf einen Link wird eine zufällige Person aus dieser Liste ausgewählt, die Pixel des Bildes werden invertiert und dann wieder als dataUri zurückgegeben.

Raus gekommen ist dabei folgendes:

var person = all.eq(Math.floor(Math.random() * 5));
// bei der Erstellung des Canvas Elementes mit
// jQuery wurde die Größe nicht korrekt übernommen,
// daher auf dem "klassichem" Wege
var $canvas = document.createElement("canvas");
$canvas.width = 210;
$canvas.height = 98;
var ctx = $canvas.getContext('2d');
var img = person.get(0);
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, $canvas.width, $canvas.height);
var imageData = ctx.getImageData(0, 0, $canvas.width, $canvas.height);
var pixels = imageData.data;
var numPixels = imageData.width * imageData.height;
for (var i = 0; i < numPixels; i++) {
	pixels[i * 4] = 255 - pixels[i * 4];
	pixels[i * 4 + 1] = 255 - pixels[i * 4 + 1];
	pixels[i * 4 + 2] = 255 - pixels[i * 4 + 2];
};
ctx.putImageData(imageData, 0, 0);
// Daten wieder zurückschreiben
person.attr('src', $canvas.toDataURL('image/jpeg'));

Als Grundlage habe ich mich auf diese fantastischen Tutorials gestütz:
http://css.dzone.com/articles/html5-image-effects-sepia
http://net.tutsplus.com/tutorials/javascript-ajax/canvas-from-scratch-pixel-manipulation/