Dynamische Texte bei klick

theschmidey

Hallo Forum,

ich möchte meine Webseite 2.0 gestalten, d.h. ein neues Design verwirklichen. Alles ist schon soweit fertig, nur noch nicht gecodet.
Es geht um Folgendes und zwar möchte ich es so gestalten, dass sich Texte und allgemein div's nach hyperlink-klicks "smoothie" bewegen.
Es gibt mehrere Seiten (Start, andere Seite, andere Seite, andere Seite, andere Seite, andere Seite) und diese Sollen jeweils immer neu "auffahren" wenn man zur nächsten Seite will.
Wenn mich jemand verstehen kann, und weiß was ich meine wäre es SUPER GEIL, wenn er mir einen Link schicken kann zu JavaScript (damit kann ich es denke ich verwirklichen). Muss auch nicht groß erklärt werden, ich beiß mich da selber durch, wird eh mal langsam Zeit JavaScript zu lernen, hehe
Habe mit HTML, CSS angefangen und mit PHP weitergemacht, aber ausgerechnet Javascript fehlt, was für ne Schande

Danke für alles & gute Nacht!

-theschmidey

Dominikgt

http://api.jquery.com/load/

Das sollte dir helfen. Allerdings erfordert es dann noch sehr viel arbeit, damit du die browser-history trotzdem nutzen kannst. so kannst du erstmal dann nämlich , wenn du auf einen menüpunkt klickst und zurück willst, den "zurück-button" des browsers nicht nutzen. Dafür empfehle ich dir das BBQ Plugin. gibt aber sicherlich auch einfachere!

theschmidey

Uff, das hört sich echt sehr umfangreich an. Gibt es dazu evt. noch Beispiele?

Edit: also dass wir uns einig sind: ich hatte vor dass der Inhalt der nächsten Seite hineinfahren und der Link http://www.example.com/#seite aussieht. Das habe ich schon öfters gesehen, nur hab ich mir leider Gottes diese Seiten nicht gemerkt. Damnit

Dominikgt

okay, das kannst du dann auch einfacherer lösen. hat dein layout ne feste breite? z.B. 960px? dann einfach den kompletten inhalt in eine ul (liste). Für jede Seite ne eigene li. Dann beschäftigst du dich kurz mit Jquery .toArray(), lässt dir die li-inhalte in ein Array schreiben und animierst bei klick auf einen Menüpunkt, dass der alte Inhalt rausfährt und sobald die Animation abegeschlossen ist, der neue rein.

theschmidey

Layout ist fest, ja. Und so in der Richtung also mit den <li>'s & <ul>'s hab ichs mir schon gedacht nur greif ich noch nicht so in Jquery durch . Aber ich denke, da gibt es doch bisschen mehr Lesestoff im Internet? Weil ich hab schon danach gesucht finde aber nix Brauchbares, es fehlen mir ja auch die nötigen keywords um auf so ein Tut zu gelangen.

Danke!

Dominikgt

Hier ein bisschen lesestoff:
http://api.jquery.com/toarray/
http://api.jquery.com/animate/
http://api.jquery.com/click/
http://api.jquery.com/

Viel Erfolg

theschmidey

Danke dir! Schönen Mittag noch

theschmidey

So, hab genau das gefunden, was ich gesucht habe. Für alle die es wissen wollen:

Code

$(document).ready(function(){	$('a[href^='#']').on('click',function (e) {
	    e.preventDefault();




	    var target = this.hash,
	    $target = $(target);




	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 900, 'swing', function () {
	        window.location.hash = target;
	    });
	});
});

Alles anzeigen

Dieser Code lässt alle href-Links "smoothy" runterscrollen. Einfach

HTML

<a href="#seite-zu-der-man-will">Seite</a>

schreiben (Code muss davor geladen sein), und schon scrollt er dahin. Danke an Dominikgt für deine Links, so schwer war es gar nicht.

--KANN GESCHLOSSEN WERDEN--

-theschmidey

Tags