✔ Wieso geht ForEach-Schleife nicht? Brauche auch sonst Hilfe mit Scripten...

I

Ironmouse

Grünschnabel
Hallo zusammen.

Ich habe ein Script geschrieben, das drei Div-Elementen, nach dem Laden der Seite, die gleiche Höhe verpassen soll.

Es sind dabei zwei Fragen aufgetaucht:


1) Wenn ich die ForEach-Schleife von JavaScript verwende, erscheint in der Fehlerkonsole des Firefox:
element.style has no properties

Mit einer normalen Schleife ist das File valide. Ist die ForEach-Schleife (Syntax: for(... in ...) ) denn nicht erlaubt?


2) Leider macht das Script die Div Elemente nicht länger.

Kann jemand meinen Code auf Fehler (jeder Art) überprüfen? (Ist nur ganz wenig Code) ...


Code: 
<script type="text/javascript">
  
  // Div-Elemente, die gleich hoch werden sollen, in einem Array verpackt 
  var elements = new Array(document.getElementById('leftContent'), document.getElementById('rightContent'), document.getElementById('centerContent'));

  var tallestHeight = 0;
  
  for(var element in elements) {  
    if (element == null) continue; // Prüft ob das HMTL-Element existiert

    if (element.offsetHeight > tallestHeight) {
      tallestHeight = element.offsetHeight;
    }
  }
  for(var element in elements) {
    element.style.height = tallestHeight+"px";
  }
</script>

Vielen vielen Dank.
 
Hi,

was in der for .. in-Schleife in elements übergeben wird, ist der Index. Zugriff auf den Inhalt des Arrays erhälst du, indem du den Index in eckigen Klammern angibst.
Code: 
  // Div-Elemente, die gleich hoch werden sollen, in einem Array verpackt
  var elements = new Array(document.getElementById('leftContent'), document.getElementById('rightContent'), document.getElementById('centerContent'));

  var tallestHeight = 0;

  for(var element in elements) {
    if (elements[element] == null) continue; // Prüft ob das HMTL-Element existiert

    if (elements[element].offsetHeight > tallestHeight) {
      tallestHeight = elements[element].offsetHeight;
    }
  }
  for(var element in elements) {
    elements[element].style.height = tallestHeight+"px";
  }
Ciao
Quaese
 
Hallo Quaese

was in der for .. in-Schleife in elements übergeben wird, ist der Index. Zugriff auf den Inhalt des Arrays erhälst du, indem du den Index in eckigen Klammern angibst.
Zum Vergrößern anklicken....

Ist das so? In Java bekommt man eben das Objekt zurück.
Macht irgendwie auch mehr Sinn - mit dieser Schreibweise kann ich gerade so gut die normale Schleife brauchen.


Übrigens wird auch mit dieser Schreibweise das Script nicht valide. Der Fehler heisst nun:
elements[element] has no properties


Soweit ich gelesen habe, ist die ForEach-Schleife ab JavaScript Version 1.7 dabei. Diese Version ist im Firefox 2.0 seit 12. Juli 2006 implementiert. Sollte also keine Fehlermeldungen geben deisbezüglich. :confused:


Das Script geht auch noch nicht... falls jemand noch einen Tipp hat, wäre das super.
Es wäre eben dazu gedacht ein dreispaltiges Design ohne Bilder, nur mit CSS zu stylen. Damit dann alle Boxen gleich lang sind, unabhängig vom Inhalt, braucht es leider ein Script.


Grüsse
 
Hi,

wann versuchst du auf die Boxen zuzugreifen? Diese sind erst nach dem Laden des Dokuments verfügbar.

Wenn ich die notwendige Funktion im onload-Event aufrufe, werden die Boxen angeglichen.
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<script type="text/javascript">
function sameHeight(){
  // Div-Elemente, die gleich hoch werden sollen, in einem Array verpackt
  var elements = new Array(document.getElementById('leftContent'), document.getElementById('rightContent'), document.getElementById('centerContent'));

  var tallestHeight = 0;

  for(var element in elements) {
    if (elements[element] == null) continue; // Prüft ob das HMTL-Element existiert

    if (elements[element].offsetHeight > tallestHeight) {
      tallestHeight = elements[element].offsetHeight;
    }
  }
  for(var element in elements) {
    elements[element].style.height = tallestHeight+"px";
  }
}

window.onload = function(){
  sameHeight();
}
</script>
</head>
<body>
<div id="leftContent" style="float: left; background: #f00;">
	Zeile<br>
	Zeile<br>
	Zeile<br>
	Zeile<br>
</div>
<div id="centerContent" style="float: left; background: #0f0;">
	Zeile<br>
	Zeile<br>
	Zeile<br>
	Zeile<br>
	Zeile<br>
	Zeile<br>
</div>
<div id="rightContent" style="float: left; background: #00f;">
	Zeile<br>
	Zeile<br>
	Zeile<br>
	Zeile<br>
</div>
</body>
</html>
Die for .. in-Schleife war bereits seit JS 1.0 implementiert (netscape devedge).

Eventuell kannst du auf JS verzichten, um den Eindruck zu erwecken, alle Boxen seien gleich hoch - Faux Columns.

Ciao
Quaese
 
Hallo Quaese

Bei mir hats jetzt doch noch geklappt! Es lag glaub an einem anderem Java-Script das noch geladen wurde. Das muss mein Script irgendwie blockiert haben.

Aber mit einem EventHandler, der die Funktion aufruft, funktioniert das Script - und das auch auf IE6. *happy*

Code: 
  /**
   * Cross-Browser Ereignis-Registrierung
   *
   * @param eventType
   * @param eventListener   Funktion die ausgeführt werden soll
   * @param useCaption
   */
  function addEvent(eventType, eventListener, useCaption) {
    if (window.addEventListener) {
      window.addEventListener(eventType, eventListener, useCaption);
      return true;
    }

    if (window.attachEvent) {
      var result = window.attachEvent("on"+eventType, eventListener);
      return result;
    }
    return false;
  }
 
  addEvent("load", fitHeight, false);
Der Code wurde inspieriert von diesm Artikel: Javascript: Der Event Listener des DOM.
Leider ist das eine Codebeispiel voller Typos und sehr unübersichtlich, dass es verbessert werden musste um überhaupt zu funktionieren.


Die Technik mit den Faux Columns arbeitet eben auch mit Bildern. Das ist für meine Bedürfnisse zu wenig flexibel beim Umstellen von Farben und Border und Anzahl angezeigter Spalten. Aber mit diesem Script ist jetzt alles paletti.

Danke für deine Hilfe Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück