jQuery Tabelle mit odd & even (JavaScript)

Und wieder einmal geht es um ein Problem, auf das so ziemlich jeder Webentwickler schon einmal gestoßen ist. Man möchte eine Tabelle mit alternierenden Zeilenfarben erstellen und muss jedesmal überlegen, wie man das in PHP und dem Modulo-Operator umsetzt. Doch jetzt gibt es endlich Abhilfe: Ein jQuery-Selector für odd und even nimmt uns bequem die Arbeit ab.

Und so geht’s:

View Code XML
<style type="text/css">
tr.odd { background-color: #f00; }
tr.even { background-color: #0f0; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$('tbody tr:odd').addClass('odd');
	$('tbody tr:even').addClass('even');
});
</script>
 
<table>
	<thead>
		<tr>
			<th>Überschrift 1</th>
			<th>Überschrift 2</th>
		</tr>
	<thead>
	<tbody>
		<tr>
			<td>Lorem</td>
			<td>Ipsum</td>
		</tr>
		<tr>
			<td>Dolor</td>
			<td>Sit</td>
		</tr>
		<tr>
			<td>Amet</td>
			<td>Consectetuer</td>
		</tr>
	</tbody>
</table>

Unser kleines JavaScript schnappt sich selbständig die Tabellenzeilen und fügt automatisch die CSS-Klassen odd und even ein. Ganz nach dem Motto „Write Less, Do More“ wie es jQuery immer verspricht.

<div> mittig zentrieren

So ziemlich jeder HTML-Entwickler stand schon einmal vor demselben Problem: Wie zentriert man ein <div> oder anderes Block-Element genau mittig auf der Seite?

Erstellen wir uns erst einmal ein HTML Grundgerüst:

View Code XML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Zentriertes Div</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	</head>
	<body>
		<div class="centered">
			<p>Text, der genau in der Mitte der Seite platziert ist.</p>
		</div>
	</body>
</html>

Jetzt brauchen wir noch ein wenig CSS und schon sind wir fertig:

View Code CSS
.centered {
	position: absolute;
	width: 512px;
	height: 100px;
	top: 50%;
	left: 50%;
	margin-left: -256px;
	margin-top: -50px;
	border: 1px solid #000000;
	background-color: #eeeeee;
}
.centered p {
	text-align: center;
}

Zentriertes Div
Der interessante Teil ist das „margin-left: -256px;“ bzw. das „margin-top: -50px;„, denn ohne die negativen Margin-Werte, würde das Zentrieren nicht funktionieren.
Achtung: Wenn sich die Breite oder die Höhe des Div-Containers ändert, müssen die Margin-Werte ebenfalls angepasst werden. Die Margin-Werte ergeben sich immer aus Breite/2 bzw. Höhe/2. Würden wir die Breite z.B. auf 200px reduzieren, muss das margin-left mit -100px angegeben werden.

JavaScript Benchmark: Browservergleich

Seit nun knapp zwei Wochen ist der neue Firefox 3.6 erschienen. Zeit, um mal einen Vergleich zur Vorgängerversion zu starten. Ich will jetzt nicht die einzelnen Features aufzählen, sondern einen genauen Blick auf die JavaScript-Engine werfen.

Zum Testen nehmen wir die zwei Benchmark-Tests V8 Benchmark Suite und Acid3. Wegen der ungleichen Punkteverteilung berechnen wir die Gesamtpunktzahl, indem wir vom V8-Test den prozentualen Wert Acid3-Test abziehen.

Und weil es langweilig wäre nur die zwei Firefox zu vergleichen, nehmen wir die aktuell bekanntesten ebenfalls dazu. Das sind unsere Kandidaten:

  • Firefox 3.5
  • Firefox 3.6
  • Internet Explorer 8 ( IE 8 )
  • Google Chrome 3
  • Google Chrome 4
  • Opera 10.10
  • Opera 10.50
  • Firefox 3.5 (Mac)
  • Firefox 3.6 (Mac)
  • Safari (Mac)
Browser V8 Acid3 Gesamt
Firefox 3.5 455 93 423
Firefox 3.6 578 92 532
IE 8 98 20 20
Google Chrome 3 4500 100 4500
Google Chrome 4 4550 100 4550
Opera 10.10 287 100 287
Opera 10.50 3772 100 3772
Firefox 3.5 (Mac) 378 93 352
Firefox 3.6 (Mac) 485 92 446
Safari 4 (Mac) 2430 100 2430
Safari 5 (Mac) 3009 100 3009

Ich denke das Ergebnis ist relativ eindeutig. Der Firefox hat sich nach dem Versionssprung nur im geringen Maße verbessert und bleibt im Ranking auf Platz 3 hinter dem Safari und Chrome. Weit abgeschlagen auf dem letzten Platz der IE 8…

Als Zusatzinfo sollte ich noch sagen, dass mein Firefox mit diversen Addons bestückt ist (u.a. dem Firebug), aber ich denke nicht, dass dem Firefox dadurch große Punktzahlen verloren gehen. Die meisten Addons gehören ja inzwischen zum Standard.

* UPDATE 25.02.2010: Google Chrome 4 hinzugefügt.
* UPDATE 07.03.2010: Opera 10.50 hinzugefügt.
* UPDATE 19.06.2010: Safari 5 hinzugefügt