jScrollpaneはスクロールしないでコンテンツを動的に読み込みます

Question

申し訳ありません。ウェブサイトで作業していますが、現在インデックスページに「shoutbox」がありますが、別の.phpファイルからシャウトを読み込んでいます。スクロールバーが表示されますが、実際にスクロールすることはできません。現在、ロード中のDBには6つの叫びがありますが、私は4つしか見ることができず、もうスクロールできません。

あなたがここにあなた自身のために問題をチェックしたい場合は、サイトへのリンク（作業中）http://ecazs.net/beerandguns/index.php

あなたはわずか4を参照することができますが、私は6があるを保証することができますです！

これは私がシャウトを読み込むために使用するコードです。

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

そして、これは私がその後、身体が終了する前にJScrollPaneの機能を使用してい一言ボックスの "メイン" HTML

<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> 

です。だから私は最初にjScrollpaneの内容を読み込んでいます。

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

私は本当にあなたがこれを解決したり、それを改善する方法上の任意のアイデアを持っている場合は、その後、私に知らせてくださいしてください、これで助けが必要。

Answer 1

あなたのHTMLは、JScrollPaneのために良いではありません。

#chatには2つの.jspContainerと.jspPaneがあります。

ただ、最初div.jspPane

内の要素のクラスjspContainerとjspPaneを削除して、あなたは内容が変更されたJScrollPaneを伝えるために、負荷のためのコールバック関数を使用する必要があります。 あなたのJSのようなものでなければなりません：あなたが示した（あなたのウェブサイトではないコードを

$(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); 
}); 

：

//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); 

---更新

を私はあなたたちをいずれかのJSの交換を示しています）あなたのhtmlには2つのdiv.jspContainerと2つのdiv.jspPaneが含まれています。最初のdiv.jspPaneからクラスを削除しないと機能しません コード：

<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はスクロールに最初のdiv.jspPaneのコンテンツの高さを割り当てますが、div.jspPaneには高さが327pxの2番目のdiv.jspContainerがあります。したがって、jScrollPaneは、表示するコンテンツがないとみなします。私の3行目と4行目に対応するjspContainerクラスとjspPaneクラスを削除し、jsを変更してみてください。

Answer 2

まあ、実際にページの最後にコードを配置するだけで、コンテンツが実際に読み込まれた後にjScrollPane（）が呼び出されることは保証できません。両方のコードは、DOMreadyイベントハンドラに配置されるため、DOMのロード直後に両方のコードがすぐに実行されます。私は、実行計画がある賭ける：

1. はJScrollPaneに
2. 負荷が

を終了し、コンテンツが空であるので、私はJScrollPaneのプラグインが正しく初期化されません推測実行.messages

に拳ロードを開始します。私はプラグイン自体についてはあまりよく分かりませんが、コンテンツがスクロールバーを更新するように変更された場合は、それを更新する必要があると思います。コンテンツが実際にロードされたときにJScrollPaneの初期化を保証します.load()機能のコールバックを使用して

：

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