Question

I am having some problems to reinitialise the horizonal jScrollPane. When the page loads 4 images are loaded dynamically, and when the user scrolls in the panel the next 4 images should be displayed, this doesnt happen, the next images are there but the size of the .jspPane stays the same, so it doesnt allow to scroll the bar anymore.

Here is the code:

$(function()
        {
            var pane = $('.scroll-pane');
            pane.jScrollPane({showArrows: true,autoReinitialise: true});
            var contentPane = pane.data('jsp').getContentPane();
            var api = pane.data('jsp');
            var $rowItems = $('<p></p>');
            var showItems = 4;
            var startItem = 0;
            var itemWidth = 100;

            contentPane.append($rowItems)

            getThumbnails(startItem);

             pane.scroll(function(){
                var paneWidth = $(this).width();
                var contentWidth = $rowItems.width();
                var scrollPosition = Math.abs(parseInt($('.jspPane').css('left')));
                console.log(contentWidth - paneWidth - scrollPosition);
                if ((contentWidth - paneWidth - scrollPosition) < 10){                      
                    startItem = startItem + showItems;
                    getThumbnails(startItem);
                }
            })

            function getThumbnails(n){
                $.ajax({
                    url : 'items.xml',
                    success : function(data){                   
                        for( var i = n; i< n + showItems; i++){
                            $rowItems.append('<a href="'+ $(data).find('item').eq(i).attr('thumb') +'" id="pic'+ i +'"></a>');
                            loadImageThumb($(data).find('item').eq(i).attr('thumb'), $(data).find('item').eq(i).attr('imageUrl'),$(data).find('item').eq(i).find('description').text(), i);                 

                        }

                    }               
                })
            }

            function loadImageThumb(thumb, img, description, i){                    
                var image = new Image();                                                    
                $(image).load(function(){
                    var height = 80,
                        $pic = $('#pic'+ i, $rowItems),
                        imgURL = $pic.attr('href');                                
                    $pic.attr('href',imgURL);                           
                    $(this).appendTo($pic).hide().fadeIn('slow');

                }).attr('src', thumb);

            }


        });

I used similar code for a vertical scrollPane and it did work.
Thanks very much for your help in advance.

Answer 1

I found a solution for my problem.
The width on every element is necessary.