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 & CSS Performance Teil II

Vor ca. 2 Monaten gab es auf diesem Blog schon einmal einen Artikel über JavaScript & CSS Performance und die dort vorgestellte Methode habe ich inzwischen noch etwas verfeinert, um noch mehr Performance herauszukitzeln. Wer den Artikel noch nicht gelesen hat, dem empfehle ich das nachzuholen, denn wir bauen auf dem Ergebnis weiter auf.
In Moment funktioniert es ja so, dass unser PHP-Skript die einzelnen JavaScript bzw. CSS-Dateien sammelt und zusammen ausgibt. Noch besser wäre es aber natürlich, wenn das Skript die Dateien nicht bei jedem Aufruf neu sammeln muss und dazu gibt es natürlich nur eine Lösung: Caching.
» Weiterlesen