JavaScript

Kilka przydatnych trików w jQuery

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:

<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);
    }
});

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');
});

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 href="javascript:void(0)" class="email">
     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 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:

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

Oba kody można połączyć:

<a href="https://webroad.pl/"><img class="opacity" style="border: 0;" src="link_do_logo.png" alt="logo"></a>

komentarzy 11

  • Awatar
    engray

    6 lutego 2013 20:25

    Dzięki za to płynne przewijanie!

    Odpowiedz
  • Awatar
    junior ;)

    7 lutego 2013 16:56

    więcej takich ;)

    Odpowiedz
  • Awatar
    donpedro

    7 lutego 2013 19:11

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

    Odpowiedz
  • Awatar
    l

    8 lutego 2013 11:42

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

    Odpowiedz
  • Awatar
    l

    8 lutego 2013 11:43

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

    Odpowiedz
  • Awatar
    l

    8 lutego 2013 11:54

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

    Odpowiedz
  • Awatar
    shpyo

    8 lutego 2013 13:36

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

    Odpowiedz
  • Awatar
    Franky

    13 lutego 2013 11:01

    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.

    Odpowiedz
  • Awatar
    RandomHTMLcoder

    14 lutego 2013 13:41

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

    Odpowiedz
    • Awatar
      long-responde

      2 listopada 2014 22:29

      W Firefoxie $(‚body’).animate(…) nie zadziała.

      Odpowiedz

Zostaw odpowiedź