동적으로로드 된 내용이있는 jScrollpane

Question

좋아요, 그래서 웹 사이트에서 작업 중이며 현재 인덱스 페이지에 "shoutbox"가 있습니다. 그러나 다른 .php 파일에서 소리를 불러오고 있습니다. 문제는 스크롤바가 나타나지만 실제로 스크롤 할 수는 없습니다. 현재 DB에로드 된 6 개의 샤웃트가 있지만 4 개만 볼 수 있으며 더 이상 스크롤 할 수 없습니다.

당신이 직접 문제를 체크 아웃 할 경우, 당신은 4 볼 만 할 수 있습니다하지만 난 당신이 (6)가 말씀 드릴 수 있습니다 (진행 중) http://ecazs.net/beerandguns/index.php

사이트에 대한 링크입니다!

이것은 외침을로드하는 데 사용하는 코드입니다.

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

는 그리고 이것은 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> 

몸이 끝나기 전에 내가 다음 JScrollPane의 기능을 사용하고의 "주"HTML입니다. 그래서 먼저 jScrollpane 다음에 내용을 로딩합니다.

이 문제를 해결하는 방법에 대한 아이디어가 있으시면 정말 도움이 필요합니다. 알려 주시면 알려주세요.

Answer 1

귀하의 HTML은 JScrollPane의 좋은하지 않습니다.

#chat에는 두 개의 .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에 두 개의 div.jspContainer와 두 개의 div.jspPane이 포함되어 있으면 먼저 div 요소의 클래스에서 클래스를 제거하지 않으면 작동하지 않습니다. 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에서는 두 번째 div.jspContainer의 높이가 327px입니다. 그래서 jScrollPane은 보여줄 내용이 더 이상 없다고 생각합니다. 내 줄 3과 4에 해당하는 라인에서 클래스 jspContainer와 jspPane을 제거하고 js를 수정하면됩니다. 그렇게 생각하면됩니다.

Answer 2

글쎄, jScrollPane()은 페이지의 끝에 코드를 놓기 만하면 내용이 실제로로드 된 후에 호출 될 수 있습니다. 두 코드는 모두 DOMready 이벤트 처리기에 배치되므로 DOM이로드되는 즉시 종료됩니다. 나는 실행 계획이 내기 :

1. 는
2. 는
이
3. 로드

을 완료 그리고이 내용이 비어 있기 때문에 JScrollPane의 플러그인이 제대로 초기화하지 않습니다 추측 JScrollPane의 실행 .messages에 주먹 부하를 시작 . 플러그인 자체에 대해 많이 알지는 못 하겠지만 어쨌든 스크롤 막대를 업데이트하기 위해 내용이 변경되면 어쨌든 새로 고침해야한다고 생각합니다. 내용이 실제로로드 할 때 JScrollPane의 초기화 확인합니다 .load() 함수의 콜백을 사용

:

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