Получение jquery прокрутки для работы с jquery jscrollpane

У меня возникли некоторые реальные проблемы, пытаясь заставить jQuery Scrollable работать вместе с jQuery jScrollPane. Я могу заставить их работать независимо на своих страницах, но не вместе.

Лучшее, что я сделал, можно найти по моей ссылке на исходный код. Но по какой-то причине скольжение моих дивов просто не работает. Вместо этого вы можете увидеть ссылку, потому что, когда я пытался вставить сюда код, он просто не правильно отформатировал...

http://www.studiorav.co.uk/demo.zip

Вот мой HTML-код

<head>
<title>test site</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<meta name="keywords" content="" />
<meta name="description" content="" />

<link rel="stylesheet" type="text/css" href="css/test.css" />

<!-- styles needed by jScrollPane -->
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />

<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script> 

<script> 
// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {
// initialize scrollable
$(".scrollable").scrollable().navigator({
    navi:'#main-nav'
});

});
</script> 

<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>

<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.jscrollpane.js"></script>

<script type="text/javascript"> 
$(document).ready(function()
{
$('.content').jScrollPane();
});
</script>

</head>
<body>
<!-- open wrap -->
<div id="wrap">

<!-- open navigation -->
<div id="navigation">
<ul id="main-nav" class="navi">
<li class="active"><a href="#home" alt="home">Home</a></li>
<li><a href="#menu" alt="menu">Menu</a></li>
</ul>
</div>
<!-- close navigation -->

<!-- open container -->
<div id="container">

<!-- open scrollable -->
<div class="scrollable">

<!-- open items -->
<div class="items">

<!-- first slide -->
<div>   
<!-- open panel -->
<div class="panel lp">

<!-- open content -->
<div class="content">
<p>1-1Lorem ipsum ius ea diam eripuit reprehendunt. Quo id prima ipsum, et facete scaevola sensibus sea. Eos numquam salutandi definitiones no, postea iudicabit in pro. Velit splendide in eos, vero fabellas ei sea, has ad unum harum. Pri nulla malorum labores at.</p>

<p>Ad minim labores delectus sed, in adhuc elitr convenire sed, has zzril oportere te. Ad pro option discere, sed ut lorem virtute. Et qui tritani impedit complectitur. Aperiri tamquam sapientem eu est.</p>

<p>Ius ne detracto urbanitas consectetuer, vix cu dignissim instructior, qui ludus laboramus deseruisse at. Timeam officiis iudicabit sed at, cu ius malis sonet inermis. Affert gloriatur intellegebat ne mel, ex eam alii gloriatur, augue volumus detraxit cu cum. Pro justo corpora ne, no pri affert phaedrum scripserit, percipit expetenda est ex. Cu nam quod liber.</p>

<p>Dicam postulant eum in, everti mollis id mel, cu odio definitiones vis. His ad altera oporteat, cum mediocrem reprehendunt cu. Suavitate tincidunt ne mei, vim munere postulant constituto ut, usu nemore admodum no. Civibus salutatus ei pro, ne sit mutat causae vulputate. Vocent eligendi ad vix, delenit euripidis vel ad.</p>

<p>Dicam postulant eum in, everti mollis id mel, cu odio definitiones vis. His ad altera oporteat, cum mediocrem reprehendunt cu. Suavitate tincidunt ne mei, vim munere postulant constituto ut, usu nemore admodum no. Civibus salutatus ei pro, ne sit mutat causae vulputate. Vocent eligendi ad vix, delenit euripidis vel ad1.</p>
</div>
<!-- close content -->

</div>
<!-- close panel -->
</div>
<!-- end first slide -->

<!-- second slide -->
<div>   
<!-- open panel -->
<div class="panel lp">

<!-- open content -->
<div class="content">
<p>2-2Ad minim labores delectus sed, in adhuc elitr convenire sed, has zzril oportere te. Ad pro option discere, sed ut lorem virtute. Et qui tritani impedit complectitur. Aperiri tamquam sapientem eu est.</p>

<p>Ius ne detracto urbanitas consectetuer, vix cu dignissim instructior, qui ludus laboramus deseruisse at. Timeam officiis iudicabit sed at, cu ius malis sonet inermis. Affert gloriatur intellegebat ne mel, ex eam alii gloriatur, augue volumus detraxit cu cum. Pro justo corpora ne, no pri affert phaedrum scripserit, percipit expetenda est ex. Cu nam quod liber.</p>

<p>Dicam postulant eum in, everti mollis id mel, cu odio definitiones vis. His ad altera oporteat, cum mediocrem reprehendunt cu. Suavitate tincidunt ne mei, vim munere postulant constituto ut, usu nemore admodum no. Civibus salutatus ei pro, ne sit mutat causae vulputate. Vocent eligendi ad vix, delenit euripidis vel ad.</p>

<p>Dicam postulant eum in, everti mollis id mel, cu odio definitiones vis. His ad altera oporteat, cum mediocrem reprehendunt cu. Suavitate tincidunt ne mei, vim munere postulant constituto ut, usu nemore admodum no. Civibus salutatus ei pro, ne sit mutat causae vulputate. Vocent eligendi ad vix, delenit euripidis vel ad2.</p>
</div>
<!-- close content -->

</div>
<!-- close panel -->
</div>
<!-- end second slide -->

</div>
<!-- close items -->

</div>
<!-- close scrollables -->

<!-- open image -->
<div id="image">

</div>
<!-- close image -->

</div>
<!-- close container -->

<!-- open footer -->
<div id="footer">
footer

</div>
<!-- close footer -->

</div>
<!-- close wrap -->


</body>
</html>

и мой код CSS:

    /* Reset */
body, ul, ol,li, h1,h2,h3,h4,h5,h6,form,p,a,img{
    margin:0;
    padding:0;
    border:0;
}

#wrap {
    background: #fcf;
}

#navigation {
    background: #333;
    height: 70px;
    clear: both;
}

#container {
    background: #71e;
    height: 600px;
    clear: both;
}

.scrollable {
    /* required settings */
    position:relative;
    overflow:hidden;
    width: 900px;
    height:600px;
    float: left;
    z-index: 5;
}

.scrollable .items {
    /* this cannot be too large */
    width:200em;
    /* position:absolute; */
}

.items div {
    /* float:left; */
}

.items div .panel {
    background: #0bb;
    height: 600px;
    position: absolute;
}

.items div .lp {
    width: 400px;
    margin-left: 10%;
}

.items div .rp {
    width: 400px;
    margin-left: 50%;
}

.items div .fp {
    width: 800px;
    margin-left: 10%;
}

.items div .content {
    background: #1e1;
    width: 80%; 
    height: 90%;
    overflow: auto;
    margin: 30px auto;
}

#image {
    background: #555;
    height: 600px;
    width: 900px;
    margin: 0 auto;
}

#footer {
    background: #11c;
    height: 60px;
    clear: both;
}
Источник

0 ответов

Другие вопросы по тегам