Abonnieren
Lisardo Multimedia GmbH
Herrenbachstr. 19
86161 Augsburg
Tel.: 0821-150565
Fax: 0821-150595
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
Eine kleine Sammlung spektakulärer DHTML- und AJAX-Skripte
MiniAjax bietet einen kleinen Showroom mit schönen und teilweise spektakulären AJAX-Skripte. Teilweise sind es Tutorials, Demos oder auch regelrechte Anwendungen. Ein Großteil kann in eigene Seiten eingebaut werden. (via pixelgraphix)
Kategorie: JavaScript | AJAX
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
Openbook: JavaScript und AJAX
![Galileo [Logo]](http://www.lisardo.biz/images/news/galileo2.jpg "Galileo [Logo]"){kind=small}
Das komplette Buch »JavaScript und AJAX« von Christian Wenz als HTML-Seiten – zum online Lesen oder für den Download. Weitere »Openbooks« aus dem Galileo Verlag gibt es hier.
Kategorie: JavaScript | AJAX
Organisation von JavaScripten
Auf SELFHTML gibt es einen neuen Abschnnitt zu JavaScript, der sich mit modernen Programmiertechniken und der Organisation von JavaScript-Skripten beschäftigt.
Kategorie: JavaScript | JS-Grundlagen
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
AJAX Community
Eine der wenigen deutschsprachigen Seiten zu AJAX. Es handelt sich um ein Forum rund um AJAX und verwandte Themen. Noch nicht sehr besucht, aber auch noch sehr jung. Schön aufgemacht und offensichtlich aktuell.
Kategorie: JavaScript | AJAX
Ajax Quellensammlung
Eine Linksammlung zu AJAX mit folgenden Kategorien: Tutorials, Lesenswertes, Anwendungsbeispiele, Tools, Weblogs, AJAX Wikis, AJAX Foren. Die meisten Links führen allerdings zu englischsprachigen Seiten – was daran liegt, dass es wenig deutschsprachige Quellen gibt.
Kategorie: JavaScript | AJAX
AJAX
Eine weitere Kurzeinführung in AJAX anhand eines Beispiels. Schön gemacht und übersichtlich gestaltet, mit allen wichtigen Code-Beispielen.
Kategorie: JavaScript | AJAX
AJAX und Zugänglichkeit
Eric Eggert zeigt in diesem Artikel eine Möglichkeit, die Zugänglichkeit von AJAX-basierten Webformularen zu verbessern. Es handelt sich um eine Übersetzung von »AJAX and Accessibility« aus dem Englischen.
Kategorie: Barrierefreiheit | Barrierefreie Techniken | JavaScript | AJAX | JS barrierefrei
Tutorial: Shoutbox als AJAX-Anwendung
In einem kleinen Workshop wird hier eine Chat- bzw. Shoutbox zusammengebaut, mit Hilfe von validem XHTML, CSS, AJAX und PHP. Die Eingaben bzw. Chat-Beiträge werden in einer MySQL-Datenbank gespeichert. Um dieses AJAX-Tutorial mitmachen zu können sind also Kenntnisse von PHP und MySQL erforderlich. Die komplette Anwendung gibt es auch als Download.
Kategorie: JavaScript | AJAX
AJAX - Asynchronous Javascript and XML
Eine Einführung in AJAX von Hendrik Sgries mit vielen Code-Beispielen. Nach einem kurzen Überblick über Vorteile und Probleme von AJAX erläutert er in drei Schritten die wesentlichen Grundbausteine von AJAX: 1. XMLHTTPRequest-Object instanzieren – 2. Request senden – 3. Daten verarbeiten. Danach folgt eine tabellarische Darstellung der Methoden und Eigenschaften des XMLHTTPRequest und anschließend eine Reihe interessanter Beispiele.
Kategorie: JavaScript | AJAX
AJAX - Frische Ansätze für das Web-Design
Die TEIA AG bietet regelmäßig Kurse zu AJAX an. Die (empfehlenswerten) Kursunterlagen können als Buch erworben (ISBN: 3-935539-26-6, 16.95 Euro) oder direkt online gelesen werden.
Kategorie: JavaScript | AJAX
AJAX bei Wikipedia
Der Ajax-Artikel bei Wikipedia ist sehr informativ und gibt einen guten Überblick über Techniken, Vorteile und Probleme.
Kategorie: JavaScript | AJAX
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
Komplex-dynamische Listen
Mit Komplex-dynamischen Listen sind Listen gemeint, die sich dynamisch in mehreren Spalten aufbauen, ähnlich wie die Spaltendarstellung im Dateibrowser von Mac OS X.l Ein Mausklick auf einen Eintrag in der ersten Liste in der linken Spalte macht eine zweite Liste sichtbar, deren Inhalt vom angeklickten Wert der ersten Liste abhängt. Das ist nur über eine geschickte Kombination von CSS und (barrierefreiem) JavaScript möglich. Bei diesem Artikel handelt es sich um eine Übersetzung von Complex Dynamic Lists: Your Order Please von Christian Heilmann, erschienen bei A List Apart (ALA).
Kategorie: CSS und HTML | CSS-Listen | CSS-Menus | JavaScript | JS barrierefrei
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
Popups mit JavaScript
Molily diskutiert in seinem Blogartikel die Vor- und Nachteile von zwei verschiedenen Techniken für JavaScript-Popups. Sein zweiter Lösungsansatz kommt einem barrierefreien JavaScript schon recht nahe, da bei deaktiviertem JavaScript einfach eine neue HTML-Seite geöffnet wird. Als Fazit empfiehlt Molily, weitgehend auf Popups zu verzichten und empfiehlt stattdessen eine Überarbeitung der Navigationsstruktur. Der Artikel ist gut geeignet, sich in die grundsätzliche Problematik einzulesen.
Kategorie: JavaScript | JS barrierefrei | JS-Grundlagen
Abonnieren
