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:

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

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:

.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:

$(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:

<img class="opacity" style="border: 0;" src="link_do_logo.png" alt="logo" />

HTML dla linku:

<a class="opacity" href="http://piotrex41.pl/">link który się rozjaśni po najechaniu</a>

Oba kody można połączyć:

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