Scripte
Einfacher als man denkt.
Unten stehend sind ein paar Scripte die nicht notwendig aber immer wieder nützlich sind.
- Scrolling Anchor
Weicher Einsprung auf Textmarken. - Sorttables
Ohne erneutes laden Inhalte einer Tabelle sortieren. - Tooltipp Mouseover
Infobox als Alternative zum "title" und "alt" Attribute
Scrolling Anchor
Eine schöne Funktion mit der man Sprungmarken mit einem langsamen dahingleiten ansteuern kann. Zur Integration auf der eigenen Seite einfach folgende 3 Schritte durchführen:
- 1. Download des Scriptes (Download) und entpacken im Webverzeichnis.
- 2. Gewünschte HTML Datei öffnen die diesen Effekt haben soll und im Headbereich
<script src="anchor.js" type="text/javascript"></script> einfügen. - 3. Im <body> Tag 'onLoad="replaceAnchorLinks();"' einfügen.
Nun einfach ausprobieren. Sollte es nicht auf anhieb funktionieren auch einfach mal versuchen den Browsercache zu leeren.
Sortable
Mit dem Sorttables Script ist es möglich im Browserfenster ohne eine erneute Anfrage an den Server zu stellen Inhalte zu sortieren. Auch hierfür sind nur wenige Handgriffe notwendig (Download).
| Spalte1 | Spalte2 | Spalte3 | Spalte4 | Spalte5 |
|---|---|---|---|---|
| 1 | a | 2 | b | 3 |
| 2 | b | 3 | c | 4 |
| 5 | z | 66 | cb | 47 |
| 2 | b | 3b | cd | 94 |
Zur Integration bedarf es lediglich 2 grundlegender Schritte:
Das Script einbetten.
Hierzu einfach folgende Codezeile einfügen:
<script type="text/javascript" src="sortable.js"></script>
Die Tabelle
sortierfertig machen.
Dazu einfach der Tablle den Klassenname sortable geben und eine eindeutige ID zuweisen wie in diesem Beispiel:
<table class="sortable" id="results_table">
Wenn alles soweit richtig durchgeführt wurde sollte nun die Tabelle sortierbar sein.
Tooltipp Mouseover
Hier greife ich auf ein Script zurück das ich bei webmatze.de gefunden habe. Für eine genaue Anleitung kann dort nachgeschaut werden. Hier die "schnelle" Variante:
Bettet das Script wmtt.js in eure Webseite ein (download).
<script type="text/javascript" src="wmtt.js"></script>
Danach ergänzt euren HTML Code, spezial das Linktag um folgendes:
<a href="#" onMouseOver="showWMTT('1')" onMouseOut= "hideWMTT()"> Link </a>
Zu guter letzt muss der Quelltext noch um den Tooltipp selber ergänzt werden.
<style type="text/css"> .tooltip { position: absolute; display: none; background-color: #FFFFFF; } </style>
<div class="tooltip" id="1"> Der Tooltip </div>
Wenn Ihr die folgenden Punkte beachtet habt müsste das ganze nun so aussehen:
