2013-08-07 1 views
0

블로그로 작업 중이며 주 콘텐츠 영역의 div 상자에 JQuery 스크롤 막대를 배치하고 싶다. 나는 JS에 익숙하지 만 나는 뭔가를 놓쳤다 고 생각한다. devs는 스크립트를 제공했지만 나는 그 말이 맞다고 믿지 않습니다. 그냥 부수적 인 점은 : 스크립트가로드되기 전에 모든 라이브러리가로드되므로 문제가있는 곳이 아닌 것 같습니다. 그게 내가 너무이를 적용하기 위해 노력하고있어 사업부 상자이기 때문에JQuery Scrollbox 구현하기 - 함수 수정하기 - 어떻게해야할지 모르겠다.

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<link href="../css/Styles.css" rel="stylesheet" type="text/css" /> 
<link href="../css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css"> 
</head> 

<body> 
<div class="BKlayer2"> 
    <img src="../Images/BKlayer2.png" /> 
     <div class="InnerContent1"> 
      <img src="../Images/innerContent1.png" /> 
</div> 
     <div class="innerContent2"> 
      <img src="../Images/innerContent2.png" /> 
    </div> 
     <div class="Feedback"> 
      <img src="../Images/Feedblockbk.png" /> 
    </div> 

<div id="blog_Posts"> 
<?php do { ?> Updated on: <?php echo $row_displayBehaviors['formatted']; ?><br /> 
     <br /> 
    <?php echo $row_displayBehaviors['title']; ?> 
     <br /> 
     <br /> 
     <?php echo $row_displayBehaviors['blog_entry']; ?> 
     <p>&nbsp;</p> 
    <?php } while ($row_displayBehaviors = mysql_fetch_assoc($displayBehaviors)); ?> 
</div> 
<?php 
mysql_free_result($getArchives); 

mysql_free_result($displayBehaviors); 
?> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="jquery.mCustomScrollbar.concat.min.js"></script> 
<script> 
    (function($){ 
     $(window).load(function(){ 
      $(".blog_Posts").mCustomScrollbar(); 
       theme:"light" 
     }); 
    })(jQuery); 
</script> 
</body> 
</html> 

내가 .blog_Posts에 .content 변경 : 여기 전류 (MINUS 모든 SQL 쓰레기)를 가지고있는 것입니다. 다른 모든 CSS 및 추가 정보를 확인하여 .content가 다른 곳에서 참조되지 않았는지 확인하십시오.

스크립트 및 기타 관련 정보를 내 서버에 업로드 한 후 방화 벽을 점검하여 문제를 확인했습니다.

이제 불을 지르고 날이 오류를주고있다 :

TypeError: $(...).mCustomScrollbar is not a function 
[Break On This Error] 

$(".blog_Posts").mCustomScrollbar(); 

내가 불을 지르고는 내가 할 수있는 것보다 더 잘했다 생각합니다. 여기에 정의 된 함수를 보지 못했습니다. 나는 그것이 포함 되어야만한다면 기능이 무엇인지 정확히 알지 못한다.

+0

어떤 스크립트를로드하고 어떤 순서로 표시하십시오. – Spokey

+0

모든 코드를 추가하도록 편집하십시오. – user2089405

답변

0

jQuery 플러그인 스크립트가 포함되어 있지 않은 것처럼 들립니다.

mCustomScrollbar은 jQuery의 일부가 아니므로 플러그인을 참조해야합니다.

이 얘기하는 플러그인 같은 소리는 거기에서 스크립트 참조를 포함 http://manos.malihu.gr/jquery-custom-content-scroller/

0

나는 그것을 알아 냈다. 누구든지 알고 싶은 경우 :

나는 데모 스크립트를 뒤집어서 알아 냈습니다. 기본적으로 내가하지 않은 것은 CSS가 줄 지어 있었고 올바른 디렉토리에 스크립트가 없었습니다. 적절한 스크립트로

는 :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/minified/jquery-1.9.1.min.js"%3E%3C/script%3E'))</script> 
<!-- custom scrollbars plugin --> 
<script src="jquery.mCustomScrollbar.concat.min.js"></script> 
<script> 
(function($){ 
$(window).load(function(){ 
$(".body,.content").mCustomScrollbar({ 
scrollButtons:{ 
enable:true 
} 
}); 
}); 
})(jQuery); 
</script> 

는 기본적으로 나는에 .body에 추가 내 주요 스타일 시트에 해당하므로 .content을 변경했습니다. 이 페이지 이외의 다른 페이지에 CSS가 필요하지 않습니다.

<style> 
body>.mCustomScrollBox>.mCSB_scrollTools{top:2%; height:96%;} 
</style> 

이것이 내가 누락 된 핵심입니다.

관련 문제