Beim Betrachten des "Auswahlquelltextes" fällt mir allerdings auf, dass die Listen in DIV Nr.2 und Nr. 3 um zusätzliche Elemente erweitert wurden, die in Nr. 1 nicht aufgeführt werden. Ich finde keine Stelle, an der dies im Code passieren könnte.
Dadurch springt die Animation in DIV Nr. 3 leider nach "kurzer" Zeit an ungewünschte Stellen (von 2 auf 10 zurück).
Dabei seit: 19.06.2003 Ort: /dev/null Alter: 30 Geschlecht:
Verfasst Mo 07.02.2011 11:17 Titel
Ohne mir den Source genauer angesehen zu haben: circular : false sollte deine probleme lösen.
der slider erstellt, wenn du eine durchgehende Animation (also nicht von 1-10 und dann ende, sondern von 1-10 und dann wieder bei 1 startend) haben willst, kopien der ersten und letzten elemente in deinem carousel, damit keine lücken bei der animation entstehen.
Dabei seit: 07.04.2005 Ort: Bochum Alter: 33 Geschlecht:
Verfasst Mo 07.02.2011 11:45 Titel
Danke erstmal für den Hinweis, dass bei "circular" die Start- und Endelemente automatisch kopiert werden, dies war mir bis dato unbekannt.
Leider funktioniert die Anweisung circular:false nicht wie gewünscht, jetzt läuft die Animation in DIV Nr. 3 bis zum letzten Element durch, dort bleibt sie aber stehen, ebenso wird der Slide in DIV Nr. 1 nicht mehr angeschubst.
$div2.scrollable({
circular : true,
next : '.next2',
speed : 1000
});
// api für zweites scrollable
$apiDiv2 = $div2.data('scrollable')
.seekTo(start2,0);
$div3.scrollable({
circular : true,
next : '.next3',
speed : 1000,
});
// api für drittes scrollable
$apiDiv3 = $div3.data('scrollable')
.seekTo(start3,0);
setTimeout(function(){
// erstes scrollable: next funktion triggern
$apiDiv1.next();
/*
callbacks für zweites und drittes scrollable setzen:
würde man sie schon beim initialisieren setzen,
würde auch das callback sofort genutzt werden, da initial mit seekTo()
zur startposition gescrollt wird.
*/
$apiDiv2
.onSeek(function(){
setTimeout(function() {
$apiDiv3.next();
},1000)
});
$apiDiv3
.onSeek(function(){
setTimeout(function() {
$apiDiv1.next();
},1000)
});
},1000);
});
Zuletzt bearbeitet von sahnemuh am Mo 07.02.2011 13:47, insgesamt 1-mal bearbeitet
Dabei seit: 07.04.2005 Ort: Bochum Alter: 33 Geschlecht:
Verfasst Mo 07.02.2011 15:38 Titel
Danke für dein Beispiel, werd mich da erst noch in scrollable einarbeiten müssen, habe ich bis jetzt noch nie benutzt.
Was allerdings nicht so recht verstehe, warum man dem UL eine Breite von 9999em geben muss? Sobald ich die genaue Größe in px angebe funktioniert das Script nicht mehr.
Weiter hat es den selben Fehler, wenn man bspw. 60 Listeneinträge hat. Der/die Slider finden zwar das nächste Item, allerdings scrollen sie auch erst die ganze Liste durch (lokal und unter fiddle mit dem Code getestet).
Dabei seit: 19.06.2003 Ort: /dev/null Alter: 30 Geschlecht:
Verfasst Mo 07.02.2011 15:59 Titel
Warum solltest du die Breite anpassen wollen?
Es gibt einen Container mit einem Overflow: hidden. Darin befindet sich ein absolut positioniertes Element (das UL), welches bei jedem Scrollen um die breite "n" nach links animiert/verschoben wird. Dies geschieht so oft wie Elemente innerhalb des verschiebbaren Containers vorhanden sind.
Hier mal eine Skizze zum veranschaulichen:
Es gilt eigentlich: Je breiter das UL, desto besser. Mit mehr Breite sinkt die Wahrscheinlichkeit, dass Listenelemente innerhalb umbrechen können.
Die Beschreibung deines Problems mit dem "durchscrollen der ganzen Liste" kapiere ich nicht. Was soll denn genau wie funktionieren?
Zuletzt bearbeitet von sahnemuh am Mo 07.02.2011 16:00, insgesamt 1-mal bearbeitet
Dabei seit: 07.04.2005 Ort: Bochum Alter: 33 Geschlecht:
Verfasst Mo 07.02.2011 17:49 Titel
Hm , das mit dem UL klingt logisch, muss mich da heute abend nochmal ransetzen.
Zu dem Durchscrollen:
Einfach mal mit 60 List-Einträgen probieren, der zweiite Durchlauf im dritten Div erzeugt das "erste Durchscrollen", oder unter http://jsfiddle.net/A4u43/2/ schauen.
Dabei seit: 19.06.2003 Ort: /dev/null Alter: 30 Geschlecht:
Verfasst Di 08.02.2011 14:21 Titel
Willkommen in der lustigen Welt der jQuery Core Bugs.
jQuery hat in der animate Funktion im Core eine Beschränkung auf das animieren zu negativen Werten bis -10000px.
Im zum Bug gehörigen Ticket wird als Problemlösung vorgeschlagen die Core-Funktion nachträglich zu überschreiben:
Code:
$.fx.prototype.cur = function(){ // we are overwriting this function to remove limiting of the size of the
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.