Abonnieren
Lisardo EDV Beratung
Katharinengasse 20, Rückgebäude
Eingang über Bleigäßchen 5
86150 Augsburg
Tel.: 0821-150565
Fax: 0821-150595
E-Mail: info@lisardo.de
Lösungen für Tooltipps
Henry Jones stellt hier 11 verschiedene Lösungen für Tooltipps auf Webseiten vor: für jQuery, MooTools und reinem CSS.
Kategorie: CSS und HTML | CSS+HTML-Tools | JavaScript | JS-Scripts-Tools | mootools
Dropdown- und Flyoutmenüs mit CSS und JavaScript
Es gibt mittlerweile eine Reihe von Dropdown- und Flyout-Menüs, die mit mehr oder weniger JavaScript auskommen. Basis ist im wesentlichen das Pulldownmenü von Eric Meyer, das mit reinem CSS auskommt und kein JavaScript benötigt, allerdings auch nur in modernen Browsern funktioniert, die ausreichend CSS2 unterstützen – also nicht im Internet Explorer. Patrick Griffiths und Dan Web entwickelten in Ihrem Artikel »Sun of Suckerfish Dropdowns« diesen Ansatz weiter und ergänzten ihn um um ein kleines JavaScript, das die fehlende Funktionalität in den Internet Explorern ab Vs. 5 bereit stellt. Christian Heilmann baut diesen Ansatz noch einmal weiter aus und stellt mit »YADM – Yet another dynamic menu« kleines Framework für Pulldownmenüs zur Verfügung. Eine weitere Variante von Suckerfish ist bei solarDreamStudios zu finden.
Die umfangreichste Sammlung an Menüs (Dropdown oder Flyout) ist zweifellos bei Stu Nichols auf CSSplay zu finden. Er hat es mittlerweile geschafft, diese Menüs nur mit Hilfe von CSS auch im Internet Explorer 6 zum Laufen zu bringen (mit trickreichen Conditional Comments, die das Menü in Tabellen packen). Zusätzlich bietet er auch Varianten mit kurzen JavaScripts an, allerdings auf einer eigenen Seite.
Achtung: die Menüs von Stu Nichols sind nur für den nicht kommerziellen Einsatz frei; eine Verwendung in kommerziellen Projekten erfordert eine schriftliche Zustimmung und eine Spende.
(14.3.2008)
Kategorie: CSS und HTML | CSS-Menus | JavaScript | JS-Scripts-Tools
Verkettete Auswahllisten mit JavaScript
Verkettete Auswahllisten sind Listen mit verschachtelten Unterlisten. Je nachdem, welcher Hauptlistenpunkt ausgewählt wird, erscheinen andere Optionen in den Unterlisten. Derartige Listen können über PHP serverseitig ganz gut realisiert werden, jedoch ist die Programierung mühsam und die Bedienung ebenfalls, da die Seite für eine Auswahl mehrmals geladen werden muss. Der Artikel bei SELFHTML beschreibt eine Lösung über JavaScript, bei der die Seite nur einmal geladen werden muss.
Kategorie: JavaScript | JS-Scripts-Tools
Unaufdringliches Scrollen in großen Webseiten
Ein schönes Tutorial und Anwendungsbeispiel für den Scrolleffekt aus dem JavaScript-Framework script.aculo.us. Es wird genau beschrieben wie das Framework eingesetzt wird und welche Skripte ergänzt werden müssen (deutschsprachig). Live kann das fertige Beispiel bei mediastyles getestet werden.
Kategorie: JavaScript | JS-Scripts-Tools
DOMTab - Karteikarten-Navigation mit CSS und DOMscripting
Ein weiteres (barrierefreies) JavaScript, mit dem Inhalte auf einer Webseite in Tabs dargestellt werden können. Es ist einfach zu implementieren und setzt praktisch keine JavaScript-Kenntnisse voraus. Wenn im Browser JavaScript nicht aktiv ist, werden einfach alle Tabs untereinander gezeigt und die Links in den Karteikarten-Reitern funktionieren als seiteninterne Links. (via [F-LOG-GE])
Kategorie: JavaScript | JS-Scripts-Tools
Dynamisches Navigationsmenü mit JavaScript
Ein barrierefreies und suchmaschinentaugliches JavaScript-Menü. Klingt wie warmes Eis, ist aber möglich. Wie, das zeigt Andy Peatling von cssdev. (Tipp vom webmasterfind-blog).
Kategorie: JavaScript | JS-Scripts-Tools
JavaScript Fading Tooltips: Sweet Titles
Ein kleines JavaScript, mit dem frei formatierbare Tooltips zu jedem Link gezeigt werden können. Nach dem Einbinden der Bibliothek erscheinen automatisch bei allen Links kleine Tooltips mit dem Inhalt des title-Attributs und der URL.
Kategorie: JavaScript | JS-Scripts-Tools
script.aculo.us
script.aculo.us ist eine Skriptbibliothek, die eine ganze Menge erstaunlicher Effekte anbietet: Sortierung von Listen über Drag und Drop, Slider, ein Drag- und Drop-Einkaufswagen, visuelle Effekte und mehr. Viele dieser Skripte sind nicht komplett barrerefrei (ein Slider ohne JavaScript kann natürlich nicht funktionieren) aber sie sind in jedem Fall unaufdringlich.
Kategorie: JavaScript | JS-Scripts-Tools
onlinetools
Eine kleine Skriptsammlung mit barrierefreien JavaScripts: Popup-Fenster durch dynamische Layer ersetzen, Tabbed Interface, Hierarchische JavaScript-Navigation, Auf- und zuklappbare Seitenbereiche, ein barrierefreies DHTML-Scroller und noch viele mehr. Prädikat wertvoll!
Kategorie: JavaScript | JS barrierefrei | JS-Scripts-Tools
Dynamic News Upscroller
Ein barrierefreier JavaScript-Scroller, der zudem praktisch ruckelfrei läuft. Er kann über einen Link deaktivert werden und bei deaktiviertem JavaScript wird der Text (und die Links im Scroller) einfach in einem CSS-Container gezeigt. So können mir Scroller sogar wieder gefallen ...
Kategorie: JavaScript | JS barrierefrei | JS-Scripts-Tools
JavaScript und DOM bei SelfHTML
Der Klassiker darf natürlich nicht fehlen – SelfHTML ist nach wie vor eines der wichtigsten Nachschlagewerke auch für JavaScript, vor allem die sehr ausführliche Objektreferenz, die Einführung in die Grundlagen der Sprach-Elemente und der Überblick über DHTML. Achtung: SelfHTML wurde noch nicht an das moderne DOM Scripting angepasst - vergleiche hierzu die Diskussion bei SelfHTML selbst in den folgenden Artikeln: Der sinnvolle Einsatz von JavaScript und DHTML ist tot.
Kategorie: JavaScript | JS barrierefrei | JS-Grundlagen | JS-Scripts-Tools
The perfect FAQ page!
Ein barrierefreies JavaScript, mit dem CSS-Container auf einer Seite ein- und ausgeschaltet werden können. Der Autor verwendet es in seinem Beispiel für ein FAQ, bei dem die Beiträge durch Klick auf die Fragen ein- und ausgeschaltet werden können. Wenn JavaScript deaktiviert ist, erscheinen alle Einträge einfach untereinander; beide Varianten sind über CSS frei formatierbar. Das Skript ist einfach zu implementieren und natürlich auch in anderen Bereichen verwendbar, zum Beispiel für barrierefreie und vor allem suchmaschinentaugliche Menüs.
Kategorie: JavaScript | JS barrierefrei | JS-Scripts-Tools
Lightbox JS v2.0
Ein geniales barrierefreies JavaScript, mit dem Bilder durch Klick auf ein Thumbnail vergrößert dargestellt werden können – nicht wie üblich in einem neuen Fenster, sondern in einem Layer direkt auf der Seite. Version 2 ist sehr ausgereift, kompatibel zu allen modernen Browsern, einfach zu implementieren und vor allem bei der Contentpflege elegant und einfach zu verwenden. Es verfügt über einen Ladebalken und eine Diashow-Funktion.
Kategorie: JavaScript | JS barrierefrei | JS-Scripts-Tools
JavaScript tabifier
Ein barrierefreies JavaScript, mit dem Inhalte auf einer HTML-Seite in Tabs dargestellt und mittels JavaScript ohne Nachladen umgeschalten werden können. Die Installation und Verwendung ist einfach und setzt nur minimale JavaScript-Kenntnisse voraus. Wenn im Browser JavaScript inaktiv ist, so erscheinen die Inhalte nicht in Tabs sondern in Absätzen (Containern) untereinander. Beide Varianten können mit CSS frei gestaltet werden.
Kategorie: JavaScript | JS-Scripts-Tools
Seite 1 von 1 Seite(n)
Abonnieren
