[jQuery] bug and fix

[xCunkox]

Hi,

There is a bug when width of all items (images) to be shown is less
than width of area in which they are to be shown.

For example, there is space for 5 images without scrolling but I have
only 3 images present.

To reproduce the bug, please use this simple example from
documentation (and of course use uncompressed version of the library):

http://sorgalla.com/projects/jcarousel/examples/static_simple.html

And edit static_simple.html so that list has only 2 images instead of
10.

So replace this:

<ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/
66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/
75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/
57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/
77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/
58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/
72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/
58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/
69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/
60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/
70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
  </ul>

with this:

<ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img src="http://static.flickr.com/
66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/
75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
  </ul>

Load the page, and here you go - nasty javascript error, as reported
by Firebug (also this error has a side effect which disables, if they
are present, jCarousel on other elements on the page):

,,el has no properties (jquery.jcarousel.... (line 793) )
 el.offsetWidth + $jc.margin(el, 'marginLeft') + $jc.margin(el, '...

el has no properties (jquery.jcarousel.... (line 793) )
 el.offsetWidth + $jc.margin(el, 'marginLeft') + $jc.margin(el, '...
,,


It seems that jCarousel doesn't calculate  the real number of items
(images) but it calculates how many items could fit and then assumes
that this is real number of items.

Since this kind of content if often dynamical (from database) it is
quite possible that in some situations there will be only few items
(images).


Anyway, here is the fix! :)


Find this lines in jcarousel lib (it starts at the line: 581)

if (j > last) {
                visible = 0, j = last, v = 0;
                while (++visible) {
                    v += this.dimension(this.get(j--));
                    if (v >= clipping)
                        break;
                }
            }

And replace it with this:

if (j > last) {
                visible = 0, j = last, v = 0;
                while (++visible) {

       var el=this.get(j--);
       if( typeof(el.get(0)) == 'undefined' )
                       break;


                    v += this.dimension(el);
                    if (v >= clipping)
                        break;
                }
            }


Enjoy! :*