Azonos oszlopmagasság jQuery segítségével

Bizonyára mindenkivel előfordult már, hogy egy olyan layout-ot kellett összeraknia, ami több oszlopból áll, de nem mindig az lap alsó részéig ér le a tartalom,
azaz nem 100%-os magasságú a tartalom, de a design nem engedi, hogy CSS segítségével állítsunk oszlop magasságokat.

A lent látható egyszerű snippet ebben lesz segítségünkre.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function()
{
	var target = $('#celElem');
	var source = $('#forrasElem');
 
	var targetHeight = target.innerHeight();
	var sourceHeight = source.innerHeight();
	if( sourceHeight>targetHeight ) return;
 
	var sourceRealHeight = source.height();
 
	var padding = sourceHeight-sourceRealHeight;
	var borderRadius = 7;
 
	source.height(targetHeight-padding-borderRadius);
});

A script maga két oszlopos szerkezetekhez készült. Ahhoz, hogy működésre bírjuk a programocskát, meg kell adni a source azaz forrás div azonosítóját, illetve a target azaz cél div azonosítóját. Ezek után már a script magától igazítja mindig a target oszlop magasságát a source oszlop magasságához.

Fontos még, hogy az utolsó előtti sorban lévő borderRadius értéket se hagyjuk figyelmen kívül, ugyanis ha van egy doboznak border-radius értéke, akkor annak annyival lesznek a méretei nagyobbak, amekkora a radius értéke, ezért itt megadható -numerikusan-, hogy mekkora border radius van a dobozon, és ha ezt kitöltjük, abban az esetben fog pontosan illeszkedni a két doboz egymáshoz. Értelemszerűen, ha nem használunk lekerekített sarkokat, akkor 0 lesz az értéke a borderRadius változónak.

Szerző: Bajzáth Árpád (Bajzáth Árpád (Facebook))

Hugyecz Görgy (Harder)
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.

2 HOZZÁSZÓLÁS

  1. tobb oszlop eseten automatikus meretezesre ajanlanam :

    /* document ready*/
    $(function() {
    /* adott oszlopok kozul a legmagasabb kivalasztasa, es tarloasa*/
    var highestCol = Math.max($(‘.column-1’).height(),$(‘.column-2’).height(), $(‘.column-3’).height());
    /* a tarolt magassag osszes oszlopra alkalmazasa */
    $(‘.column-1, .column-2, .column-3’).height(highestCol);
    } );

  2. Az oldalamon alkalmaztam a franszo által ajánlott scriptet. Működik is csaknem hibátlanul. A problémám vele az, hogy néha kell nyomni egy frissítést a böngészőben, hogy beleférjen a script által méretezett oszlopokba a szöveg.
    Nem értek a jQuery-hez így csak tippelni tudok a hiba okára. Talán az a baja, hogy elmenti az értékeket, és ha betöltök egy másik oldalt, aminek azonos a felépítése, de eltérő a bal és jobb oszlopban lévő szöveg hossza, akkor az előző oldalról veszi a frissítésig az oszlopmagassághoz az értékeket. Kérdésem, hogy hogyan tudnám kiküszöbölni a hibát?
    Arra gondoltam, hogy talán kéne a script elejére egy sor, ami nullázza az értékeket, de fogalmam sincs, hogy az hogyan is kellene, hogy kinézzen.
    Előre is köszi a segítséget!

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét