Kilka przydatnych trików w jQuery


6 lutego 2013 / Piotr Krzysztofik


Witam, dziś chciałbym zaprezentować Wam kilka ciekawych ale bardzo przydatnych trików w jQuery, które pomogą wielu webmasterom w wielu sytuacjach. Do zastosowania tychże trików wymagana jest jedynie biblioteka jQuery. Zapraszam do lektury.

Wyrównanie dwóch kolumn na stronie

Często się zdarza (a mnie się zdarzało bardzo często), że mamy na stronie 2 kolumny (newsy i panele) i chcielibyśmy żeby były one równe – na przykład jeśli jest obramowanie lub różne tło. W momencie gdy nie znamy wysokości obu kontenerów możemy sprawdzać który jest wyższy i nadawać taką samą wysokość kolumnie niższej. Tutaj z pomocą przychodzi nam prosty skrypt jQuery.

HTML:

jQuery:

Płynne przewinięcie do góry strony

Przy długich stronach chcemy ułatwić użytkownikom nawigację po nich. W tym celu można wstawić drugą nawigację na dół strony i/lub link (lub button) powrotu na górę strony. Do tego jest wiele pluginów jQuery, ale aby efekt był ładny i funkcjonalny i jednocześnie nie obciążył naszej strony można wykorzystać krótki skrypt (który wymaga jedynie biblioteki jQuery).

jQuery:

Blokowanie adresu email dla SpamBotów – jQuery + CSS

Dotychczas używałem samego CSS, lecz boty potrafią przecież także przegrzebać href w poszukiwaniu mailto: więc musiałem znaleźć jakieś rozwiązanie na zablokowanie adresu email dla botów które później spamują naszą skrzynkę. Okazuje się, że najprostsze rozwiązania są najlepsze.

HTML:

jQuery:

CSS:

Jak działa ten skrypt? Bardzo prosto.

Wizualnie: [email protected]

W kodzie: moj_adres<span>głupi_bot_odczyta_coś_więcej</span>@gmail.com

Dla użytkownika nic się nie zmienia, nic się nie dzieje, ale bot odczyta adres email razem z naszym ukrytym span’em, więc nie wyśle maila do nas.

Płynne rozjaśnianie w jQuery

Bardzo fajny, ładny i prosty efekt rozjaśniania obrazka bądź też linku.

jQuery:

A teraz tylko trzeba wywołać tę funkcję w kodzie HTML, poprzez dopisanie klasy opacity.

HTML dla obrazka:

HTML dla linku:

Oba kody można połączyć:



11 odpowiedzi na “Kilka przydatnych trików w jQuery”

  1. engray pisze:

    Dzięki za to płynne przewijanie!

  2. junior ;) pisze:

    więcej takich ;)

  3. donpedro pisze:

    to wyrównywanie wysokości kolumn za pomocą JS, po co? CSS wystarczy i nie obciąża przeglądarki.

  4. l pisze:

    $('html, body') <- ??

  5. l pisze:

    Heh, W kodzie zamiast np. apostrofów sa kody apos.

  6. l pisze:

    Co do bezpieczenstwa adresow email to mozna zastosowac css: unicode-bidi:bidi-override; direction: rtl;

  7. shpyo pisze:

    Odnośnie wyrównania kolumn. Dobrym zwyczajem jest cachowanie elementów pobieranym przez jQuery (optymalizacja). Nie ma sensu robienia $(‚#cos’).height() a potem $(‚#cos’).height($(‚#cos2).height()); Lepiej przypisać do div1 i div2 odpowiednie divy, i potem na nich operować.

  8. Franky pisze:

    Co do płynnego przewijania to polecam mój artykuł na ten temat: http://rynko.pl/przewijanie-strony-reagujace-na-aktualna-wysokosc/. Co do reszty tricków, są naprawdę przydatne.

  9. RandomHTMLcoder pisze:

    zamiast $(html,body).animate(…) lepiej $(body).animate(…)

    HTML jest elementem źródłowym dla wszystkich potomków ale to kontener BODY jest przewijany, pod warunkiem, że ma ustawione overflow:hidden (gdy dzieci sa elementami pływającymi).

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *