Akkordeon + gleiche Spaltenlänge durch Javascript

[Summi]

Hallo zusammen,

mein, Layout hat 3 Spalten. Damit diese immer so lang wie die längste sind, habe ich mir mit dem folgenden Code beholfen.

<script type="text/javascript">
  <!--//--><![CDATA[//><!--
  function sortNumDesc(a,b) {
    return b - a;
  }
  if(document.getElementById('main').offsetHeight) {
    var div_heights = new Array(
      document.getElementById('left').offsetHeight,
      document.getElementById('right').offsetHeight,
      document.getElementById('main').offsetHeight
    );
    div_heights = div_heights.sort(sortNumDesc);
    var style_height = div_heights[0] + "px";
    document.getElementById('left').style.height = style_height;
    document.getElementById('right').style.height = style_height;
    document.getElementById('main').style.height = style_height;
  }
  //--><!]]>
</script>

Jetzt verwende ich auf einer Seite das Akkordeon. Das Problem:

Das Element element.style bekommt eine Höhe zugewiesen die offensichtlich immer dem doppelten der gesamten Akkordeonhöhe entspricht. (Die Höhe die ich bräuchte wenn alle gleichzeitig geöffnet sind)
Im Ergebnis habe ich also einen riesengroßen Weißraum unter meinem Inhalt.

Kennt jemand das Problem? Gibts eine Lösung?
Mit jedem weiteren Akkordeon (oder Inhalt im Akkordeon)

[joe]

Hast du mal einen Link zur Seite (kannst mir auch gerne per PM senden). Denke das hier eine Event Delegation auf das Accordion helfen könnte. Dazu müsste man aber mehr von deinem vorhaben sehen

Gruß Joe

[Summi]

Vielen Dank für deine Hilfe.

Die Seite läuft lokal. Was müsstets du noch wissen?
Was ist eine Event Delegation?

[joe]

Event Delegation ist hier beschrieben http://mootools.net/docs/core/Elemen...ent.Delegation

Es ist eine Technik um auf Veränderungen von Inhalten (gerade durch Ajax Injects) zu reagieren. Um die Helfen zu können bräuchte ich schon den HTML Source + die Ressourcen(Javascript, Bilder, Css). Eine statische html Datei langt hierfür in der Regel.

Du kannst dir diese mit einem Programm wie Sitesucker für mac oder WebSuction für Windows ziehen. Alternativ kannst du mir auch eine gezippte version deiner Contao Seite senden.

Sonst wird das schwierig mit dem helfen

Gruß Joe

[Andreas]

Wenn du das Contao-CSS-Framework normal aufgesetzt hast, dann ist #main immer am längsten. Dann reicht schon das hier.

<script type="text/javascript">
/* <![CDATA[ */
window.addEvent('domready', function(){

  var bigHeight = $('main').getSize().y;

  $('left').setStyle('min-height', bigHeight);
  $('right').setStyle('min-height', bigHeight);

});
/* ]]> */
</script>

Kann man auch viel einfacher lesen finde ich. Ist auch mit dem neuen CDATA. Wichtig ist evtl. auch, dass du die Spalte erst misst, nachdem der DOM komplett ist (domready). Und vielleicht nach dem Akkordeon starten, wenn es schon geschlossen wurde.

[joe]

@andreas

da fehlt noch ein var vor bigHeight sonst hast du eine "globale" variable die zu Fehlern führen kann und noch viel schlimmer du bekommst sie nicht mehr raus

[Andreas]

Ja ok, danke. War nur auf die Schnelle, normalerweise deklariere ich am Anfang immer alle Variablen in einem Rutsch.

var
  var1,
  var2,
  var3 = false,
  var4
;

[Summi]

Hallo ihr Zwei,

sorry das ich mich erst jetzt wieder melde und vielen Dank schon mal für eure Hilfe. Mir erscheint die Lösung von Andreas als die Einfachere. #-)

Den Ccode pack ich ins Seitenlayout:

<script type="text/javascript">
/* <![CDATA[ */
window.addEvent('domready', function(){

  var bigHeight = $('main').getSize().y;

  $('left').setStyle('min-height', bigHeight);
  $('right').setStyle('min-height', bigHeight);

});
/* ]]> */
</script>

Wohin muss dieser?

var
  var1,
  var2,
  var3 = false,
  var4
;

Das habe ich noch nicht verstanden.
LG

[Andreas]

LOL, das war nur ein Beispiel, wie man Variablen deklariert. Was du gemacht hast ist in Ordnung, wenn es funktioniert. Das bemängelte hatte ich im Code schon korrigiert - die Deklaration der Variablen bigHeight mit var.

[joe]

hehe

Das was Andreas gemeint hat ist das er die Variablen immer am Anfang einer Funktion deklariert um a) Struktur zu bewahren und b) setzt der Javascript Interpreter eh alle Variablen an den Anfang einer Funktion, das ganze nennt sich Hoisting und kann zu unerwünschten Nebeneffekten führen.

var myEl,
anotherEl,
andAgainAnotherOne;

ist übrigens ein sogenanntes Single var pattern. Variablen können durch Komma getrennt aufgelistet werden und man muss nicht immer var vor jede Variable schreiben. Das ganze spart natürlich Code.

Viele grüße
Joe

[Summi]

Ah, Ok. #-)

Mit dem neuen Code siehts schon deutlich besser aus. Jetzt ist der mittlere Teil mit dem Akkordeon immer nur um soviel länger wie das gerade geöffnete hoch ist ...
Also im Schnitt irgendwas zwischen 100px und 250px und nicht pauschal immer 2890px.

Übermorgen gehts aber erstmal in den Urlaub und dann muss ich das Thema evtl. nochmal aufwärmen. ;-)
Euch einen ganz lieben Dank!!!

LG Steffi