0

Kilka trików w jQuery.

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:

  1. <section id="content">
  2.     <div id="lewa_kolumna">
  3.         <!– PANELE –>
  4.     </div>
  5.     <div id="prawa_kolumna">
  6.         <!– NEWSY –>
  7.     </div>
  8. </section>

jQuery:

  1. $(function() {
  2.     var div1 = $(‚#lewa_kolumna').height();
  3.     var div2 = $(‚#prawa_kolumna').height();
  4.     if (div1 < div2) {
  5.         $(‚#lewa_kolumna').height(div2);
  6.     } else if (div2 < div1) {
  7.         $(‚#prawa_kolumna').height(div1);
  8.     }
  9. });

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:

  1. $(‚span.Back').click(function() {
  2.     $(‚html, body').animate({scrollTop:0}, ‚slow');
  3. });

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:

  1. <a class="email" href="javascript:void(0)">moj_adres<span>głupi_bot_odczyta_coś_więcej</span>@gmail.com</a>

jQuery:

  1. $("a.email").click(function() {
  2.     $(this).children("span").remove();
  3.     var GetEmail = $(this).html();
  4.     $(this).attr("href", "mailto:" + GetEmail);
  5. });

CSS:

  1. .email span {display:none;}

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:

  1. $(document).ready(function() {
  2.   $(‚.opacity').fadeTo(‚normal', .5).hover(
  3.     function() {
  4.       $(this).stop().fadeTo(‚normal', 1);
  5.     },
  6.     function() {
  7.       $(this).stop().fadeTo(‚normal', .5);
  8.     }
  9.   );
  10. });

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="http://piotrex41.pl/">link który się rozjaśni po najechaniu</a>

Oba kody można połączyć:

  1. <a href="http://piotrex41.pl/"><img class="opacity" src="link_do_logo.png" alt="logo" /></a>

4

Write a Comment