Athlan • Piotr Pelczar • blog programisty » JS/Ajax

jQuery Animate i Easing

Athlan — Sat, 08 May 2010 08:17:41 +0000

Nie można kwestionować faktu, że jQuery.animate() jest jednym z najbardziej potężnych narzędzi jQuery. Służy on do animowania atrybutów CSS (czyli zmiany ich wartości w czasie od obecnego stanu A do definiowanego stanu B). Najprostszą implementacją jQuery Animate jest podanie zbioru atrybutów CSS, które mają ulec zmianie oraz czasu, w jakim ta zmiana ma nastąpić. Nie będę się zagłębiał w najprostsze przykłady użycia, są one dostępne w oficjalnej dokumentacji jQuery.

Należy pamiętać, że dzięki jQuery jesteśmy w stanie nie tylko płynnie zmieniać kolory, wielkość czcionki, obramowanie, ale także pozycje elementów, nadając stronie dynamicznego kształtu. Domyślnym sposobem animowania (easing) jest płynne przechodzenie. Istnieje natomiast sposób na zmianę adaptera animowania. Robert Penner – autor pluginu jQuery Easing dostarczył nam niewiarygodnie efektowne i proste w implementacji narzędzie. Na oficjalnej stronie pluginu można znaleźć wiele przykładów animacji, które dostarcza nam dodatek. Efekty widoczne są zwłaszcza przy animowaniu pozycji i wymiarów obiektu, ale następują także w przypadku zmiany koloru – czyli są aplikowane do zmiany stanu każdego z atrybutów CSS.

Dziś postaram się pokazać efekty, jakie można uzyskać za pomocą jQuery Animate rozszerzonego o jQuery Interface oraz Easing.

Przykład różnego rodzaju easingu.

Pierwszym krokiem jest wygenerowanie własnej biblioteki jQuery Interface. Dzięki generatorowi, jesteśmy w stanie ściągnąć tylko te części Interface, które są nam de facto potrzebne, zmniejszając jednocześnie ilość kodu. Klikamy ‘deselect all components’, a w sekcji Effects wybieramy efekty, których będziemy używać. Mnie w tej chwili interesuje Bounce i Slide. W paczce otrzymamy wersję deweloperską (z wcięciami) oraz minified, gotową do publikacji na serwerze.

Do wykorzystania efektu slideowania a’la iPhone (elastyczne odbicie od krawędzi ściany ekranu) sprowadza się drobny kawałek kodu, w którym istotnym jest parametr easing:

$('#example').animate({ left: 500 }, { duration: 1000, easing: 'easeOutElastic' })

Na pewno komuś się przyda.

JS Gamble game

Athlan — Sat, 16 May 2009 17:49:15 +0000

Wspólne wieczory z przyjaciółmi na wycieczce – to jest to – chyba każdy doświadczył gry w karty po nocach. Ale co jak na wycieczkę jedzie delegacja “komputerowców”, którzy nie biorą ze sobą nic oprócz ubrań, kawy i notebooków? Programista ma jedną przewagę nad innymi ludźmi – może stworzyć sobie własny wirtualny entertejment, kiedy pod ręką brak np… grę w kości kości.

Do szczęścia potrzebny był mi paint, notatnik i znajomość JavaScript. Stworzenie mini-gry kości zajęło niecałe 10 minut i fun na całą noc :-P

Demo gry w kości, czyli to, co udało mi się na szybko wypocić.

Zasady gry:

Chyba każdemu znane, ale przypomnijmy:

Kości to gra dla 2-4 osób, w której gracze turlają kostkami, by uzyskać określone układy oczek, za które otrzymuje się punkty. Wbrew pozorom nie jest to gra zależna tylko od szczęścia — liczy się w niej raczej umiejętność kalkulacji.

W każdej z 13 kolejek każdy z graczy ma do dyspozycji trzy rzuty kostkami. Pierwszy z nich odbywa się zawsze wszystkimi pięcioma kostkami, a w drugim i trzecim, które nie są obowiązkowe, wybrane kostki mogą zostać zatrzymane; rzut odbywa się wtedy tylko niezatrzymanymi.

Więcej zasad: http://www.kurnik.pl/kosci/zasady.phtml
Zaznaczamy te kości, którymy chcemy losować, mamy 3 rzuty dowolnymi kościami, potem przekazujemy myszkę koledze.
Gdy nie jest zaznaczona żadna kość do losowania, oznacza to, że chcemy losować wszystkimi kośćmi.

Have fun ;p

jQuery form post ajax request

Athlan — Sun, 22 Feb 2009 09:48:46 +0000

Już kiedyś interesowałem się jQuery, ale w związku z podjęciem się nowego, dużego projektu postanowiłem pogłębić swoją wiedzę i pobawić się tą biblioteką.

Jako, że klient ma bzika na punkcie przeładowań ajax postanowiłem zaimplementować automatyczne przesyłanie formularzy w tle i wklejanie w response żądania. Od strony PHP sprawa wygląda bardzo prosto – jeżeli request został wysłany przez jQuery, wyświetlamy tylko to, co jest pomiędzy i . Po wysłaniu requesta, jQuery powinno wkleić wynik do body na naszej stronie.

Przykładu nie będę tłumaczył, bo wydaje mi się trywialny.

Dodatkowe ficzery:

disable submita do momentu, aż ajax nie otrzyma odpowiedzi (aby użytkownik nie mógł kliknąć drugi raz),
automatyczne wykrywanie adresu URL, do którego odnosi się formularz (jeżeli nie sprecyzowano atrybutu action, wówczas wysyłamy żądanie do window.location).

Aby nasz formularz zaczął przesyłać dane w tle wystarczy dołączyć plik jquery.autoload, a w kodzie napisać:

$(document).ready(function() {  InitAjaxPost(' ... SUBMIT_ID ... '); });

Ten sposób nie rozwiązuje przesyłania pól typu file.

Szkoła hackerów

Athlan — Thu, 21 Aug 2008 18:34:40 +0000

Tak się składa, że czasem szperam w kodach źródłowych witryn. Szkoła hackerów – kurs “hackingu”, który się reklamuje po całym Internecie (padła propozycja również dla mojego serwisu lookme.pl) nie dba o swoją aplikację webową.

Jeżeli stawiamy walidator do formularza, który ma obsłużyć dane wprowadzone przez użytkownika, musimy:

Sprawdzić je po stronie serwera, jeżeli przejdą proces walidacji, dopiero potem podjąć akcję, w przypadku wystąienia błędów – wyświetlić je użytkownikowi.
(Ewentualnie) Poinformować o błędzie już po stronie użytkownika bez przeładowania strony ani bez użycia jakiegokolwiek requestu ajax (sprawa kosmetyczna, niekonieczna).

Każdy programista powinien powiedzieć, że walidacja po stronie serwera jest najważniejsza, już pomijając tą po stronie użytkownika, bo przecież kod JS można modyfikować, więc może go teoretycznie nie być.

Już raz Szkoła Hackerów dała popis – dziura SQL Injection. Specjaliści? Nawet na forum przedszkole (forum.php.pl) rzadko zdarzają się aż tak amatorskie kody.

Narzędziem firebug sprawdziłem formularz kontaktowy szkoły hackerów. Okazało się, że formularz posiada atrybut onsubmit, który wykonuje funkcję javascript valid(). Za pomocą narzędzia Firebug pozwoliłem sobie ją pominąć, tak, aby formularz zawsze otrzymywał true przy onsubmit (czyli się wykonywał). Okazało się, że dane po stronie serwera nie są sprawdzane. Nie jestem w stanie zdiagnozować, czy mail się wysłał, ale w takim przypadku użytkownik otrzymuje komunikat:

Twoja wiadomość została wysłana. Odpowiemy tak szybko, jak tylko będzie to możliwe, z reguły w ciągu 24 godzin. Odpowiedź zostanie przesłana na podany przez Ciebie adres e-mail ().

Amatorka?

Ocenpizze.pl

Athlan — Thu, 24 Jul 2008 14:29:41 +0000

22 lipca oficjalnie wystartował mój nowy projekt: ocenpizze.pl. Każdy użytkownik może m.in.:

oceniać pizzerie wg 3 kategorii: wystrój, obsługa oraz jakość podawanego jedzenia wraz z dodaniem osobistego komentarza,
wyszukiwać pizzerie w swoim mieście/województwie,
uzyskiwać informacje o aktualnie otwartych lokalach w danej lokalizacji w danym czasie (innowacyjny pomysł na polskiej scenie gastronomicznej),
proponować nowe lokale.

Właściciele lokali mogą:

uzyskać dostęp do panelu administracyjnego,
uzupełniać godziny otwarcia swojego lokalu,
dodawać fotografie i logo lokalu,
tworzyć prezentację swojej firmy na zasadzie tworzenia zakładek.

Serwis po dwudniowej pracy zyskał sympatię wielu użytkowników. Tych, którym podoba się serwis, zapraszam na wykop.

Weryfikacja spamu?

Athlan — Sun, 12 Aug 2007 10:36:51 +0000

Dzisiaj chciałbym się zająć ukrywaniem zewnętrznych obrazów. Dlaczego wart się chronić. Wiele spambotów wykorzystuje metodę weryfikacji dostarczenia wiadomości poprzez wyświetlenie obrazu. Jeżeli program kliencki to aplikacja internetowa (chociażby gmail, onet poczta, poczta interii itp) nie będzie najmniejszego problemu weryfikacji obrazu. Jak to działa? Spambot buduje linki:

http://spam.com/logo.jpg?m=jakis@email

Co mu to daje. Do każdego listu dołączone są obrazy, może być to logo, znaczek firmowy bądź też ukryty gif 1×1 pikseli. Wszystko po to, aby użytkownik nie zorientował się, że otwarcie niepożądanej wiadomości jest weryfikowane. Po co weryfikacja? Jeżeli list zostanie otwarty, spambot będzie kontynuował wysyłanie maili, jeżeli nie, zaprzestanie działań, bądź sprawdzi jeszcze kilka maili.

Lekarstwo na ten problem zastosował gmail, ukrywając wyświetlanie grafiki w mailach dla bezpieczeństwa użytkowników. Sprawa przedstawia się bardzo prosto, ale daje oczekiwane rezultaty. Z pomocą przychodzi nam kawałek kodu:

http://phpfi.com/255830

Jeszcze się z takim przypadkiem nie spotkałem, ale spamboty mogą zacząć weryfikować otwierając dokumenty .js, .css, .js zawarte w nagłówkach.

Kolejną rzeczą, której należy unikać to rezygnacja z subskrycji w podejrzanych mailach. Tak naprawdę może ona zasubskrybować nasz adres poczty elektronicznej, weryfikując rezygnację.

Preloader obrazów

Athlan — Fri, 10 Aug 2007 14:49:01 +0000

Preload obrazów jest bardzo prosty. Nadajemy atrybutowi onload dla tagu img akcje, która miałaby schować maskę nałożoną na obraz po jego załadowaniu.

Funkcja javascript: http://phpfi.com/255529
Kawałek styli CSS: http://phpfi.com/255528
Ostatnia rzecz… kod xhtml: http://phpfi.com/255527

Kod do własnego dostosowania.

NOTE: Dla elementów xhtml znajdujących się wewnątrz warstwy z atrybutem overflow = auto, należy:

Zmienić w kodzie CSS pozycję absolute na domyślne: relative oraz nadać tagowi img width oraz height na 0px.
Do kodu javascript: nadać obrazowi odpowiednie rozmiary – ta akcja zostanie wykonana po schowaniu maski po załadowaniu obrazu.

mintAjax

Athlan — Thu, 01 Mar 2007 22:52:52 +0000

Ostatnio na blogu Zyx’a wyczytałem notkę o mintAjax. Powstało wiele wersji Ajaxa obsługujących dynamiczne requesty, jednak ten zadziwił mnie najbardziej, w pełnym stopniu pozytywnie. Kolejny dowód na to, co potrafią Polacy. Dla takiego cuda szkoda słów, wystarczy popatrzeć na przykłady zastosowań.

Zawartość biblioteki mintAjax:

Rozbudowana obsługa zapytań AJAX

Odpowiedź jako czysty tekst lub w formacie XML bądź JSON

Wznawianie zapytań do serwera

Automatyczne wysyłanie danych z formularzy

Animowane efekty graficzne

Zmiana kolorów obiektu

Zmiana położenia obiektu

Zmiana rozmiarów obiektu

Zmiana przezroczystości obiektu

Drag’n'Drop

Ustawianie pola ograniczającego dla przeciąganych obiektów

Blokowanie przesuwania w pionie lub pozioimie

Wstawianie przeciąganych obiektów w środku kontenera z rozsuwaniem sąsiednich obiektów

Możliwość ustawienia różnych stylów dla różnych zdarzeń

Kontrolki do obsługi zakładek oraz drzewek

Dynamiczne ładowanie zawartości z serwera jako zwykły tekst lub w formacie XML bądź JSON

Pamięć podręczna zapobiegająca ładowaniu zawartości za każdą zmianą zakładki/elementu

Dynamiczna zmiana adresu bez przeładowania strony

Możliwość ustawienia różnych stylów oraz ikon dla różnych zdarzeń

Kontrolka dynamicznych tabel

Sortowanie tabeli według napisów, liczb i dat

Zaznaczanie pojedyncze/wielokrotne wierszów tabeli

Usuwanie i pobieranie zaznaczonych wierszów

Możliwość ustawienia różnych stylów dla różnych zdarzeń

Pozostałe

Menadżer eventów rozwiązujący problem wskaźnika this w IE

Zestaw funkcji do m.in pobierania położenia obiektu, elementu w podanym punkcie, przezroczystości obiektu, sprawdzenie czy punkt znajduje się wewnątrz obiektu, zamiana koloru HEX na RGB i inne

Cały kod zajmuje jedynie ~40 kb, a możliwości są ogromne, osobiście zastosuje bibliotekę w moich projektach, tym bardziej, że posiada doskonałą dokumentację.

Valentine’s Day

Athlan — Wed, 14 Feb 2007 22:05:36 +0000

Walentynki – miły dzień, w którym nawzajem mówimy sobie coś słodkiego. Youtube z tej okazji zrobiło specjalny klip Video, w którym użytkwnicy mogli wypowiedzieć się, co tak naprawdę kochają. Ostatni użytkownik kocha JavaScript :)

Select all checkboxes

Athlan — Thu, 08 Feb 2007 16:33:42 +0000

Ostatnio zabrałem się za prywatne wiadomości w jednym z moich prac. Lista wiadomości miała dużo checkboxów, które obsługiwały akcję dla zaznaczonych elementów. Bardzo długo testuje moje aplikacje, gdy zebrało się około 30 testowych prywatnych wiadomości musiałem zaznaczyć wszystkie i wybrać akcję “usuń”. Co by było, gdyby projekt wszedł w użycie i ktoś musiałby borykać się z tym samym problemem? Postanowiłem użyć JavaScript i stworzyć funkcje CheckboxReverse() dla odwrócenia zaznaczenia oraz CheckboxCheck() dla zaznaczenia lub odznaczenia wszystkich elementów. Zapewne bylo to wałkowane wiele razy, w sieci spotkałem wiele gotowców, ale ja pokusiłem napisać się skrypt od podstaw. Dla tych, którzy piszą jak ja ukazał się tan artykuł.

Co powinniśmy wiedzieć?

Przy tworzeniu funkcji CheckboxCheck() powinniśmy wiedzieć, jak przeskanować wszystkie elementy formularza i wybrać checkboxy, po czym ustawić zaznaczenie. Na dostęp do elementów formularza pozwala odniesienie oObject.elements, gdzie oObject to obiekt formularza pobrany za pomocą zidentyfikowaniu po id i deklaracji funkcji GetElementById(), dla document. Jako że atrybut elements jest tablicą, nasza praca na nich nie powinna być trudna, wystarczy stworzyć pętlę. Do tego potrzebna nam jest jeszcze ilość elementów. Aby ją otrzymać musimy wykonać polecenie oObject.elements.length (.lenght – odpowiednik count() w PHP). Atrybut elements jest taką samą tablicą jak w PHP, dlatego aby odnieść się do trzeciego elementu formularza należy podać oObject.elements[2]; . Ok teraz kolejna sprawa… każdy input jest obiektem, który posiada wiele atrybutów. Nas będą interesowały tylko trzy: type (string), disabled (bool) oraz checked (bool). Pierwszy atrybut informuje nas o wartości parametru type=”" w HTML. Parametry 2 i 3 przyjmują wartości logiczne true/false. Pierwszy informuje o aktywności elementu, gdy false, wówczas elementu nie można zaznaczyć, staje się zaciemniony. Druga wartość informuje nas o tym, czy checkbox jest zaznaczony, czy nie. Aby odwolać się do atrybutu należy wykonać: oObject.elements[numer_elementu].nazwa_atrybutu.Czas na kod.

[js]function CheckboxReverse(oObject)
{
var iObjectElements = oObject.elements.length;

for (iElement = 0; iElement < iObjectElements; iElement++)
{
if(oObject.elements[iElement].type == “checkbox” && oObject.elements[iElement].disabled == false)
{
if(oObject.elements[iElement].checked == true)
oObject.elements[iElement].checked = false;
else
oObject.elements[iElement].checked = true;
}
}
}

function CheckboxCheck(oObject, bMode)
{
var iObjectElements = oObject.elements.length;
var bMode = (bMode === true) ? true : false;

for (iElement = 0; iElement < iObjectElements; iElement++)
{
if(oObject.elements[iElement].type == “checkbox” && oObject.elements[iElement].disabled == false)
{
oObject.elements[iElement].checked = bMode;
}
}
}[/js]

Użycie:

[html]reverse selection
select all
deselect all

[/html]

Cookie checker

Athlan — Mon, 05 Feb 2007 17:01:25 +0000

Dostałem maile i komentarz na blogu odnośnie sprawdzania ciastek usera. Dyskusja wynikła z artykułu „Online counter + cache‿, w którym takowe były wykorzystywane. Jeden z internautów zapytał czy jest możliwe sprawdzenie, czy da się sprawdzić, czy użytkownik ma włączoną obsługę ciastek i podjąć jakieś działania. Inny zaś zapytał, czy jest to do wykonania z poziomu JavaScript. Na oba pytania mogę śmiało odpowiedzieć: TAK.

Logika zachowania skryptu w obu przypadkach (PHP i JS) jest taka sama: wysyłamy użytkownikowi ciastko, a następnie sprawdzamy jego wartość. Jeżeli wartość jest błędna, lub nie istnieje, wówczas możemy wyciągnąć śmiały wniosek, iż takowy cookies nie został prawidłowo przesłany – user ma wyłączone cookies, bądź ich wysyłanie jest błędnie interpretowane.

Kod ze strony PHP, który ma wbudowaną funkcję setcookie() i odczyt z poziomu tablicy $_COOKIES (odnoszę do manuala)

[php]function CheckUserCookies()
{
setcookie(‘testcookie’, ‘test’, (time() + 60));

if(isset($_COOKIE['testcookie']))
return true;

return false;
}

if(CheckUserCookies())
echo ‘ok, user ma włączone cookies’;
else
echo ‘proszę, włącz swoje cookies!’;[/php]

JS nie ma wygodnej sytuacji, musi w jakiś sposób utworzyć cookies, zostały stworzone funkcje createCookie() oraz readCookie() (skorzystałem z gotowego rozwiązania). Aby ułatwić pracę, funkcja ustawiająca ciastko otrzymała takie same trzy pierwsze parametry, jak jest w przypadku PHP.

[js]function CheckUserCookies()
{
createCookie(‘testcookie’, ‘test’, 60);

if(readCookie(‘testcookie’) == ‘test’)
return true;

return false;
}

function createCookie(name, value, timestamp)
{
if (timestamp)
{
var date = new Date();
date.setTime(date.getTime()+(timestamp));
var expires = “; expires=”+date.toGMTString();
}
else var expires = “”;
document.cookie = name+”=”+value+expires+”; path=/”;
}

function readCookie(name)
{
var nameEQ = name + “=”;
var ca = document.cookie.split(‘;’);
for(var i=0;i < ca.length;i++)
{
var c = ca[i];
while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

/**
* Usable…
*/

setTimeout(“alert(CheckUserCookies())”, 100);
[/js]