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:
1 2 3 4 5 6 7 8 | <section id=”content”> <div id=”lewa_kolumna”> <!-- PANELE --> </div> <div id=”prawa_kolumna”> <!-- NEWSY --> </div> </section> |
jQuery:
1 2 3 4 5 6 7 8 9 10 11 12 | $(function(){ var div1 = $('#lewa_kolumna').height(); var div2 = $('#prawa_kolumna').height(); if (div1 < div2) { $('#lewa_kolumna').height(div2); } else if (div2 < div1) { $('#prawa_kolumna').height(div1); } }); |
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:
1 2 3 4 | $('span.Back').click(function() { $('html, body').animate({scrollTop:0}, 'slow'); }); |
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:
1 2 3 | <a href="javascript:void(0)" class="email"> moj_adres<span>głupi_bot_odczyta_coś_więcej</span>@gmail.com </a> |
jQuery:
1 2 3 4 5 | $("a.email").click(function(){ $(this).children("span").remove(); var GetEmail = $(this).html(); $(this).attr("href", "mailto:" +GetEmail); }); |
CSS:
1 | .email span {display: none;} |
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:
1 2 3 4 5 6 7 8 9 10 | $(document).ready(function() { $('.opacity').fadeTo('normal', .5).hover( function() { $(this).stop().fadeTo('normal', 1); }, function() { $(this).stop().fadeTo('normal', .5); } ); }); |
A teraz tylko trzeba wywołać tę funkcję w kodzie HTML, poprzez dopisanie klasy opacity.
HTML dla obrazka:
1 | <img class="opacity" style="border: 0;" src="link_do_logo.png" alt="logo"> |
HTML dla linku:
1 | <a class="opacity" href="https://webroad.pl/">link który się rozjaśni po najechaniu</a> |
Oba kody można połączyć:
1 | <a href="https://webroad.pl/"><img class="opacity" style="border: 0;" src="link_do_logo.png" alt="logo"></a> |
Dzięki za to płynne przewijanie!
więcej takich ;)
to wyrównywanie wysokości kolumn za pomocą JS, po co? CSS wystarczy i nie obciąża przeglądarki.
$('html, body') <- ??
Heh, W kodzie zamiast np. apostrofów sa kody apos.
Edytor mi zamienił podczas publikacji. Poprawię.
Co do bezpieczenstwa adresow email to mozna zastosowac css: unicode-bidi:bidi-override; direction: rtl;
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ć.
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.
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).
W Firefoxie $(’body’).animate(…) nie zadziała.