Hi All,
I am trying to set a panel with a fixed height containing a series of LI elements.
I wanted to create buttons that would scroll down the LIs with three separate buttons top and bottom. First button moves down one LI, the second jumps down 3 LIs and the third button moves directly to the bottom.
This would be the same for the top buttons but in reverse. I have set this up in a jsfiddle, for now just with the move up and down one LI using the scrollTo plugin, but the scroll isn’t working.
Would anybody please be able to take a look and point me in the right direction?
The code is as follows:
HTML
<div id="fscroller">
<div class="preview_module">
<div class="controls_top">
<a id="up" href="#">Move Up</a>
</div><!--/ controls_top-->
<div class="entries_list">
<ul class="entries">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
<li><a href="#">Six</a></li>
<li><a href="#">Seven</a></li>
<li><a href="#">Eight</a></li>
<li><a href="#">Nine</a></li>
<li><a href="#">Ten</a></li>
</ul><!--/ entries-->
</div><!--/ entries_list-->
<div class="controls_bottom">
<a id="down" href="#">Move Down</a>
</div><!--/ controls_bottom-->
</div><!--/ preview_module-->
</div>
CSS
#fscroller .preview_module { height:313px; margin-left:-9px; width:288px; }
#fscroller .preview_module h3 { display:inline; float:left; font-size:12px; font-weight:bold; height:42px; line-height:47px; padding:0 15px; }
.controls_top, .controls_bottom { display:inline; float:right; margin:11px 15px 0 0; }
.controls_bottom { margin:7px 15px 0 0; }
.controls_top a, .controls_bottom a { display:block; float:left; }
#fscroller .entries_list { clear:both; height:230px; overflow:hidden; }
#fscroller ul.entries { }
#fscroller ul.entries li { background:url(/community/images/forum_scroll_module/green_quot.png) no-repeat 5px center; border-top:1px solid #e0e0e0; margin:0 10px; padding:10px 0 10px 35px; }
#fscroller ul.entries li:first-child { border:none; }
#fscroller ul.entries li a { color:#005173; font-weight:normal; }​
jQuery
function scrollToPosition(element) {
if (element !== undefined) {
$('entries').scrollTo(element, 800, {
margin: true
});
}
}
// End Club Forum Scroll Module, SB 11/2012
$(function() {
//Create an Array of posts
var posts = $('ul.entries li');
var position = 0; //Start Position
var next = $('div#fscroller #down');
var prev = $('div#fscroller #up').hide();
//Better performance to use Id selectors than class selectors
next.click(function(evt) {
//Scroll to next position
prev.show();
scrollToPosition(posts[position += 1]);
if (position === posts.length - 1) {
next.hide();
}
evt.preventDefault();
});
prev.click(function(evt) {
//Scroll to prev position
next.show();
scrollToPosition(posts[position -= 1]);
if (position === 0) {
prev.hide();
}
evt.preventDefault();
});
});​
Thank you.