2013-08-07 45 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> 

这是我失踪的关键。