Question

I seem to be having some trouble with a hover-near-the-edge scrolling solution, I already have a drag-to-scroll one implemented.

Here is my code:

Demo 1 (Current Page): http://jsfiddle.net/SO_AMK/FdLZJ/

Demo 2 (What I tried): http://jsfiddle.net/SO_AMK/8CCeA/

HTML Excerpt:

<section class="row">
        <div class="scroll-left" style="opacity: 0;"></div>
        <div class="row-scroll">
            <div class="tile">
                <img class="tile-image" src="http://cache.gawker.com/assets/images/lifehacker/2011/08/1030-macpack-notational-velocity.jpg" />
                <title class="tile-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</title>
            </div>
            .....
            <div class="tile">
                <img class="tile-image" src="http://cache.gawker.com/assets/images/lifehacker/2011/08/1030-macpack-notational-velocity.jpg" />
                <title class="tile-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</title>
            </div>
        </div>
        <div class="scroll-right" style="opacity: 0;"></div>
    </section>
    <section class="row">
        <div class="scroll-left" style="opacity: 0;"></div>
        <div class="row-scroll">
            <div class="tile">
                <img class="tile-image" src="http://cache.gawker.com/assets/images/lifehacker/2011/08/1030-macpack-notational-velocity.jpg" />
                <title class="tile-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</title>
            </div>
            .....
            <div class="tile">
                <img class="tile-image" src="http://cache.gawker.com/assets/images/lifehacker/2011/08/1030-macpack-notational-velocity.jpg" />
                <title class="tile-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</title>
            </div>
        </div>
        <div class="scroll-right" style="opacity: 0;"></div>
    </section>

jQuery:

    $(document).ready(function () {       
        var pos = 5;

        $.fn.loopingScroll = function (direction, scrollElement) {

            if (direction == "right") {
                pos+=5;
            }

            else if (direction == "left") {
                pos-=5;
            }
            $(scrollElement).parent().scrollLeft($(scrollElement).parent().data('scrollLeft') + pos);
            return this;
        }

        $(".scroll-left").hover(function(){
        scrollLeftLoop = setInterval(function(){ 
            $(this).loopingScroll("left", this); 
            }, 25);
            $(this).fadeIn('fast');
        }, function() { clearInterval(scrollLeftLoop); $(this).fadeOut('fast'); });

        $(".scroll-right").hover(function(){
           scrollRightLoop = setInterval(function(){ 
              $(this).loopingScroll("right", this); 
          }, 25);
            $(this).fadeIn('fast');
        }, function() { clearInterval(scrollRightLoop); $(this).fadeOut('fast'); });
});

It is supposed (going!) to be a Pulse alternative/WebApp, hence the design (I am working on the fonts).

Any ideas?

Thank you in advance.

Answer 1

Okay, after a little bit of head banging I came up with this:

$(".scroll-left").hover(function() {
    $(this).parent().animate({scrollLeft: 0}, 7000);
    $(this).fadeIn('fast');
}, function() {
    $(this).parent().stop();
    $(this).fadeOut('fast');
});

$(".scroll-right").hover(function() {
    $(this).parent().animate({scrollLeft: $(this).siblings(".row-scroll").width()}, 7000);
    $(this).fadeIn('fast');
}, function() {
    $(this).parent().stop();
    $(this).fadeOut('fast');
});

It basically uses the scrollLeft function and calculates the scrolling element’s width on-the-fly to use as a scroll to value. Here is a JSFiddle demonstrating this code.

I hope that somebody has a use for this and I am renaming the question appropriately.