Nachdem del.icio.us den Quelltext ein bisschen geändert hat, habe ich die del.icio.us-Tag-Wolke und die Einzellinks einmal überarbeitet.

Sie können den aktuellen Quellcode hier runterladen.

Und hier können Sie noch einmal meinen ersten Artikel sehen, wo alles genau erklärt ist.

Viel Spaß mit den del.icio.us – Links!

Übrigens nur einer von 24 lesenswerten Beiträgen im WEBKRAUTS ADVENTSKALENDER 2006, die sicher auch noch 2007 aktuell sind!

Der erste Teil vermittelt eine umfangreiche Einführung in JavaScript mit unverbrauchten, originellen Beispielen. Im zweiten Teil kommen die JavaScript-Kenner voll auf ihre Kosten: Ein eigenes umfangreiches AJAX-Kapitel wurde ergänzt, weitere Themen sind Browserkompatibilität, Formulare, DHTML, Kommunikation mit Java-Applets – kurz: Die ganze Palette des praktischen Einsatzes der Sprache. Im letzten Teil des Buches befindet sich eine ausführliche Referenz zum Nachschlagen.

Zum openbook bei Galileo Computing »

• Teil 1
• Teil 2
• Teil 3

Chris Heilmann hat die Videos ausfindig gemacht und empfiehlt sie wärmstens.

Klingt alles sehr interessant, darum hier noch ein paar weitere Links zum schmökern:

1. Die Folien zum Vortrag (PDF) »
2. Die offizielle Seite von jQuery »
3. Eine umfassende Dokumentation »
4. Und seit neuestem das Magazin zu jQuery (PDF) »

Und hier noch ein paar Anwendungsbeispiele und Plugins:

• Eine Sammlung von Anwendungsbeispielen von jQuery
• Die ThickBox 2.0, mit der man beliebigen Content auf der gleichen Seite in einer Art Lightbox einbinden und anzeigen kann. (natürlich basierend auf jQuery)
• InnerFade with JQuery (eine Weiterentwicklung von Torsten Baldes)

(via web output & F-LOG-E)

Die Funktionalität wurde mit Hilfe des JavaScript-Frameworks Scriptaculous umgesetzt.
Dabei bleiben die Inhalte auch dann verfügbar, wenn JavaScript nicht aktiv ist. Sie werden dann als HTML-Liste ausgegeben und können entsprechend formatiert werden.

Hier gibts einen Beispielticker und hier den Download des Tickers als .zip-Datei.

Für ein Projekt habe ich diese wunderbare JavaScript-Diashow von S.G. Chipman ein wenig modifiziert.

Fotos: pattyfly – lottchenhh – Inuit – floecky – bobot – Photocase.de

Vorteile der Slideshow:

• Eine beliebige Anzahl von Bildern kann als Slideshow eingebaut werden.
• Es werden anfangs nur zwei Bilder vorausgeladen. Alle folgenden werden nach und nach dazu geladen (spart Ladezeiten).
• Ist JavaScript nicht aktiviert, wird nur das erste Bild angezeigt, nicht wie im Original-Script alle Bilder untereinander. So kann die Slideshow in eine Website z.B. im Header integriert werden und sieht dann auch noch gut aus, wenn JavaScript deaktiviert ist.
• Die Slideshow ist in unaufdringlichem JavaScript geschrieben, was sie sehr flexibel macht.
• Der (X)HTML-Quellcode ist standardkonform und semantisch korrekt aufgebaut.

Slideshow einbinden

1.

Bilder für die Slideshow erstellen und nummeriert mit Endung 001.jpg bis 00x.jpg in einem Ordner auf dem Webserver speichern.

z.B. http://www.meinedomain.de/slideshow/image-001.jpg usw.

2.

Erstes Bild der Slideshow mit class="start" in div-Container mit ID “slideshow” mit folgendem Code in die Seite einfügen:

<div id="slideshow">
<img class="start" src="http://www.meinedomain.de/slideshow/image-001.jpg" />
</div>

Danke Fabian Meyer. Er hat mich darauf hingewiesen, dass das Startbild nur sicher angezeigt wird, wenn es mit http://… geschrieben wird.

3.

Slideshow-JavaScript-Datei downloaden »

4.

JavaScript-Datei anpassen:

Die folgenden Variablen am Anfang des Scriptes nach eigenen Bedürfnissen definieren:

bilderAnzahl=5;
bilderPfad="http://www.meinedomain.de/slideshow/image-";
geschwindigkeit=3000;

Für bilderAnzahl die Anzahl der Slideshow-Bilder angeben.
Bei bilderPfad den absoluten Pfad zu den Slideshow-Bildern angeben und zwar bis zu dem Zeichen, welches vor der Nummerierung 00x.jpg steht (s. Beispiel oben).
Für geschwindigkeit die Zeit zwischen den Überblendungen in Millisekunden angeben, also für 1 Sekunde 1000.

5.

JavaScript-Datei einbinden:

<script type="text/javascript" src="http://www.meinedomain.de/scripte/slideshow.js"></script>

6.

Folgendes CSS in die Stylesheet-Datei der Website einbinden:

/* SLIDESHOW */
#slideshow {
 height:100px; /* hier Hoehe der Slideshow-Bilder angeben */
 position:relative;
}
#slideshow img {
 display:none;
 position:absolute;
 top:0; left:0;
}
#slideshow img.start {
 display:block;
}

7.

Slideshow bewundern!

PS:
Das Script funktioniert bei mir in allen getesteten Browsern.
Falls es das irgendwo nicht tut, würde ich mich über eine Nachricht freuen!

Dieses kleine JavaScript habe ich eben geschrieben, um ein Rollover-Funktion für eine aus Bildern bestehende Linkliste zu realisieren ohne JavaScript-Code im HTML-Quelltext zu notieren.
Damit lässt sich das Script jederzeit auf jede beliebige Bilder-Link-Liste ohne zusätzlichen Programmieraufwand anwenden.

Hier auf der Netzspielwiese ist das Script als »Portfolio auf einen Klick« in der Sidebar der Seite Portfolio in Aktion. Eine weitere sinnvolle Einsatzmöglichkeit wäre beispielsweise eine aus Bildern bestehende Website-Navigation.

Das Script lädt die Hover-Bilder voraus und wechselt bei onmouseover und onfocus zum Hover-Bild, bei onmouseout und onblurwieder zurück zum Normal-Bild.

Um das Script verwenden zu können, wird HTML-Quelltext in der folgenden Form benötigt:

<ul id="imageList">
 <li><a href="seite1.htm"><img src="image01.gif" /></a></li>
 <li><a href="seite2.htm"><img src="image02.gif" /></a></li>
 <li><a href="seite3.htm"><img src="image03.gif" /></a></li>
</ul>

Dann braucht nur noch das JavaScript in die Seite eingebunden:

 <script type="text/javascript" src="domrollover.js"></script>

und die Funktion createRollovers mit Übergabe der ID des ul-Tags der Bilderliste aufgerufen werden:

<script type="text/javascript">
// <![CDATA[
window.onload = function() { createRollovers('imageList') };
// ]]>
</script>

Und schon sollte das funktionieren!

Weiter zu beachten:

• Die Bilder in ihrem Normal- und Hover-Status müssen in ein und demselben Verzeichnis liegen.
• Die Normal- und Hover-Bilder müssen denselben Namen haben. Dem Hover-Bild wird lediglich ein “_h” angehängt.
  (Im o.g. Beispiel müssten also im gleichen Ordner wie die HTML-Seiten die Bilder image01.gif, image01_h.gif, image02.gif, image02_h.gif, image03.gif und image03_h.gif liegen.)
• Es können .gif und .jpg – Dateien verwendet werden, auch gemischt. Einzige Bedingung: Normal- und Hover-Bild desselben Bildes brauchen den gleichen Dateityp.

Viel Spaß beim Ausprobieren!

Falls jemand das Script einsetzt, würde ich mich über einen Hinweis sehr freuen! (um das Werk bewundern zu können :) )

Hier nochmal der » DOM-Rollover – Download «

Leider muss dazu sehr sehr viel Quellcode geschrieben werden. Um beispielsweise einen neuen Absatz an das Ende einer HTML-Seite anzufügen, braucht man folgendes Script:

neuerAbsatz = document.createElement('p');
text = document.createTextNode('Neuer Textabsatz.');
neuerAbsatz.appendChild(text);
document.body.appendChild(neuerAbsatz);

Dan Webb hat nun ein Script veröffentlicht, mit dem einem viel Schreibarbeit erspart wird: den DOM-Builder.

Am Anfang einmal als Script in die Seite eingebunden

<script type="text/javascript" src="dombuilder.js"></script>

, muss dann für das oben aufgeführte Beispiel nur noch folgender Code notiert werden:

// um die DOM-Builder-Funktionen aufzurufen:
var html = DomBuilder.apply();
// Textabsatz erstellen
var p = html.P("Neuer Textabsatz.");
// und an den HTML-Body anhängen
document.body.appendChild(p);

Für die Erstellung eines ganzen Formulars reicht folgender Code:

var html = DomBuilder.apply();
var form = html.FORM(
 html.DIV(
  html.INPUT({type : 'text', name : 'email'}),
  html.INPUT({type : 'text', name : 'password'}),
  html.INPUT({type : 'submit'}),
 )
);
document.body.appendChild(form);

Für die Notation gelten folgende Regeln:

• Ein neues Element wird in Großbuchstaben notiert: INPUT
• und sein Inhalt in runde Klammern eingeschlossen: ().
• Besitzt das Element Attribute, werden diese innerhalb der runden Klammern in geschweiften Klammern notiert: {type : 'text', name : 'password'}.
• Beim Definieren von Klassen muss das Attribut class in Anführungszeichen gesetzt werden: P({ 'class' : 'warning' }.
• Mehrere Elemente oder Attribute werden durch ein einfaches Komma voneinander getrennt: ,.

via ajaxian