Ich starte heute eine Serie von Tutorials mit jQuery, es gibt viel zu wenig Ressourcen auf deutsch im Web. Dazu hab ich ein einfaches Layout entworfen welches aus Ausgangslage dient. Darauf werde ich nach und nach, einzeln erklärt, mittels Plugins oder eigener Scripte verschiedene Möglichkeiten der Aufwertung einer Webseite mit jQuery erläutern.
Zum Ausgangslayout, es lehnt sich weitestgehendst an Code den WordPress erzeugt an, durch Austausch der Selektoren (Klassen, IDs, usw.) sollte sich jedes Verfahren auf andere Webseiten problemlos übertragen lassen. Die CSS aus dem Grundlayout bleibt unverändert, für die Scripte notwendige Angaben stehen in einer Extra-CSS.
Was hab ich vorgesehen zu behandeln? Als erstes Versehen wir die obere Navigation mit einem netten kleinem Hover-Effekt der dem Mauszeiger folgt. Als nächstes werde ich mit Ajax die Links dieser Navi dynamisch in den Contentbereich laden, die Kategorien in der rechten Sidebar werden sich auf Klick öffnen und die Sicht auf ihre Unterkategorien frei geben, als vorerst letztes wird unterhalb der Kategorien ein Feed dynamisch (Ajax) in die Webseite integriert und scrollend dargestellt.
Nun genug geschwafelt, Tutorial starten oder gleich zum ersten Teil springen.
Am 20. August 2009 um 01:39 Uhr schrieb Timmer:
… Ich kann dir aus Zeitgründen das Script nicht schreiben. Aber es gibt doch so viele nützliche Tutorials. Und auf jQuery.com gibts auch eine Dokumentation mit Beispielen:
Effects/animate – jQuery JavaScript Library
Weiterhin kannst du dir mal diese DEUTSCHEN Tutorials anschauen …
Am 26. Oktober 2009 um 12:49 Uhr schrieb David Wanner:
Heyho,
erstmal prima Tutorial 😀
Habe mir schon einiges nun angeeignet.
Allerdings habe ich ein kleines Problem mit dem Menü-Tutorial und zwar bei dir nimmt ja dieser Rahmen immer eine andere Breite ein.
Mir ist leider bisher noch nicht aufgegangen wie dies bewerktstelligs wird vielleicht könntest du mir da behilflich sein.
Mit freundlichen Grüßen
David Wanner
Am 26. Oktober 2009 um 13:52 Uhr schrieb Olaf:
@ David
Hm, alles was beim hover animiert werden soll muss in der CSS dem div.ahover zugewiesen werden, eigentlich ganz einfach. JS in HEADER und fertig, der Rest geht von allein, Breite passt sich an…
Kannst mir ja mal per Mail ne URL zukommen lassen.
P.S. 26.10.2009 21Uhr
Lösung: da die LI hier Block waren nahmen sie sich die Breite der UL und waren somit alle gleich breit. Abhilfe schafft Ergänzung in CSS:
#nav ul li{float:left;
clear:left;
}
Am 12. April 2010 um 13:03 Uhr schrieb Christian Löffler:
Sehr schönes Tutorial Olaf.
Bei Interesse, ich hab auch noch eines.
http://www.herr-loeffler.de/2010⁄04/tutorial-jquery‑%E2%80%93-erklart-fur-anfanger/
Am 19. Mai 2010 um 10:37 Uhr schrieb Nestoslider:
Hallo Olaf!
Ich habe da mal eine Frage: Wie stellst Du es an, dass der Text innerhalb des „div“ so schön dynamisch der Größe des Contents entsprechend eingerollt wird (und dabei gleichzeitig einfaded und ausfaded)?
…bin gerade dabei eine neue Webseite zu entwerfen, die letztlich dann für eine Disco sein soll.
Bisher habe ich die „bumpbox“ eingesetzt, aber mittlerweile geht mir das echt auf die Nerven, dass sich bei jedem Content eine Box aufpoppt – selbst wenn die verschiedenen Möglichkeiten der Einbindung unterschiedlichster Medien recht komfortabel war (sprich: Bilder, inlineHTML, Videos, und selbst PDF). Das aufpoppen macht zwar für Bilder und Videos noch einigermaßen Sinn, würde ich aber ganz gerne für den eigentlichen „Content“ zukünftig vermeiden wollen.
Und auf der Suche nach verschiedensten Möglichkeiten des sogenannten *augenroll* Web 2.0, bin ich dann auf Deine Seite gestoßen.
Über eine Antwort würde ich mich freuen.
Schöne Grüße
Mathias Friedrich
Am 20. Mai 2010 um 10:41 Uhr schrieb Olaf:
Hi Mathias,
bei mir sind diese 2 Zeilen dafür zuständig:
target.fadeOut("slow",function(){
...
target.html(div).slideDown(1500);
Wobei target der Inhaltscontainer ist welcher erst mal ausgeblendet wird (fadeOut) dann mit dem Daten (div) befüllt wird und dann runter slidet (slideDown).
Nur wird dir das mit deinem bumpbox-Problem nicht weiterhelfen. Du müsstest schauen wie du die Links zum Content von dieser Funktion ausnehmen kannst. Da ich mir nur ganz kurz die Demo angeschaut habe kann ich jetzt auch nicht mehr dazu sagen. Wenn du magst kannst du mir mal ne Mail schicken, darin ein Link zum Problem.
Am 30. Juni 2010 um 20:30 Uhr schrieb matze:
super tut muß ich sagen hab beides bei mir in der seite eingebaut, nur wär mir noch eine kleinigkeit lieb, wie kann man es machen das sich im animierten menue, zum beispiel bei navigation ein weiterer balken mit untermenüs erscheint
mfg matze
Am 8. Juli 2010 um 22:35 Uhr schrieb Olaf:
Möglich wäre es bestimmt, aber es ist keine Kleinigkeit 😉
Am 6. August 2010 um 00:01 Uhr schrieb blackdd:
Hi Olaf,
super Tutorial zum Einstieg hat mir gefallen TOP. Finde die Tutorial Seite auch echt mit Liebe zum Detail gemacht und schöne Effekte eingebaut.
Ich selber habe mir noch diese Seite angesehen: http://d4nza.de/blog/tutorials/jquery-tutorial-1
gruß
blackdd
Am 13. August 2012 um 10:52 Uhr schrieb RoseMarie:
Hakko!
Durch Zufall habe ich die Seite gefunden wo ich sehen kann dass du viel Ahnung mit Java scripts hast..
Ich stehe seit Tagen aufm Schlauch und bekomme es nicht auf die Reihe.
Ich möchte in die Webseite ein kleines Feedbackformular einbinden was sich erst per Klick öffnet und wieder einfahren lässt.
Es handelt sich um die Seiten URL die oben drin steht.
Das Formular soll nich grösser als 200px breit und 260 px hoch sein !
Ich wollte mal höflichst anfragen ob du mir das gestalten könntest?Es wäre ganz lieb wenn du mir eine schritt für schritt anleitun zu Einbau mit schicken könntes.
LG Und schonmal besten Dank
RoseMarie