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.