0
   <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(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">
    #scroll {
        width: 250px;
        height: 250px;
        overflow: hidden;
        padding: 4px;
        margin-bottom: 20px;
        float:left;
        border:1px solid #00CCCC;
    }
    #scroller{ float:left; width:40px; margin-top:0px; margin-left:5px; height:258px; border:1px solid #996600;}
    #scroll-up{ 
                background:url(images/up.png) no-repeat center ; 
                height:31px; 
                width:31px; 
                display:block; 
                text-transform:none;  
                color: #0066CC;
                float:left;             
                margin-top:0px;         
              }
    #scroll-down{ 
                    background:url(images/down.png) no-repeat center;
                    height:31px; 
                    width:31px; 
                    display:block; 
                    text-transform:none;  
                    color: #0066CC;
                    float:left;
                    margin-top:205px;           
                }
    </style>
    </head>
    <body>
    <div id="scroll">
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here             Content here and more content here Content here and more content here Content here and more content here Content here and more content here    Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
        Content here and more content here Content here and more content here Content here and more content here Content here and more content here
    </div>
        <div id="scroller">     
            <a href="#" id="scroll-up">Up</a>
            <a href="#" id="scroll-down">Down</a>
        </div>
    </body>
    </html>

This is my text scroller code. I want to acieve following.,
1. How to add small scrollbar between up and down button.
2. currently this scrolls text on mouse enter(hover) on anchor tag, How to scroll on mouse click
3. How to allow multiple instances of <div id="scroll"></div> with same id i.e. id="scroll"

Edited by vizz

2
Contributors
1
Reply
2
Views
5 Years
Discussion Span
Last Post by dany12
0

My ideea in this case is to work with jquery ui and use the same class for all the divs you want to use scroll Jquery has already created this scroll element so all you have to do is modifie to your own needs hope this helps.
Good luck

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.