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

Kapcsolódó bejegyzések:

A cikket beküldte: Harder (http://blog.harder.hu)

2 hozzászólás

  1. franszo says:

    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. torpejeti (http://www.jetiahegyen.hu) says:

    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!

Szólj hozzá
a Azonos oszlopmagasság jQuery segítségével c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>