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?
http://jsfiddle.net/Beggy/1/
The code is as follows:
HTML
CSSCode:<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>
jQueryCode:#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; }
Thank you.Code: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(); }); });



Reply With Quote
Bookmarks