Witam, dziś chciałbym zaprezentować kilka fajnych 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.
1 .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:
- <section id="content">
- <div id="lewa_kolumna">
- <!– PANELE –>
- </div>
- <div id="prawa_kolumna">
- <!– NEWSY –>
- </div>
- </section>
jQuery:
- $(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);
- }
- });
2. 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:
3. 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:
- <a class="email" href="javascript:void(0)">moj_adres<span>głupi_bot_odczyta_coś_więcej</span>@gmail.com</a>
jQuery:
- $("a.email").click(function() {
- $(this).children("span").remove();
- var GetEmail = $(this).html();
- $(this).attr("href", "mailto:" + GetEmail);
- });
CSS:
Jak działa ten skrypt? Bardzo prosto.
Wizualnie: moj_adres@gmail.com
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 spanem, więc nie wyśle maila do nas.
4. Płynne rozjaśnianie w jQuery
Bardzo fajny, ładny i prosty efekt rozjaśniania obrazka bądź też linku.
jQuery:
- $(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:
HTML dla linku:
Oba kody można połączyć: