Member Avatar for vizz 
   <!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
  • 150 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by dany12
Member Avatar for dany12

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.