Today I will present short code snippet in jQuery which will can be used to hide element on website by clicking outside of it. This snippet could be used ie. to present any information in popoup which should be visible

Bardzo często się zdarza, że grafik zaprojektuje grafikę strony tak, że na niektóre elementy nie mamy zbyt wiele miejsca, a dodatkowo powinny się mieścić w jednej linii. Wszystko fajnie jeżeli chodzi o projekt graficzny, jednak problem pojawia się w przypadku dynamicznej zawartości. Nie jesteśmy bowiem w stanie przewidzieć jak długi tekst wprowadzi użytkownik. Można co [...]

Bardzo często dostając projekt graficzny od grafika widzimy, że zostały tam zamieszczone niestandardowe czcionki. Pół biedy jak czcionki te są użyte na elementach, które mogą zostać wycięte i wstawione na stronę w postaci grafik. Problem pojawia się wtedy, gdy sam tekst dostarczany do elementów strony występuje przy użyciu takiej czcionki. Jest jednak na to rada. [...]

Ze względu na uczestnictwo w niedawnej konferencji onGameStart czas na podjęcie tematyki HTML5 w serii Linkdump. Już dawno nie było nic na ten temat na moim blogu, także w ramach naprawy tego błędu zapraszam do lektury niniejszego wpisu.     Fotografia: Josef Dunne, CC-BY-SA. Linkdump #60: HaTeeMeL5. Syncing Content With HTML5 Video. Interesujący artykuł na [...]

Praca programisty nie zawsze polega na rozwiązywaniu zaawansowanych problemów programistycznych, czy też tworzeniu złożonych algorytmów przeliczających niewyobrażalne zbiory danych. Czasem potrzebujemy zwyczajnych, prostych, czasem wręcz trywialnych rozwiązań dla problemów naszych klientów. Ostatnio zetknąłem się z jednym z takich problemów - pobieraniem miniaturek do filmów wstawianych poprzez element <iframe> YouTube'a. Zapraszam do lektury krótkiego i treściwego [...]

Ostatnimi czasy tworząc projekty coraz częściej zwracam uwagę na usability, poprawiając przy tym grafików. Dziś krótko, bo o tym, jak dostosować nagłówki <meta>, aby jak najlepiej były przeklejane do okienka udostępniania linków na Facebook’u.

Czasem cennymi danymi są te, które widzi Google oraz użytkownik (meta description i bezpośrednio w pasku przeglądarki title), czasem zależy nam na dostosowaniu prezentacji danych agregatorów, w naszym przypadku Facebook’a, aby użytkownik wklejając linka nie musiał się dodatkowo w nic angażować.

1. Wykryj, czy odwiedza Cię Facebook

   if(preg_match('/^facebookexternalhit/', $_SERVER['HTTP_USER_AGENT']))

2. Dostosuj swój meta description. Pamiętaj, że Facebook ucina spore części tekstów, dlatego sprecyzuj najbardziej chwytliwe fragmenty contentu, które mogą przyciągnąć użytkownika. Dodatkowo możesz zmodyfikować title dodając do niego dziwne znaczki (encje), które na pewno przyciągną wzrok.
3. Przygotuj odpowiedni obraz o odpowiedniej rozdzielczości, a następnie zaserwuj go w tagu: <link rel="image_src" href=" ... " /> Gdy tego nie zrobisz, użytkownik, który przekleja linka będzie sam musiał zdecydować o obrazie, który zostanie mu zaproponowany z puli dostępnych na stronie. Ta praktyka na szczęście jest często wykorzystywana przez programistów, wydaje się być trywialna.
4. Jeżeli chcesz wyeksponować ramkę Facebook’a na swoją stronę www, ustaw transparentność na iframe. Wbuduj ją w diva i nie zapominaj o możliwościach CSS takich jak position: absolute; position: relative; top: -1px; left: -1px; overflow: hidden; aby ukryć czasem kłopotliwe obramowanie iframe’a.

Efekt? Sprawdź sam na Nowiny365.pl.

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.