Gleichlange Spalten mit jQuery

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:

Code:

---

<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

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:

HTML-Code:

---

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

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

});

---

Für #right dann dementsprechend.

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

vermutlich so:

HTML-Code:

---

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

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

});

---

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.

HTML-Code:

---

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

Zitat:

---

Zitat von Andreas

HTML-Code:

---

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!

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.