Preloader obrazów

Aug 10

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.

Kod do własnego dostosowania.

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

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

mintAjax

Mar 01

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ę.

Read More

Valentine’s Day

Feb 14

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 :)

Read More

Select all checkboxes

Feb 08

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]

Read More

Cookie checker

Feb 05

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]

Read More