Javascript

Artikel mit dem Tag

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

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

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!

301 Weiterleitung einer Website per mod-rewrite

Wenn sich die Domain oder Url einer Website geändert hat, empfiehlt sich eine Weiterleitung auf die neue Adresse mit dem HTTP-Statuscode 301 (Moved Permanently). Der Code 301 deshalb, damit auch Suchmaschinen wie Google wissen, das sich die Adresse für immer geändert hat und nur die neue Url verwendet werden soll. Google berücksichtigt hier auch den Pagerank und ordnet diesen der neuen URL zu.

Die Technik

Technisch gesehen werden vom Webserver im HTTP 2 Zeilen an den Client (Nutzer mit Browser, Suchmaschine) gesendet. Eine mit dem Statscode und eine mit dem Ziel der Weiterleitung:

HTTP/1.1 301 Moved Permanently Location: http://www.neue-url.de/pfad/zur/datei.htm

Eine HTTP-Sitzung per Telnet auf Port 80 sieht dann zum Beispiel so aus:

# telnet alte-domain.de 80 Trying 12.34.56.78... Connected to alte-domain.de. Escape character is '^]'. GET / HTTP/1.1 Host: alte-domain.de HTTP/1.1 301 Moved Permanently Date: Thu, 25 Feb 2009 20:06:55 GMT Server: Apache/2.2.11 Location: http://neue-domain.de/ Content-Length: 225 Connection: close Content-Type: text/html; charset=iso-8859-1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html><head> <title>301 Moved Permanently</title> </head><body> <h1>Moved Permanently</h1> <p>The document has moved <a href="http://neue-domain.de/">here</a>.</p> </body></html> Connection closed by foreign host.

mod_rewrite – die Lösung

Um dies mit Hilfe des Webservers Apache zu lösen, hilft uns das Modul Rewrite, kurz mod_rewrite. Hat man Zugriff auf die Konfigurationsdatei des Webservers, kann man die Rewrite-Weiterleitung im VirtualHost, in der Directory- oder Location-Direktive vornehmen. Anonsten erstellt man eine .htaccess-Datei und nimmt die Konfiguration hier vor.
Um mod_rewrite zu aktivieren, benötigen wir folgende zwei Zeilen:

RewriteEngine on RewriteBase /
Weiterlesen >>

Selectbox mit Prototype per Ajax befüllen

prototype Selectbox mit Prototype per Ajax befüllen Ich habe gestern mit einem Kollegen versucht, eine Selectbox mit dem Javascript-Framework Prototype per Ajax zu füllen. Mit jQuery – was wir in letzter Zeit mehr einsetzen – keine grössere Sache. Mit Prototype aber mussten wir etwas grübeln. Da ich in Google nicht wirklich fündig geworden bin, gibt es hier nun ein Beispiel. (Und ich kann gleich das Syntax-Highlighting in WordPress testen :-)

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.