Ein responsive Webdesign, wobei sich die Subelemente der Navigationsleiste automatisch schliessen sobald ein anderes Submenü geöffnet wird war eine Anforderung des Kunden. Nun gut, eine Webseite zu gestalten, die neben dem Desktop auch auf einem mobilen Gerät leserlich ist (Responsive), ist nicht sonderlich schwer zu entwickeln. Es bedarf eines Frameworks (wie z.B. Responsive-Nav), das dies erfüllt. Problemstellung Die Navigationsliste soll aus den Menü-Elementen Startseite, Über uns, Projekte und Impressum bestehen. Dabei sollen Über uns und …
4 Artikel Schlagwort jQuery
jQuery und AJAX Tutorial - Anhand der Postleitzahl automatisch den Ort bestimmen
Das Skript sucht nach der Eingabe einer Zahl in das Feld ‘Postleitzahl’ automatisch in einer MySQL Datenbank nach dem dazugehörigen Ort beziehungsweise Stadt. Was das Skript genau macht, wird in der Demoversion gezeigt. Dafür müssen wir auf der Webseite, die vom Besucher aufgerufen wird erst prüfen ob er in das relevante Feld - in unserem Fall in das Feld der Postleitzahlen - einen Wert eingibt. Sobald er dies tut, möchten wir mittels AJAX in unserer …
jQuery Easing - jQuery Animationen organischer darstellen
jQuery Easing ist eine Erweiterung der jQuery-Bibliothek. Sie erlaubt es webbasierte Animations-Tweets zu erstellen. Ein Beispiel soll dies etwas genauer erläutern. Man hat eine sich drehende CD, die aber zu Beginn etwas langsamer drehen soll und erst nach 1 bis 2 Sekunden die volle Drehgeschwindigkeit erreicht haben soll. Das Beispiel auf jsFiddle verdeutlicht, dass eine Animation mit jQuery Easing viel organischer wird. Ein grosser Dank hierfür geht an Robert Panners für die Entwicklung von jQuery …
Ein einfaches jPlayer Beispiel
Für Alle, die sich mit dem jPlayer noch nicht allzu gut auskennen und einfach mal einen einfachen Musik- & Videoplayer mit Links erstellen wollen, für die ist dieses kleine Tutorial perfekt geeignet. Der Vorteil an dem jPlayer gegenüber andere Player sind folgende Merkmale: OpenSource Auf jQuery aufbauend HTML5 sowie ein Flash-Fallback für ältere Browser Auf der Webseite von jPlayer kann man mehr über jPlayer erfahren. Nun aber zum versprochenen Tutorial. In einem ersten Schritt muss …