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 . 4 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 . 3 Kommentare

Internet Explorer Version 5 bis 8 beta mit einem Tool testen

Yeah.. darauf haben wir gewartet. Endlich ein Tool, in dem ich eine Webseite in verschiedenen Versionen des IE rendern kann. Version 5.5 bis 8 beta stehen zur Verfügung. Wenn jetzt noch eine Rendering-Engine des Firefox und Safari vorhanden wäre, wär das Tool perfekt. Hier schonmal der Link, Testbericht folgt noch.

Link zum IETester.

Via codecandies.de.

Nico . 29.01.2009 . 0 Kommentare

Webdesign einer Webseite in mehreren Browsern online testen

Als Webdesigner hat man oft ein Problem, wenn man die gerade neu erstellte Website in mehreren oder am Besten allen gängigen Browsern testen möchte. Entweder steht das entsprechende Betriebsystem nicht zur Verfügung (Windows, Mac, Linux) oder es lassen sich nicht mehrere Versionen des gleichen Browsers gleichzeitig installieren, wie es bei Internet Explorer der Fall ist. Abhilfe schaffen hier drei Tools:

• 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.

Nico . 17.12.2008 . 0 Kommentare