jQuery - Springe immer zum nächsten DIV

[mitstreiter]

Abend zusammen, ich brauch mal wieder hilfe. Ich hab ne Liste von Divs und habe in jeden Div ein a-tag.

Code

<div id="wrapper">
    <div class="container">
            <p>Toller Inhalt und so</p>
            <a class="next" href="#">zum nächsten container</a>
    </div>
    <div class="container">
            <p>Toller Inhalt und so</p>
            <a class="next" href="#">zum nächsten container</a>
    </div>
    <div class="container">
            <p>Toller Inhalt und so</p>
            <a class="next" href="#">zum nächsten container</a>
    </div>
    <div class="container">
            <p>Toller Inhalt und so</p>
            <a class="next" href="#">zum nächsten container</a>
    </div>
    <div class="container">
            <p>Toller Inhalt und so</p>
            <a class="next" href="#">zum nächsten container</a>
    </div>
    <div class="container">
            <p>Toller Inhalt und so</p>
            <a class="toTop" href="#">Und wieder ganz nach oben!</a>
    </div>
</div>

Wenn man beim letzten Container angekommen ist, soll er ganz nach oben springen, also toTop. Wie stell ich das am besten an?

Gruß

 

[cebito]

AW: jQuery - Springe immer zum nächsten DIV

Super Beispiel, hat aber mit jQuery nix zu tun. Du suchst wahrscheinlich nach Sprungankern, also "installiere" eine entsprechende ID am Anfang der Seite und verlinke den letzten dorthin... href="topID"
Sollte ich mich getäuscht haben, erklär bitte genauer, was du willst.

 

[mitstreiter]

AW: jQuery - Springe immer zum nächsten DIV

Jup, hast dich getäuscht. Stell dir vor jeder Container ist 500px hoch und unten ist ein button um zum nächsten Container zu springen und naja, ich suche eben nach einer Möglichkeit dahin zuscrollen mit jQuery. Wenn ich ganz unten bin ist der Befehl zum hochscrollen relativ einfach.

Ich möchte aber für die andere Sprungsache nicht für jeden Container eine eigene Funktion schreiben, sondern alles in einer haben.

Also ich klick auf weiter, er scroll zum nächsten Container nach unten, ich klicke wieder auf weiter und er scrollt wieder, bis er eben unten angekommen ist.

 

[fakerer]

AW: jQuery - Springe immer zum nächsten DIV

na dann sollte dir http://demos.flesler.com/jquery/scrollTo/ helfen

bzw:

 

[mitstreiter]

AW: jQuery - Springe immer zum nächsten DIV

Ja, die Seiten kenne ich schon. Es geht mir aber darum, dass ich nicht 10 Scripte für eine Seite schreibe, sondern eins, dass für alle weiter-btns geht.

Sozusagen: Finde nächsten Container und scrolle dahin wenn du auf .next klickst. Wohlgemerkt, dass in jedem Container ein weiter-Btn ist.

 

[randacek_pro]

AW: jQuery - Springe immer zum nächsten DIV

Ändert sich die Anzahl deiner Container dynamisch, oder ist die immer gleich?
Am einfachsten wäre doch, du indizierst die DIVs (Array) und springst einfach immer zum nächsten Index.
Wobei "springen"; wie sieht denn der Sprung genau aus?
Wird der nächste Container dynamisch nachgeladen, oder geht es hier wirklich um Scrolling auf einer Seite?
Und geht das Scrolling nur in eine Richtung, also immer nur vorwärts (und zum Schluss zurück zum Ersten)?

Vielleicht kannst du dein Projekt mal zeigen, damit man sich die konkreten Anforderungen genauer vorstellen kann.

Das mit den Sprungankern ist schon gar nicht abwegig, du brauchst die ja quasi nur dynamisch erzeugen.
Aber wie viel Arbeit man sich hier sparen kann, hängt halt auch vom Rest deiner Seitenstruktur ab, arbeitest du mit AJAX, hast du auch PHP im Einsatz?

Viele Grüße

 

[Duddle]

AW: jQuery - Springe immer zum nächsten DIV

Naja, du springst immer zu "aktuelles Ziel + 1", ausser wenn diese Zahl das Maximum an vorhandenen Zielen übersteigt. In diesem Fall springst du zu 0.


Duddle

 

[mitstreiter]

AW: jQuery - Springe immer zum nächsten DIV

Im Moment hab ich noch kein Ajax drinnen. Aktuell setze ich mein PS-Design in HTML/CSS um.

Die Struktur entspricht dem was ich weiter oben schonmal angegeben habe. Die Divs sind bis aufs erste fest. Es gibt also aktuell nur 7 Container mit Inhalt + Btn. Der Btn im letzten Container springt ganz nach oben.

Ich denke, dass ich das erstmal pro Container machen werde, da ich ja noch ne Ajax funktion einbauen will.

Wenn der Container also im sichtbaren Bereich ist, er dann erst geladen wird.

 

[randacek_pro]

AW: jQuery - Springe immer zum nächsten DIV

Du musst das weder von AJAX abhängig noch für jeden Container einzeln machen

Sagen wir mal so: wenn du 7 Ziele hast, dann lässt du beim Klick des Next-Button eine JS-Aktion laufen, die einerseits hoch zählt und andererseits weiter scrollt, lädt, was auch immer.
Arrays zählen ja immer ab 0, also wenn der Zähler bei 6 ankommt machst du einfach eine Bedingung, dass dann wieder zum Zähler (und damit DIV) 0 gegangen wird.
Das ist eigentlich schon alles...

Viele Grüße

 

[mitstreiter]

AW: jQuery - Springe immer zum nächsten DIV

Ja, aber wenn ich z.B. runterscrolle, also per Hand, nicht durch Klickevent, dann möchte ich den jeweiligen Content laden lassen und den anderen eben ausladen. Keine Ahnung wie ich das machen kann. Bin kein jQuery Spezialist ^^.

 

[Duddle]

AW: jQuery - Springe immer zum nächsten DIV

Warum willst du den anderen Content "rausladen" beim Runterscrollen?
Entweder hast du jeweils x Container sichtbar und beim Klick werden diese durch die nächsten ersetzt, oder du scrollst runter und es werden dynamisch die nächsten drangehangen. Ein Mischen erscheint mir sehr unintuitiv.

Mir scheint es, dass du selbst noch nicht genau weißt was du willst, ergo kannst du das Problem nicht definieren und entsprechend auch die Lösung nicht finden.


Duddle

 

[fakerer]

AW: jQuery - Springe immer zum nächsten DIV

wenn du den Content wirklich immer laden willst kannst ja auch http://api.jquery.com/load/ verwenden.
Dabei lädst du immer von der gleichen Adresse wo du dir mit php (oder was auch immer immer den nächsten Content generierst.