jCarousel 0.2.8 - Display issue on Chrome due to 'undefined' index

[ThuongLe]

I recently ran into problem with jCarousel displays and functions perfectly fine on Firefox and IE, yet missing panel (blank), or weird index rotation when using Chrome browser. Using Chrome Developer Tool, I inspected the UL list and found that the first LI list item is invalid with the following class:

   <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-undefined jcarousel-item-undefined-horizontal"

That lead me to believe the indexing calculation was wrong, causing the result of call of creating LI wrong as well.

I didn't trace down the problem why the indexing is wrong, but I have a temporary fix to have an if-statement check to make sure the index is valid before creating the LI element.

add: function(i, s) {
            var e = this.get(i), old = 0, n = $(s);

            if (e.length === 0) {
                var c, j = $jc.intval(i);
                if (i) {  //  *** Adding this check to make sure index is valid first
                    e = this.create(i);
                    while (true) {
                        c = this.get(--j);
                        if (j <= 0 || c.length) {
                            if (j <= 0) {
                                this.list.prepend(e);
                            } else {
                                c.after(e);
                            }
                            break;
                        }
                    }
                }
            } else {
                old = this.dimension(e);
            }

I also change further in the code several instances where create() is called.

I know it's only a temporary fix rather an actual fix, but that gets by the problem with Chrome for now.

[jsor]

Hmh, sounds weird. Do you have circular wrapping enabled. Anyway, i'm currently rewriting jCarousel to address issues like this.

[ThuongLe]

Indeed. I am using 'circular' wrapping.
I am aware of the issue with cloning approach in circular wrapping. One of the problem I had and worked-around, was the panel already rendered with Cufon (font rendering via Canvas) and it doesn't display correctly when the panel is cloned. The workaround is stripped off the rendered code of Cufon, and re-trigger it to render again. This is being done via my function with in onBeforeAnimation setting:

itemVisibleInCallback: {
    onBeforeAnimation: mycarousel_itemVisibleInCallbackBeforeAnimation
}

But, I'm looking forward to new jCarousel update to address these issues. Thank you for the great utility. Great work!!

[franciskim]

I have a similar issue however I am using FancyBox's AJAX method to pull in a page with jCarousel on it. First li item would be jcarousel-item-undefined.