Здравствуйте!
Вчера решил установить на тестовый сайт скроллбар на jQuery.
Скачал необходимые файлы (плагин JScrollPane 2), подключил их
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Zooty Premium HTML Template</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<link rel="text/css" href="stylesheets/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="javascripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
<script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($){
$(function()
{
$('#Content').jScrollPane({showArrows: true});
});
});
</script>
</head>
<body>
<div class="site">
<div class="band">
<div class="container">
<div class="sixteen columns">
<img src="images/logo.png" class="logo">
</div>
</div><!--end container-->
</div><!--end band-->
<div class="band main">
<div class="container">
<div class="ten columns main">
<div class="scroll-pane">
<div class="profile_img">
<img class="profile" src="images/profile.png" />
</div>
<h3>Adam Moran</h3>
<h4>Web designer</h4>
<p>Skeleton is a small collection of well-organized CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, tabs, forms and media queries. Go ahead, resize this super basic page to see the grid in action.Skeleton is a small collection of well-organized CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, tabs, forms and media queries. Go ahead, resize this super basic page to see the grid in action. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, tabs, forms and media queries. Go ahead, resize this super basic page to see the grid in actionCSS for typography, buttons, tabs, forms and media queries. Go ahead, resize this super basic page to see the grid in action. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, tabs, forms and media queries. Go ahead, resize this super basic page to see the grid in action</p>
</div>
</div>
<div class="four columns sidebar">
<ul>
<li><a href="#"><h4>Profile</h4></a></li>
<li><a href="#"><h4>Resume</h4></a></li>
<li><a href="#"><h4>Folio</h4></a></li>
<li><a href="#"><h4>Contact</h4></a></li>
</ul>
</div>
</div><!--end container-->
</div><!--end band-->
</div><!--end site-->
<!-- JS
================================================== -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="javascripts/tabs.js"></script>
<!-- End Document
================================================== -->
</body>
</html>
Но в результате у меня появился только обычный скроллбар вместо jQuery.
Пробовал удалять строки вызова jQuery
<script type="text/javascript" src="javascripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
<script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
Но ничего не менялось. Вывод - не работает сам скрипт!
Что я сделал не так?
Заранее благодарен!
P.S. дизайн не закончен, сделал только базовый "скелет" так сказать
Сайдбар будет не такой уродливый
