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.

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 /

Die erste Zeile aktiviert das Modul und die zweite setzt den Basis-Pfad, für den die folgende Rewrite-Konfiguration dienen soll. Möchten wir beispielsweise nur für das Verzeichnis /homepage/blog/ eine Weiterleitung erstellen, benötigen wir folgende Einstellung:

RewriteEngine on
RewriteBase /homepage/blog/


Als nächstes definieren wir unsere Regel für die Weiterleitung. Diese beinhaltet das Suchmuster und den Ersatz, d.h. die Original-Url und die neue Adresse der URL-Weiterleitung. Das tolle ist, das hier Reguläre Ausdrücke verwendet werden können. Die Syntax ist wie folgt:

RewriteRule <suchmuster> <ersatz>


Eine Domain-Weiterleitung mit mod_rewrite würde zum Beispiel so aussehen:

RewriteRule ^(.*)$ http://www.neuedomain.de/$1 [R=301,L]


Eine Weiterleitung eines Verzeichnisses so:

RewriteRule ^homepage/blog(.*)$ http://www.neuedomain.de/homepage/blog$1 [R=301,L]


Das mit dem Modul Rewrite noch mehr Möglichkeiten z.B. dynamischer Weiterleitungen bestehen, verdeutlicht folgendes Beispiel:

RewriteRule ^([a-z\-]+)/([a-z\-]+)/(.*)$ http://www.neuedomain.de/$3?site=$1&sub=$2 [R=301,L]


Jede Regel ist aber vorher gut zu durchdenken, da bei Fehlkonfiguration die Performance des Apache in Mitleidenschaft gezogen oder sogar zum Absturz, z.B. durch Endlosschleifen, gebracht werden kann. Mehr Informationen und viele Möglichkeiten mehr gibt es in der mod_rewrite Apache-Doku.

Andere Möglichkeiten einer Weiterleitung

Ist mod_rewrite nicht installiert, oder keine Berechtigung zur Benutzung gegeben, müssen andere Lösungen her.

Weiterleitung mit PHP

Mit PHP könnte man oben beschriebene Weiterleitungen mit Hilfe der header-Funktion lösen.

<?php
header('HTTP/1.1 301 Moved Permanently', true);
header('Location: http://www.neue-url.de/pfad/zur/datei.htm', true);
?>

Weiterleitung mit Perl / CGI

Auch mit Perl könnte man die Weiterleitung mit Hilfe eines Headers direkt per print lösen:

#!/usr/bin/perl

print "HTTP/1.1 301 Moved Permanently\n";
print "Location: http://www.neue-url.de/pfad/zur/datei.htm\n";

Weiterleitung mit Ruby

In Ruby kann man dies zum Beispiel so realisieren:

#!/usr/bin/env ruby

require 'cgi'
cgi.header({'HTTP/1.1 301 Moved Permanently','Location'=>'http://www.neue-url.de/pfad/zur/datei.htm'})

Clientseitig ohne 301-Status: Javascript

Eine clientseitige Weiterleitung könnte mit Javascript realisiert werden. Nachteil ist hier, das bei deaktiviertem Javascript die Weiterleitung nicht funktioniert.

<script type="text/javascript">
<!--
window.location.replace("http://www.neue-url.de/pfad/zur/datei.htm");
// -->
</script>

Clientseitig ohne 301-Status: Weiterleitung per Meta-Tag

Hierfür wird im Head Bereich des HTML-Codes ein Meta-Tag eingefügt, der durch Semikolon getrennt die Zeit angibt, die der Browser bis zur Weiterleitung warten soll und die URL des Ziels der Weiterleitung. Auch diese methode empfehle ich nicht, da dies wie auch Javascript Interpretationssache des Browsers ist, diesen tag zu beachten (Wobei alle Standard-Browser dies tun).

<head>
<meta http-equiv="refresh" content="3; url=http://www.neue-url.de/pfad/zur/datei.htm">
<!-- andere Tags im Header -->
</head>

Meine Empfehlung: Immer mod-rewrite nutzen, da serverseitig, gut konfigurierbar und vielseitig einsetzbar. Sollte dies nicht vorhanden oder möglich sein, können die anderen genannten Möglichkeiten einer Weiterleitung (PHP oder andere serverseitige Script- bzw. Programmiersprache, Javascript, Meta-Tag – in der Reihenfolge) weiterhelfen.

Happy Redirecting!

No related posts.

Es soll anhand des Wertes einer Select-Box Daten per Ajax von einem PHP-Script geladen und in eine zweite Select-Box als Optionen hinzugefügt werden.

Zuerst benötigen wir zwei Select-Boxen:

Kategorie

Bitte wählen
Bücher
Elektronik
Spielwaren


Artikel

Das Javascript (Prototype muss eingebunden sein):

Und hier noch das PHP-Script als Beispiel:

/**
 * Artikel-Array, wuerde im echten Leben aus
 * einer Datenbank kommen.
 */
$artikel_data = array
(
  1 => array
      (
        array("id" => 1, "name" => "Artikel Nummer 1"),
        array("id" => 2, "name" => "Artikel Nummer 2"),
        array("id" => 3, "name" => "Artikel Nummer 3"),
      ),
  2 => array
      (
        array("id" => 4, "name" => "Artikel Nummer 4"),
        array("id" => 5, "name" => "Artikel Nummer 5"),
        array("id" => 6, "name" => "Artikel Nummer 6"),
      ),
  3 => array
      (
        array("id" => 7, "name" => "Artikel Nummer 7"),
        array("id" => 8, "name" => "Artikel Nummer 8"),
        array("id" => 9, "name" => "Artikel Nummer 9"),
      ),
);

/**
 * Als Json ausgeben
 */
if($_GET['kategorie'])
{
  echo json_encode($artikel_data[$_GET['kategorie']]);
}

Hier das gesamte Beispiel. Viel Spass! Wenn jemand eine schnellere Lösung hat, nur her damit.

No related posts.

No related posts.