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