Was aber, wenn wir dynamische Inhalte darstellen wollen und gar nicht wissen wieviel Inhalt wir pro Element bekommen. Bei Texten, längeren Namen or whatever aus einer Datenbank ist dies oft der Fall. Durch den unterschiedlich langen Inhalt werden die Elemente nun dementsprechend anders hoch dargestellt. Das sieht bei Elementen die wir nebeneinander zeigen möchten meistens ziemlich doof aus.

Hier kann das Javascript-Framework jQuery helfen. jQuery bietet eine Funktion mit dem Namen .height(), die uns die Höhe eines Elements setzen oder auslesen kann. Hier wird nicht einfach die CSS-Eigenschaft height ausgelesen, sondern die fertig gerenderte Höhe des Elements. So braucht man mit jQuery nicht viel Mühe, um alle gewünschten Elemente zu durchlaufen, das höchste zu bestimmen und alle Elemente auf eben diese Höhe anzupassen.

Der HTML-Code

Gehen wir von folgendem HTML-Code aus. CSS habe ich zu besseren Ansicht inline definiert:

<div class="autoheight" style="float: left; width: 200px; background-color: lightgreen;">
Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum testen schreib ich hier irgendwas rein.
</div>
<div class="autoheight" style="float: left; width: 200px; background-color: orange;">
Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum testen schreib ich hier irgendwas rein.
Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum testen schreib ich hier irgendwas rein.
Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum testen schreib ich hier irgendwas rein.
</div>
<div class="autoheight" style="float: left; width: 200px; background-color: mediumblue;">
Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum testen schreib ich hier irgendwas rein.
Hier steht Inhalt, der in der Länge bzw. Höhe variabel sein kann. Zum testen schreib ich hier irgendwas rein.
</div>

Das Javascript mit jQuery

Zuerst müssen wir die Höhe des höchsten Div’s ausfindig machen. Wir gehen am besten alle Elemente durch und bestimmen so das höchste von allen. Dazu müssen wir uns den höchsten Wert einfach nur merken und immer vergleichen:

/* Variable zum Merken der maximalen Höhe */
var max_height = 0;

/* alle Elemente mit der CSS-Klasse "autoheight" durchlaufen */
$('.autoheight').each(function(e) {

  /* Höhe des aktuellen Elements */
  h = $(this).height();

  /* Wenn Höhe erfolgreich bestimmt werden konnte */
  if(typeof(h) != "undefined") {

        /* Wenn aktuelle Höhe gösser unserer maximalen, Höhe merken */
        if(h > max_height) {
                max_height = h;
        }
  }
});

Nun müssen wir alle anderen Elemente höher bekommen. Wenn wir die maximale Höhe bestimmen konnten, wenden wir diese jetzt einfach auf alle Elemente an:

if(max_height > 0) {
 $('.autoheight').height(max_height);
}

Das ganze Javascript sieht dann so aus:

var max_height = 0;
$('.autoheight').each(function(e) {
  h = $(this).height();
  if(typeof(h) != "undefined") {
        if(h > max_height) {
                max_height = h;
        }
  }
});
if(max_height > 0) {
 $('.autoheight').height(max_height);
}

Das fertige Ergebnis als Beispiel

Das oben beschriebene Beispiel sollte dann in etwa so aussehen:

Boxen original

No related posts.

<select name="hersteller" id="hersteller">
<option value="">Hersteller<option>
<option value="1">Audi<option>
<option value="2">Opel<option>
<option value="3">Mercedes<option>
<option value="4">Volkswagen<option>
</select>


Den Wert der aktuell gewählten Option erhalten wir mit:

$('#hersteller').val();


Möchten wir den Text, also Inhalt der aktuell gewählten Option erhalten, geht dies über den zusätzlichen Selektor “:selected” und die Funktion “text”:

$('#hersteller :selected').text();


Auch das Auslesen von mehreren gewählten Select-Optionen/Werten ist mit dem Selektor “:selected” und einer each-Schleife möglich:

$('#hersteller :selected').each(function(i, option){
// hier können wir den Inhalt von "option" verwerten
});


Oder das Setzen einer Select-Option:

$('#hersteller').val("1");


Eigentlich alles ganz easy oder? jQuery macht Spass!

No related posts.

Link zum IETester.

Via codecandies.de.

No related posts.

• IE NetRenderer
  Komplett kostenlos. Ermöglicht Tests (als Screenshot) in IE 5.5, 6, 7 und sogar 8 beta
• Browsershots
  Über 50 verschiedene Browser-Versionen und 4 Betriebsysteme: Windows, Mac, Linux, BSD
• Litmus
  Testet auch E-Mail-Clients. Viele verschiedene Versionen und Betriebsysteme.

Via Kid Tech Gutu.

No related posts.