Archiwum tagu: javascript

jQuery - Centrowanie w pionie i poziomie

Centrowanie elementu w pionie i poziomie niejednokrotnie stanowi problem. Dlatego dzisiaj zaprezentuję obejście problemu i jego szybkie rozwiązanie za pomocą jQuery. Zaletą tej metody, jest fakt, że nie musimy znać wielkości wyśrodkowywanego elementu.

Myślę, że każdemu przyda się taki szybki trik. :)

jablko

Metoda wywoływana jest w 2 przypadkach:

1. przy każdej zmianie rozmiaru okna ($(window).resize()),

2. po załadowaniu strony ().

Zasadniczo mechanizm metody jak taki sam jak w przypadku często stosowanej metody CSS, czyli nakłada position:absoute, a następnie wyśrodkowuje element, z tą jedna uwagą ze nie musimy znać wielkości elementu, bo jest ona pobierana dynamicznie i uwzględniania w wyliczaniu pozycji. Warto zauważyć, że podczas pobierania elementu nie została wykorzystana funkcja width() i height(), a outerWidth() i outerHeight(). Ma to na celu pobranie wartości rozmiaru elementu z uwzględnieniem paddingu czy bordera, co nie miałoby miejsca w przypadku width() i height().

$(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width() – $('.className').outerWidth())/2,
top: ($(window).height() – $('.className').outerHeight())/2
});
});
// wykonanie funkcji na starcie
$(window).resize();

Szybkie i skuteczne :) Polecam

źródło: blog.alchemycode.pl


Nowa wersja jQuery 1.7 BETA 1

Pojawiła się nowa wersja najpopularniejszego frameworka JavaScriptu – jQuery 1.7 BETA 1. Zawiera ona kilka nowych ciekawych funkcji oraz wiele poprawek. Zachęcam do sprawdzenia i testowania :)

A co nowego znajdziemy w wersji 1.7 BETA 1?

  1. Możliwość rejestracji jQuery jako asynchronicznego modułu AMD, przez co nie będzie konfliktów między różnymi wersjami ładowanego jQuery.

  2. Większe wsparcie dla HTML5. Można odwoływać się do innerHTML jego elementów. Klonowanie działa teraz w wielu przeglądarkach.

  3. Obsługa nazywanych kolejek przez animate ( ), dzięki czemu zachowana jest kolejność animowanych obiektów na liście.

  4. Nowe metody: .on() and .off() do podpinania się w bardziej jednolity sposób do zdarzeń.
  5. Usuwanie wielu atrybutów przez removeAttr( ).

  6. Szybsze działanie funkcji do przechowywania i pobierania danych .data( ).

Testowa wersja 1.7 do pobrania pod adresem:

code.jquery.com/jquery-1.7b1.js

źródło: addyosmani.com, blog.jquery.com


Płynne przejście kolorów tła w JavaScript

Ostatnio, przy okazji tworzenia layoutu panelu administracyjnego dla nowego serwisu natrafiłem na pewien problem. Spodobał mi się znany z WordPressa efekt płynnego przejścia kolorów tła elementu. Np. po dodaniu wpisu pojawia się komunikat w stylu “Wpis został dodany” na kolorowym tle, przy czym kolor tego tła przechodzi z jednego w drugi.
Czytaj dalej »