[JS] IE7/8 Clone/Append probleem

[TheRzr]

Laatste weken ben ik bezig geweest een groot probleem op IE7/8 op te lossen. Ik werk momenteel met jQuery 1.2.6 (Drupal) en ik gebruik de .clone() functie gevolgd door meerdere .append() functies.

Ik ben bezig met een carrousel met plaatjes, waarin de verscheidene plaatjes vijf keer gekopieerd worden. Aan deze plaatjes zitten twee events gekoppeld namelijk, mouseover en click Deze plaatjes hebben een '.mouseover()' en een '.click()' event. Wanneer ik .clone() gebruik en alles met .append() aan elkaar plak, ziet het er goed uit in FF, Chrome en Safari. Maar in IE7/8 werkt het duidelijk niet.

Concluderend zijn er 2 problemen na die acties:

1.De imageslider wordt vijf keer gekopieerd en IE laat alleen de eerste zien die gekopieerd is.De andere drie zijn wel zichtbaar aangemaakt in de source code maar niet op het scherm. In de functie zit een onderdeel dat de correcte width waarde berekend en toepast op de div. Jammer genoeg, gebeurd dat wel in andere browsers maar niet in IE.

2.
Een nog belangrijker probleem is eigenlijk: dat bij de carrousel die al een keer gekopieerd is, ook de events niet gekopieerd worden. In IE ontwikkel tools zie ik dat het jQuery1232434 (elk nummer mogelijk) attribuut als waarde op 'null' staat in de diepte naar alle children elementen. En ja ik heb .clone(true) gebruikt.

Ik zou niet weten waar het probleem uberhaupt zit, en dus weet ik ook niet hoe het op te lossen is. Hieronder de source code voor het kopieren en aankoppelen:

JavaScript:

  if (width > 1280)

        {

            var newWidth;

            //Copy content of scrolling div

            var thumbImages = $("div").clone();

            

            for (var i = 0; i < 4; i++)

            {

                var lefArrCount = 1;

                thumbImages.children().each(function()

                {

                    //Change left values from images

                    newWidth = width * (i + 1);

                    var cssLeft = leftArray[lefArrCount] + newWidth;

                    $(this).css("left", cssLeft+'px');

                    lefArrCount++;

                });

                lefArrCount = 1;

                 

                 //Append code, IE fails on taken over handlers (also with .clone(true))

                $("div").append(thumbImages[0].innerHTML);

            }

 

            //Edit total width (IE fails and sets the width to width * 2)

            $('div').css("width", (newWidth + width));

        }

        

        //Add the srcolling functionality on the DIV.

        $(function() {

            $("div").smoothDivScroll({

                scrollingSpeed: 12, 

                mouseDownSpeedBooster: 3

            });

        });

}

[Bosmonster]

Heb je een testcase? Wat zijn je eigen debug-ervaringen? (bijvoorbeeld is die newWidth wel goed gevuld in IE?)

[TheRzr]

Die newWidth is al getest d.m.v. alert boxes in IE voor en na alle berekeningen.

totalWidth = newWidth + width
alert(totalWidth);
$('div').css("width", (newWidth + width));
alert(totalWidth);
Deze alert geeft tweemaal de correcte waarde terug zoals gewenst is, maar bij de toekenning gaat iets mis in enkel IE.

Ook harde getallen, zoals de waarde die gewenst is, mocht niet baten. Bij bijvoorbeeld het getal 16.000 als width hard toekennen wilde het ook niet lukken.

Verder zijn er een hoop andere test situaties geprobeerd, met een negatief resultaat als gevolg.

[Kiphaas7]

Niet echt perse een oplossing, maar 1.2.6 is al behoorlijk verouderd. Er bestaat een module die je jquery update naar 1.3.2

http://drupal.org/project/jquery_update

[Bosmonster]

Tenzij je een Drupal 5 installatie gebruikt.

Gelukkig gaan ze dit "systeem" in Drupal 7 enigszins verbeteren, want het is natuurlijk te belachelijk voor woorden dat je door een CMS vastzit aan een verouderde Javascript-library.