Gleichlange Spalten mit jQuery

[gorti]

Hi

Ich versuch ein kleines jQuery-Script um Spaltenlängen auszugleichen, einzusetzen. (Das CSS-Layout der Spalten lässt ein herkömmliches Faux Columns nicht zu.)
Für das 3-spaltige Layout bekommen im fe_page.html5 die #left, #right und #main die zusätzliche Klasse "column".
Die Spalten sollen sich an der längsten Spalten orientieren und erhalten dann dessen Höhe.

Das Script das ich benutze lautet:

<script type="text/javascript">
jQuery(document).ready(function() {
	var colheight = 0;
	$(".column").each(function(){
		if($(this).height()>colheight)
		colheight = $(this).height();})
.css({height:colheight});
});
</script>

Der Script funktioniert grundsätzlich in einer statischen Html-Seite.
Den Script habe ich auf verschiedene Weise versucht einzubinden. Einerseits direkt im Seitenlayout (eigener Javascript-Code) andererseits als js-Datei im Header.
jQuery-Extension ist installiert und getestet. Funktioniert mit anderen Scripts. (Mootools aktiv und no-conflict). Ich hab's auch mit diversen jQuery-Versionen getestet.
Hab's auch als XHTML versucht.

Hat jemand eine Idee?
Danke für ein Feedback

[Andreas]

Habe keine jQuery Installation zum Testen, aber mit Mootools kannst du es ja auch machen.

Wenn du das CSS-Framework nicht verändert hast, dann ist #main immer die längste Spalte. Also:

window.addEvent('domready', function(){

  $('left').setStyle('height', $('main').getSize().y);

});

Für #right dann dementsprechend.

[gorti]

Danke für Deine Lösung Andreas.
Wie kann ich anstelle der äusseren Div die .inside benutzen? ('main.inside') oder so?

[schman]

vermutlich so:

window.addEvent('domready', function(){

  $('left').setStyle('height', $('main .inside').getSize().x);

});

[Andreas]

Nein, mit $('ID') kannst du nur Elemente über ihre ID ansprechen. Mit $$('#main .inside') kannst du Elemente über ihren CSS-Selektor ansprechen. http://mootools.net/docs/core/Elemen...#Window:dollar
Da der Rückgabewert dann 'An array-like Elements collection of all the DOM elements matched' ist, musst du die Größe wahrscheinlich über das erste Element abgreifen ...[0] - ungetestet.

window.addEvent('domready', function(){

  var

    height = $$('#main .inside')[0].getSize().y,

    left = $('left')
  ;

  left.setStyle('height', height);

});

Mit getStyles() bekommst du auch Padding, Margin und Border raus, falls du diese Werte benötigen solltest. http://mootools.net/docs/core/Elemen...ment:getStyles

[Kahmoon]

window.addEvent('domready', function(){

  $('left').setStyle('height', $('main').getSize().x);

});

Habs grad mal getestet. Es muss heissen $('main').getSize().y. x ist die Breite.

Dieses Script löst bei mir viele "graue Haare Probleme" und CSS Gefrickel...danke!

[Andreas]

Ja klar *kopfklatsch* X ist doch immer die Breite oder Horizontal, genau wie der erste Wert immer horizontal oder die Breite ist. Danke. Werde ich oben ändern.