Höhe von HTML-Elementen automatisch anpassen – mit jQuery und Javascript

Oft kommt es vor, das man zwei oder mehr Elemente, sei es nun ein Layer, Bild oder was auch immer, mit gleicher Höhe darstellen will. Das stellt bei statischen Inhalten überhaupt kein Problem dar, gibt es doch die schöne CSS-Eigenschaft height.

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.

Weiterlesen >>

Nico . 22.09.2010 . 2 Kommentare

jQuery: Select Wert auslesen

Weil ich öfters gefragt werde, hier mal ein kurzes Tutorial, wie ich den Wert des aktuell gewählten Wertes eines Selects mit jQuery auslesen kann. Eigentlich funktioniert das wie mit anderen Input-Feldern auch, nämlich mit der Funktion “val”. Angenommen, wir haben folgende Selectbox:

<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!

Nico . 06.05.2009 . 2 Kommentare

50 nützliche Plugins für jQuery

jQuery ist ein Javascript-Framework, welches einem die Arbeit mit Javascript sehr erleichtert und viele nützliche Tools beinhaltet.  Mit Hilfe von Plugins kann dieses Framework durch noch mehr Funktionen erweitert werden. Eine schöne und gut gemischte Sammlung mit 50 sehr guten jQuery-Plugins gibt es ab heute bei Dr. Web. Viel Spass beim Ausprobieren.

Nico . 15.12.2008 . 0 Kommentare