Question

I am using jScrollPane for a simple website because I decided to go with a centered, fixed div with height of 600px. Everything works fine except when I added facebook comment, the scrollable dive does not wait for facebook comment block to load, so the comment box is not viewable!

I am calling the function to the scroll script inside the HEAD tag:

        <script type="text/javascript" id="sourcecode">
        $(function()
        {
            $('.scroll-pane').jScrollPane();
        });
       </script>

And here is the scripto the facebook comment box that is inserted immideatly after BODY tag:

        <div id="fb-root"></div>
    <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>

And here is the CSS that defines style for my scrollable DIV:

.scroll-pane
{
    width: 100%;
    height: 600px; 
    overflow: auto; 
}

As I said, the scrolled div works fine, But I think I should somehow make it to wait for that facebook comment box to load. Any suggestion is appriciated!

UPDATE

I found here that the scrolled div can check for dynamic content: dynamic content, but I have no idea where to put the follwoing code in my html file:

$(function()
{
    var settings = {
        showArrows: true
    };
    var pane = $('.scroll-pane')
    pane.jScrollPane(settings);
    var api = pane.data('jsp');
    var i = 1;
)};

Answer 1

Waiting for the fb comment box to be ready is not that easy, but you can a) wait for a fixed time and initialize the jScrollPane then, hoping that the fb box is ready by that time (like 1 or 2 seconds).

<script type="text/javascript" id="sourcecode">
$(function() {                        // <-- Wait for the DOM to be ready
    setTimeout(function() {
        // Now initialize the pane as before:
        $('.scroll-pane').jScrollPane();
    }, 1000);                         // <-- Waiting an additional 1000ms
});
</script>

Or b) if you want to got with the example for dynamic content (from that link you provided), you would just reinitialize the jScrollPane every 100ms or whatever:

<script type="text/javascript" id="sourcecode">
$(function() {
    // As you already did, initialize the scrollpane first:
    var pane = $('.scroll-pane');
    pane.jScrollPane();

    // Store an access handler (api) in a variable
    var api = pane.data('jsp');

    // Set timer to reinitialize the pane every 250ms
    setInterval(api.reinitialise, 250);
});
</script>