SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    LI ScrollTo plugin, semi working but not scrolling

    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
    Code:
    <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
    Code:
    #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
    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();
        });
    });​
    Thank you.

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    41
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    $('entries').scrollTo(element, 800, {
    	margin: true
    });

    do an alert (or console.log ) of $('entries').length, it should return "0". You need to add a dot before the word "entries":
    Code JavaScript:
    $('.entries').scrollTo(element, 800, {
    	margin: true
    });

    Not sure if that fixes your problem, but that's definately a bug.

  3. #3
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Denk View Post
    Code JavaScript:
    $('entries').scrollTo(element, 800, {
    	margin: true
    });

    do an alert (or console.log ) of $('entries').length, it should return "0". You need to add a dot before the word "entries":
    Code JavaScript:
    $('.entries').scrollTo(element, 800, {
    	margin: true
    });

    Not sure if that fixes your problem, but that's definately a bug.
    Thank you, good spot! Have amended, but it still doesn't scroll unfortunately L(

    http://jsfiddle.net/Beggy/19/

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    41
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ok, got a question: Do you want the body to scroll or the ul to scroll to a certain item?

    1. Body? Change "$('.entries').scrollTo" to "$('body').scrollTo"
    2. ul? Put a height and an overflow hidden on your .entries ul

  5. #5
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Denk,

    I would like the UL to scroll.. I made the changes you suggested, but it still won't scroll for me. Did I do this incorrectly?

    http://jsfiddle.net/Beggy/21/

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    41
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I don't see the changes in that fiddle: See here: http://jsfiddle.net/Beggy/22/
    I've added: "#fscroller ul.entries { height:50px; overflow:hidden; }", if you click on "next" now, you'll see the ul scroll

  7. #7
    SitePoint Evangelist Sikwondo's Avatar
    Join Date
    Sep 2005
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That,sir... is a thing of beauty!

    Thank you so much for your help

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    41
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    yw amigo and good luck with your project!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •