2013-08-07 74 views
0

我正在使用博客,並且我想將一個JQuery滾動條放入主內容區域的div框中。我對JS很陌生,但我想我錯過了一些東西。開發者提供了一個腳本,但我不相信它是正確的。只是一個側面說明:所有的庫都加載在腳本之前,所以我不相信這是問題所在。以下是我目前有(減去所有的SQL廢話):實現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,因爲這是在div盒子我想太應用此。我檢查了所有其他的CSS和其他信息,以確保.content沒有被其他地方引用。

上傳腳本和所有其他相關信息到我的服務器後,我檢查了螢火蟲發現問題。

現在Firebug是給我這個錯誤:

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

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

我認爲螢火蟲說,它比我能。我沒有看到這裏定義的函數。我不確定如果必須包括它的功能是什麼。

+0

請告訴我們當前加載腳本和以什麼順序 – Spokey

+0

我編輯在所有的代碼添加。 – user2089405

回答

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> 

基本上我在。體添加和更改。內容因此它相當於我的主要樣式表。你真的不需要任何CSS以外的其他頁面:

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

這是我失蹤的關鍵。