blog.nayma.pl


Dla miłośników WordPress, WooCommerce, HTML5, CSS3 oraz JS.

Podziel się


Tagi


Wyrównanie wielu DIV w jQuery

Jak wyrównać kilka DIV

Niedawno przedstawiłem Wam ciekawy i prosty skrypt na wyrównanie wysokości 2 div. Jak dobrze wiecie takie rozwiązanie ma dość duże ograniczenie, bo często potrzebujemy wyrównać wysokość kilku div a czasami nawet w rożnych miejscach. Nie zawsze jesteśmy w stanie skorzystać z display: flex; i dlatego przedstawiam Wam inny dużo lepszy skrypt do wyrównania wysokości dowolnej ilości DIV. Jego instalacja jest bardzo prosta a sam kod jest bardzo prosty i lekki.

Dodajemy skrypt do naszej strony

Najpierw dodajemy do naszej strony bibliotekę jQuery:

<script  
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script>  

UWAGA !! Sprawdź czy nie masz juz podpiętej biblioteki jQuery i czy jest to wersja 3.x.x. Ten skrypt nie działa prawidłowo z niższymi wersjami jQuery.

Dodajemy prosty kod JS zawsze po wczytaniu biblioteki jQuery:

(function($) {
    $.fn.equalHeights = function() {
        var maxHeight = 0,
            $this = $(this);
        $this.each( function() {
            var height = $(this).innerHeight();
            if ( height > maxHeight ) { maxHeight = height; }
        });
        return $this.css('height', maxHeight);
    };
    $('[data-equal]').each(function(){
        var $this = $(this),
            target = $this.data('equal');
        $this.find(target).equalHeights();
    });

})(jQuery);

Następnie dodajemy kod:

<script>  
$('.klasa').equalHeights();
</script>  

gdzie .klasa zastępujemy klasą DIV, którego wysokość chcemy wyrównać. Oczywiście możemy to zrobić dla wielu różnych klas jednym skryptem:

<script>  
$('.klasa-1').equalHeights();
$('.klasa-2').equalHeights();
$('.klasa-3').equalHeights();
</script>  

Podsumowanie

To proste rozwiązanie na pewno przyda się nam w miejscach w których implementacja Flex Box byłaby dość trudna lub zepsuła nam układ strony. Ja np. wykorzystałem go niedawno w szablonie WordPress, gdzie właśnie użycie flexa wpływało dość mocno na strukturę szablonu i trzeba było się wspierać innymi rozwiązaniami takimi jak te powyższe. Te rozwiązanie możemy używać zarówno na stronach HTML jak i CMS takich jak Joomla czy WordPress.

Nayma.pl Dariusz Okoń
Dodane przez

Nayma.pl Dariusz Okoń

Komentarze