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.

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

E-Mail-Verschlüsselung mit JavaScript und CSS

Wer seine E-Mail Adresse über eine Webseite veröffentlichen will, sollte sich entweder auf viel Spam vorbereiten oder eine gute Verschlüsselungstechnik verwenden. Da wir Spambots keine Chance geben wollen, müssen wir uns daher mit der zweiten Variante beschäftigen. Ich habe mal zwei nette Möglichkeiten herausgesucht.

E-Mail-Verschlüsselung mit CSS

Finde diese Technik ziemlich cool, hat aber den Nachteil, dass die Adresse nicht als Link ausgegeben werden kann. Und so geht’s:

View Code HTML
<span style="unicode-bidi:bidi-override; direction: rtl;">moc.liamg@noipmahcterces</span>

Inprinzip ist es ganz einfach: Die Adresse wird rückwärts aufgeschrieben und per CSS wieder richtig rumgedreht. Das Ergebnis: moc.liamg@noipmahcterces. Leider wird die Adresse bei Copy&Paste rückwärts kopiert…

E-Mail-Verschlüsselung mit JavaScript

Die Benutzerfreundlichere Methode ist die E-Mail-Adresse mit JavaScript zu verschlüsseln. Es gibt unzählige Code-Snippets, die diese Aufgabe alle unterschiedlich lösen, daher gibt es hier nur ein kleines Beispiel (von mir):

View Code HTML
<sccript type="text/javascript">
function mencode(i,n,h,d){var a=n;a+='&#64;';a+=h;a+='&#46;';a+=d;var o=document.getElementById(i);o.innerHTML=a;var l=document.createAttribute('href');l.nodeValue='mailto:'+o.innerHTML;o.setAttributeNode(l);}
</script>
<a id="meine-adresse">Irgendein Platzhalter</a>
<sccript type="text/javascript">mencode('meine-adresse', 'secretchampion', 'gmail', 'com');</script>

Hier wird der Link allerdings anklickbar und kann auch wieder ganz normal kopiert werden.