jScrollPane doesn't load on first try

Question

I seem to be having a problem that jScrollPane doesn't seem to load on the first try, maybe because my table has images, I don't know.

This is the demo

I tried all kinds of things such as this:

$(window).bind('load', function () {
    $('.scroll-pane').jScrollPane();
    $('.scroll-pane').jScrollPane({
        reinitialiseOnImageLoad: true
    });
});

To no avail :(! If anyone knows what's up, please let me know, thank youu!!

Answer 1

It actually works for me. But the jScrollPane appears with some delay. I think this is necause you have coded the initialization like this:

$(function() {
   $(window).bind('load', function()
   {
      $('.scroll-pane').jScrollPane();
   });
});

Binding to the event load will wait for all the page ressources to be loaded before executing (html, scripts, images, stylesheets...).

Is there a particular reason you binded the load event ?

You actually want to apply the jScrollPane to be initialized when your .scroll-pane element is ready so simply do this:

$(function() {
      $('.scroll-pane').jScrollPane();
});

---

Edit

I've debugged the page to check when was called jScrollPane().
I did not know that the table was actually loaded with ajax.

The problem is simple: your .scroll-pane does no exist when you call jScrollPane() !

When the page is "ready", here is what is executed:

• Start loading the table with:

  $('#whole-ajax-content-one').load('events.html', function() { ... });

• Executes the load event you binded (because the page has actually loaded, binding on window.load has nothing to do with your ajax loading of "events.html":

  $('.scroll-pane').jScrollPane();

  As your table is not yet loaded/created, $('.scroll-pane') is empty !

• Execute the callback of the .load() (with .tablesorter(), delegate(), etc)

Solution is to put your jScrollPane init code into the callback of the .load(). This will ensure your .scroll-pane element actually exists.

Note: I'm not 100% sure but it might work on successive reloads because browser caching is involved and by chance your table exists already when jScrollPanel() is executed.