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.