SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery scroll some text inside a div with overflow

    Hello to every one.

    This supposed to be simple, but I don't really know jQuery in order to implement this the proper way.

    All I want is to create a div with some text inside. The div will be overflowed some text will be visible.

    So all I want to do is to create to small links "up" and "down" so when the visitor clicks on then the text scrolls up or down. like this effect here

    http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

    I tried to do some search ... but all I find are plugins and scrollers to create carousels or so...

    This supposed to be easy, but I am missing something...

    Thanks in advance

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    jQuery has a built in method called .scrollTop() which uses a numeric value to scroll an element to a specific point. Eg here is something i wrote quickly

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
    $(function() {
        var ele   = $('#scroll');
        var speed = 25, scroll = 5, scrolling;
        
        $('#scroll-up').mouseenter(function() {
            // Scroll the element up
            scrolling = window.setInterval(function() {
                ele.scrollTop( ele.scrollTop() - scroll );
            }, speed);
        });
        
        $('#scroll-down').mouseenter(function() {
            // Scroll the element down
            scrolling = window.setInterval(function() {
                ele.scrollTop( ele.scrollTop() + scroll );
            }, speed);
        });
        
        $('#scroll-up, #scroll-down').bind({
            click: function(e) {
                // Prevent the default click action
                e.preventDefault();
            },
            mouseleave: function() {
                if (scrolling) {
                    window.clearInterval(scrolling);
                    scrolling = false;
                }
            }
        });
    });
    </script>
    <style type="text/css">
    <!--
    div#scroll {
        width: 200px;
        height: 200px;
        overflow: hidden;
        padding: 4px;
        margin-bottom: 20px;
    }
    -->
    </style>
    </head>
    <body>
    
    <div id="scroll">
        Content here and more content here<br /><br />
        Content here and more content here<br /><br />
        Content here and more content here<br /><br />
        Content here and more content here<br /><br />
        Content here and more content here<br /><br />
        Content here and more content here<br /><br />
        Content here and more content here<br /><br />
        Content here and more content here<br /><br />
        Content here and more content here<br /><br />
        Content here and more content here<br /><br />
        Content here and more content here<br /><br />
        Content here and more content here<br /><br />
        Content here and more content here<br /><br />
        Content here and more content here
    </div>
    
    <a href="#" id="scroll-down">Down</a> - <a href="#" id="scroll-up">Up</a>
    
    </body>
    </html>
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works fine.... Thank you very much for your help. Hope some other people find this one usefull

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    No problem, was a fun little snippet to write
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle


Tags for this Thread

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
  •