jScrollpane with dynamically loaded content, not scrolling

Question

Alright, so I'm working on a website and currently I have a "shoutbox" at the index page however I'm loading the shouts from another .php file the problem is that the scrollbars shows up but I can't actually scroll, at the moment there are 6 shouts in the DB that are being loaded but I can only see 4 and I can't scroll down any more.

If you want to check out the problem for yourself here is the link to the site (work in progress) http://ecazs.net/beerandguns/index.php

You are only able to see 4 but I can assure you there are 6!

This is the code I use to load shouts.

$(document).ready(function(){
            $('.messages').fadeIn("slow").load('shoutbox/load.shouts.php');
            setInterval(function() {
                $(".messages").load("shoutbox/load.shouts.php");
            }, 2000);
        });

And this is the "main" HTML of the shoutbox

<div id="chat" class="jspScrollable">
<div class="jspContainer" style="width: 620px; height: 327px;">
    <div class="jspPane" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 600px; top: 0px; ">
        <form action="" method="post" class="shout">
            <p>
                <label for="message" class="msglabel">Message:</label>
            </p>
            <p>
                <textarea name="message" id="message" class="msgfield" rows="2" cols="95"></textarea>
            </p>
            <p>
                <input type="image" name="submit" src="ext/images/submit_btn.png" value="" class="submit" onmouseover="this.src = 'ext/images/submit_btn_hover.png';" onmouseout="this.src = 'ext/images/submit_btn.png';"/>
            </p>
        </form>
    <div class="messages"></div>
</div>

I'm then using the jScrollpane function before body ENDS. So I'm first loading the content then the jScrollpane.

$(function(){
            $('#chat').jScrollPane();
        });

I really need help with this, if you have any ideas on how to solve this or improve it then please, please let me know.

Answer 1

Your HTML is not good for jScrollPane.

You have two .jspContainer and .jspPane in #chat.

Just remove the classes jspContainer and jspPane for the elements in the first div.jspPane

And you have to use the callback function for load, to tell the jScrollPane the content changed. your js should be something like :

 //caching element
 var messages = $('.messages'), chat = $('#chat');
 messages.fadeIn("slow");
 var loadChatContent = function() {
    messages.load('shoutbox/load.shouts.php', chat.jScrollPane);
 }
 loadChatContent();
 setInterval(loadChatContent, 2000);

--- update

I's a JS replacement for the one you show us :

$(document).ready(function() {
     //caching element
     var messages = $('.messages'), chat = $('#chat');
     messages.fadeIn("slow");
     var loadChatContent = function() {
        messages.load('shoutbox/load.shouts.php', chat.jScrollPane);
     }
     loadChatContent();
     setInterval(loadChatContent, 2000);
});

In your website ( not the code you shown ) your html contains two div.jspContainer and two div.jspPane, it will not work if you don't remove class from the elements in you first div.jspPane Your code :

<div style="width: 640px; height: 327px;" class="jspContainer">
    <div style="padding: 5px 10px; width: 600px; top: 0px;" class="jspPane">
        <div class="jspContainer" style="width: 620px; height: 327px;">
            <div class="jspPane" style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 600px; top: 0px; ">                    
            </div>
        </div>
        <div class="jspVerticalBar">
            <div class="jspCap jspCapTop"></div>
            <div style="height: 327px;" class="jspTrack">
                <div style="height: 318px;" class="jspDrag">
                    <div class="jspDragTop"></div>
                    <div class="jspDragBottom"></div>
                </div>
            </div>
            <div class="jspCap jspCapBottom"></div>
        </div>
    </div>
</div>

jScrollPane will accord the scroll with the height of the content of the first div.jspPane, but in your div.jspPane, you have a second div.jspContainer which have 327px for height. So jScrollPane consider that there is no more content to show. Just remove classes jspContainer and jspPane on line corresponding to my lines 3 and 4, and modify your js, i think it can work like that.

Answer 2

Well, you cannot ensure the jScrollPane() is called after the content has actually loaded by simply placing the code at the end of the page. Both codes are placed in the a DOMready event handler so they are in the end both executed right away as soon as the dom is loaded. I bet the execution plan is:

1. initiate fist load in .messages
2. execute jScrollPane
3. load finishes

And I guess the jScrollPane plugin does not initialize correctly because the content is empty. I don't know much about the plugin itself but I suppose you'd have to refresh it anyway if the content changes to update the scrollbars.

Using the callback of the .load() function will ensure you initialize the jScrollPane when the content has actually loaded:

$(".messages").load("shoutbox/load.shouts.php", function() {
    $('#chat').jScrollPane();
});