 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Martys
Threadersteller
Dabei seit: 07.04.2005
Ort: Bochum
Alter: 45
Geschlecht: 
|
Verfasst Mo 07.02.2011 09:25
Titel jQuery bei .clone() entstehen unerwünschte Elemente |
  |
|
Hallo zusammen,
ich habe ein kleines Problem mit dem Slider jCarousel Lite.
Zum Aufbau:
Drei DIVs, Nr. 1 beinhaltet eine Liste von x Einträgen.
Diese Liste wird mittels .clone() in DIV Nr. 2 und Nr. 3 "kopiert".
| Code: |
$("div#box div.eins ul").clone().appendTo('div.zwei');
$("div#box div.eins ul").clone().appendTo('div.drei');
|
Nun wird die Anzahl der Listenelemente ermittelt (length) und der jeweilige Startwert der einzelnen DIVs ermittelt.
| Code: |
var anzahl = $("div#box div.eins ul li").length;
var start1 = 0;
var start2 = Math.round(anzahl/3);
var start3 = Math.round(anzahl - start2);
|
Konfiguration der drei DIVs:
| Code: |
$("div#box div.eins").jCarouselLite({
btnNext: ".next1",
btnPrev: ".prev1",
visible: 1,
auto: 0,
start: start1,
speed: 1000,
afterEnd: function() {
setTimeout("$('.next2').trigger('click');", 1000);
}
});
$("div#box div.zwei").jCarouselLite({
btnNext: ".next2",
btnPrev: ".prev2",
visible: 1,
auto: 0,
start: start2,
speed: 1000,
afterEnd: function() {
setTimeout("$('.next3').trigger('click');", 1000);
}
});
$("div#box div.drei").jCarouselLite({
btnNext: ".next3",
btnPrev: ".prev3",
visible: 1,
auto: 0,
start: start3,
speed: 1000,
afterEnd: function() {
setTimeout("$('.next1').trigger('click');", 1000);
}
});
|
Nach dem Laden der Seite wird die erste Listenanimation gestartet:
| Code: |
window.setTimeout("$('.next1').trigger('click');",1000);
|
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).
LIVE-Beispiel unter http://www.martys.de/silder-prob/
Hat jemand vielleicht einen Tipp für mich, wie ich das Problem beheben kann oder wodurch die "zusätzlichen" Listeneinträge auftauchen?
Vielen Dank schon mal,
Martys
|
|
| |
   |
 |
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
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.
|
|
| |
|
|
|
Anzeige
|
|
|
Martys
Threadersteller
Dabei seit: 07.04.2005
Ort: Bochum
Alter: 45
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.
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Mo 07.02.2011 13:46
Titel
|
|
|
ich hab's dir mal flugs mit scrollable von jQuery tools nachgebaut - da ist die api eindeutig besser (und es ist ähnlich klein).
Siehe hier: http://jsfiddle.net/A4u43/
Hier noch das JS mit ein wenig kommentar-shizzle für den lerneffekt.
| Code: | $(document).ready(function(){
// container in variablen speichern (caching)
$box = $('#box');
$div1 = $box.find('div.eins');
$div2 = $box.find('div.zwei');
$div3 = $box.find('div.drei');
// startpunkte festlegen
var anzahl = $div1.find('li').length;
var start2 = Math.round(anzahl/3);
var start3 = Math.round(anzahl - start2);
// weitere container mit markup befüllen
$listMarkup = $div1.html();
$($div2).html($listMarkup);
$($div3).html($listMarkup);
// scrollables initialisieren
$div1.scrollable({
circular : true,
next : '.next1',
speed : 1000,
onSeek : function() {
setTimeout(function() {
$apiDiv2.next();
},1000)
}
});
// api für erstes scrollable
$apiDiv1 = $div1.data('scrollable');
$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
|
|
| |
|
|
Martys
Threadersteller
Dabei seit: 07.04.2005
Ort: Bochum
Alter: 45
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).
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
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
|
|
| |
|
|
Martys
Threadersteller
Dabei seit: 07.04.2005
Ort: Bochum
Alter: 45
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.
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
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
if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
return this.elem[ this.prop ];
}
var r = parseFloat( jQuery.css( this.elem, this.prop ) );
return typeof r == 'undefined' ? 0 : r;
} |
Angewandt sieht das Ganze dann so aus:
http://jsfiddle.net/A4u43/4/
... und ... funktioniert 
. ( Für die Recherche nach dem Scheiß hätte ich mir eigentlich ne Kiste Bier verdient. Andererseits: Wieder was gelernt.  )
€: Oder jQuery 1.5 benutzen. Da wurde der Bug behoben 
Zuletzt bearbeitet von sahnemuh am Di 08.02.2011 14:29, insgesamt 3-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[jQuery UI] Sortable + clone
Web Application - Elemente Jquery
jQuery - folgende Elemente ansprechen
[jQuery] - Elemente automatisch anzeigen
Illustrator Pausfunktion entstehen Blitzer
Technocrati Clone möglich?
|
|
|
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.
|
|
