mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mo 01.06.2020 18:06 Benutzername: Passwort: Auto-Login

Thema: jQuery bei .clone() entstehen unerwünschte Elemente vom 07.02.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> jQuery bei .clone() entstehen unerwünschte Elemente
Seite: 1, 2  Weiter
Autor Nachricht
Martys
Threadersteller

Dabei seit: 07.04.2005
Ort: Bochum
Alter: 41
Geschlecht: Männlich
Verfasst Mo 07.02.2011 09:25
Titel

jQuery bei .clone() entstehen unerwünschte Elemente

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 38
Geschlecht: Männlich
Verfasst Mo 07.02.2011 11:17
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Martys
Threadersteller

Dabei seit: 07.04.2005
Ort: Bochum
Alter: 41
Geschlecht: Männlich
Verfasst Mo 07.02.2011 11:45
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 38
Geschlecht: Männlich
Verfasst Mo 07.02.2011 13:46
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Martys
Threadersteller

Dabei seit: 07.04.2005
Ort: Bochum
Alter: 41
Geschlecht: Männlich
Verfasst Mo 07.02.2011 15:38
Titel

Antworten mit Zitat Zum Seitenanfang

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).
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 38
Geschlecht: Männlich
Verfasst Mo 07.02.2011 15:59
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Martys
Threadersteller

Dabei seit: 07.04.2005
Ort: Bochum
Alter: 41
Geschlecht: Männlich
Verfasst Mo 07.02.2011 17:49
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 38
Geschlecht: Männlich
Verfasst Di 08.02.2011 14:21
Titel

Antworten mit Zitat Zum Seitenanfang

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 * huduwudu! *




.* Ööhm... ja? *( Für die Recherche nach dem Scheiß hätte ich mir eigentlich ne Kiste Bier verdient. Andererseits: Wieder was gelernt. Grins )

€: Oder jQuery 1.5 benutzen. Da wurde der Bug behoben * Wo bin ich? *


Zuletzt bearbeitet von sahnemuh am Di 08.02.2011 14:29, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen [jQuery UI] Sortable + clone
jQuery - folgende Elemente ansprechen
[jQuery] - Elemente automatisch anzeigen
Web Application - Elemente Jquery
Illustrator Pausfunktion entstehen Blitzer
Technocrati Clone möglich?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


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.