Vor einigen Wochen habe ich einen ganz simplen Slider für ein Projekt benötigt. Dieser sollte für jedes Bild in einem Container ein Listenelement für eine Navigation anlegen. Nach dem Laden der Seite wird nur das erste Bild angezeigt. Klick man dann auf einen der Navigationspunkte, so wird auch das entsprechende Bild, ohne weitere Effekte, eingeblendet. Beim Klick auf das Bild selbst sollte sich das Bild in voller Größe in einer Lightbox öffnen. Das wird aber nicht weiter in diesem Artikel behandelt.
jQuery - Ein Bewertungssystem mit Sternchen erstellen.
Ich habe vor längerer Zeit beschrieben, wie man ein Bewertungssystem mit Sternchen aufbauen kann. Dabei bin ich von einer HTML-Liste ausgegangen. Die einzelnen Listenelemente haben im Hintergrund ein ausgefülltes oder ein nicht ausgefülltes Sternchen gehabt. Beim Drüberfahren mit der Maus wurden das fokussierte Listenelement und alle davor mit der Klasse „active“ versehen. Ich bin jedoch auf das Problem gestoßen, dass man nicht immer von einer Liste ausgehen kann. Wenn man beispielsweise ein Framework verwendet, in meinem Fall Symfony, so bekommt man unter Umständen ein Select-Element, indem man den gewünschten Wert auswählen muss. Das ist aber in der Regel weniger komfortabel.
In diesem Tutorial werde ich euch zeigen, wie ihr aus einem Select-Element die gewünschte HTML-Liste erzeugen könnt und den gewählten Wert in ein verstecktes Feld übertragen könnt.
Vor ein paar Tagen wurde ich auf ein interessantes Plug-In für jQuery aufmerksam gemacht. gmap ermöglicht ein leichtes einbinden der Google Maps auf die eigene Webseite. Es können zahlreiche Einstellungen getroffen werden, wie Markerposition, Markericon, Markergröße, Markerschatten und Tooltips. Ich war also rundum glücklich.
Jedoch weist das Plug-In an einigen Stellen ein etwas undurchdachtes Verhalten auf. So wir bei mehreren Markern immer nach dem ersten Marker zentriert. Das ist aus meiner Sich nicht wirklich logisch. Schließlich möchte man dem Besucher möglichst alle Veranstaltungsorte ausgeben oder selbst eine Position bestimmen zu können.
jQuery - Ein Bewertungssystem mit Sternchen erstellen.
Heute möchte ich mit Ihnen klären, wie man ein tyisches Bewertungssystem mit Sternen animiert. Dabei möchte ich heute nicht den PHP/MySQL-Teil erarbeiten, sondern wie man solch eine Animation hinbekommt. Sie kennen sicherlich solche Bewertungssysteme bereits. Man hat fünf graue Sterne. Geht man nun mit der Maus rüber, werden die in Farbe dargestellt. Es ist an sich eine recht einfache geschichte, die mit jQuery erst richtig Spaß macht.
Manche mögen es und andere wiederrum nicht. Man klickt auf einen Link und es öffnet sich eine neue Seite, oder Tab. Den Betreiber der Seite freut es vielleicht, da die eigene Seite immer noch offen ist. Den Besucher der Seite ärgert es eventuell. Ich persönlich entscheide sehr gerne selbst wo ich die verlinkte Seite aufrufen möchte. Jedoch ist es manchmal durchaus sinnvoll fremden Inhalt deutlich von der eigenen Seite abzugrenzen.
Ich beschäftige mich schon seit über einer Woche mit jQuery und bin absolut begeistert. Doch wie schafft man es die wichtigen Informationen für alle Nutzer zugänglich zu machen und dabei trotzdem alles schön, und vor allem semantisch richtig, zu gestalten? An sich ein eine sehr einfache Sache.
Nehmen wir das Beispiel einer typischen FAQ Seite. Wie ist diese aufgebaut? Man hat eine Liste mit Fragen und Antworten. Mehr ist für den Anfang auch nicht notwendig.
