JavaScripts für Ihre Website

Tooltipps, Navigation, Content

Das Javascript Information Visualization Toolkit - kurz: JIT - dient als Framework für teilweise sehr ausgefallene Präsentationsformen abseits von Torten- und Balkendiagrammen. So erzeugt Rgraph mithilfe konzentrischer Kreise eine Baumstruktur.

Der Stammknoten befindet sich in der Mitte, seine Kindknoten auf dem innersten Kreis, deren Kindknoten auf dem zweitinnersten, und so weiter. Durch das Anklicken eines Knotens wird dieser zum Stammknoten und der Graph passt sich mit einer kleinen Animation entsprechend an.

Tooltips

Das Skript Tooltips zeigt beliebigen Text und HTML-Objekte als Popup-Informationen an. Beim Berühren eines entsprechenden Links mit der Maus erscheinen die Infos auf dem Bildschirm. Eine Beschreibung der Funktionen des Skripts finden Sie in der Online-Dokumentation.

Javascripts zum Soforteinbau

© Archiv

Swfir: Per Flash eingebunden lassen sich herkömmliche Bilder mit einem Schatten, runden Ecken und gedreht anzeigen.

Ein wahres Feuerwerk für Tooltip-Fans zünden Sie mit dem Javascript Tigra Hints. Lassen Sie beliebige Texte, Tabellen oder Grafiken aufpoppen, sobald Sie die Maus über entsprechende HTML-Elemente auf Ihren Webseiten halten.

Erstellen Sie mit dem Skript beispielsweise ein Popup-Fenster mit Hilfetext oder die Großansicht für eine Vorschaugrafik. Die Anleitung zeigt ausführlich, wie es geht.

Navigation

Nutzen Sie Milonic DHTML Menu, um flexibel Navigationsmenüs in Ihre Website einzufügen. Das für den professionellen Einsatz lizenzpflichtige Skript darf auf gemeinnützigen und privaten Websites kostenlos genutzt werden. Beantragen Sie dies über die Seite www.milonic.com. Erstellen Sie Menüs horizontal, vertikal oder als Imagemap.

Für Erklärungen lassen sich Tooltips zu den Menüpunkten hinzufügen. Richten Sie das Menü bei Bedarf per Maus verschiebbar ein. Per CSS lassen sich die Attribute unter anderem für Schrift, Ränder und Farben anpassen.

Mit dem Skript Tigra Menu lassen sich ebenfalls flexibel Menülösungen für Ihre Sites einrichten. Verschachteln Sie die Navigation dabei in beliebig viele Ebenen und passen Sie die Optik mit CSS nach Ihren Wünschen an.

Content

Bei Tiddlywiki ist ein komplettes Wiki in einer einzelnen Datei untergebracht. Nutzen Sie das Skript, um kompakte Dokumentationen zu erstellen, die keine auf dem Webserver installierte Programmiersprache wie PHP benötigen. Die eingegebenen Informationen speichert die Anwendung nicht in separaten Dateien, sondern in <div>- Blöcken der Webseite selbst.

Durch dynamische Ein- und Ausblendung entsteht der Eindruck von einzelnen Seiten. Bei der Syntax der Textformate und -auszeichnungen orientiert sich das Skript an den Befehlen der klassischen Wiki-Anwendungen. Von Überschriften über Trennlinien bis zu komplexen Tabellen lassen sich die üblichen Seitenobjekte einfügen.Die Nachrichten Ihres Twitter-Kanals oder die Ergebnisse einer beliebigen Twitter-Suche binden Sie mit Tweet in Ihre Seiten ein. Das Skript nutzt das Framework jQuery und zeichnet sich durch eine hohe Download-Geschwindigkeit aus. Die einzelnen Beiträge lassen sich zu Ihren Originalseiten auf der Twitter-Website verlinken.

Javascripts zum Soforteinbau

© Archiv

HTML-Graphs: Stellen Sie trockene Zahlenreihen interessanter als buntes Balkendiagramm dar.

Blenden Sie optional Ihren Avatar ein und gestalten Sie die Texte mit eigenen Stylesheets. Eine Einschränkung gibt nur das Twitter API selbst vor: Sie dürfen maximal 100 Tweets der letzten sieben Tage präsentieren. Eine ausführliche Anleitung finden Sie auf der Startseite des Anbieters.

Eine weitere sehr flexible Lösung zum Anzapfen des Microblogging-Dienstes ist Twitter.js. Bauen Sie die Nachrichten individuell aus den vorgegebenen Tweet-Bestandteilen zusammen. Jedes einzelne Element der Beiträge lässt sich über CSS-Formatklassen frei gestalten. Mit dem nur 2 KByte großen Skript Gmap binden Sie Karten aus Google Maps auf Ihren Seiten ein.

Es verwendet das Framework jQuery und steuert den Kartendienst über die eigene Programmierschnittstelle Google Maps API. Statt umfangreichen Skriptcode schreiben zu müssen, genügt ein Befehl mit diversen Parametern. Das folgende Beispiel aus der Online-Dokumentation des Anbieters zeigt, wie Sie eine Karte einbinden, auf der der gewünschte Ort markiert und beschriftet ist:

$("#map2").gMap({ markers:
[{ latitude: 47.660937, longitude: 9.569803, html: "Tettnang, Germany", popup: true }] });

Name Kurzbeschreibung URL
CSS Speech Bubbles Gestaltet Text als flexible Sprechblase www.willmayo.com/2007/02/10/css-speech-bubbles/
Sifr Ermöglicht den Einsatz ausgefallener Schriftarten wiki.novemberborn.net/sifr/
Tinyeditor Einfacher WYSIWYG-Editor www.leigeber.com/2010/02/javascript-wysiwyg-editor/
Drag and drop table content Erlaubt das Verschieben von Tabelleninhalten www.redips.net/javascript/drag-and-drop-table-content/
WMD Editor Verwandelt ein Textfeld in einen Editor wmd-editor.com
Niceforms Gestaltet Formulare modern www.emblematiq.com/projects/niceforms
Form Validation Prüft Formulareingaben www.leigeber.com/2008/04/dynamic-inline-javascript-form-validation/
JQZoom Evolution Fügt Lupenfunktion zu Bildern hinzu www.mind-projects.it/projects/jqzoom/
Magic Zoom Erstellt flexiblen Bilderzoom www.magictoolbox.com/magiczoom/
Fancyzoom Vergrößert effektvoll Grafiken www.cabel.name/2008/02/fancyzoom-10.html
Multibox Zeigt beliebige Elemente in der Lightbox an www.phatfusion.net/multibox/
Lightbox 2 Präsentiert Bilder als Lightbox-Galerie www.lokeshdhakar.com/projects/lightbox2/
Jsviewer Erzeugt eine automatische Slideshow www.jsviewer.com
Dynamic Image Gallery and Slideshow Zeigt Bilder als Galerie und Diashow www.leigeber.com/2008/05/ajax-image-gallery-slideshow/
Swfir Bettet Bilder mit Flash-Technik ein www.swfir.com
HTML-Graphs Stellt Zahlenreihen als Diagramme dar www.gerd-tentler.de/tools/graphs/
Rgraph Visualisiert Beziehungen zwischen Daten thejit.org
Tooltips Zeigt HTML-Elemente im Popup-Fenster an www.walterzorn.de
Tigra Hints Präsentiert nahezu alles in Tooltips www.softcomplex.com
Milonic DHTML Menu Erzeugt aufklappbare Menüs www.milonic.com
Tigra Menu Bietet verschiedene Menüvarianten www.softcomplex.com
Tiddlywiki Legt ein Wiki in einer Datei an www.tiddlywiki.com
Tweet Bindet einen Twitter-Kanal in die Webseite ein tweet.seaofclouds.com
Twitter.js Zeigt ebenfalls Tweets auf eigenen Seiten an remysharp.com/2007/05/18/add-twitter-to-your-blog-step-by-step/
Gmap Präsentiert Karten aus Google Maps gmap.nurtext.de

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…
News
Minecraft-Server waren das ursprüngliche Ziel
Alternative zu MacBook Pro und Surface Book
Blockchain-Plattform für Schweizer Großbank