CODEWITHSUNDEEP
javascriptjqueryscroll
Robbie Capps
Robbie Capps

Reputation: 467

How can I use Javascript or CSS to hover a button and have a div scroll right or left?

I'm trying to create a photo gallery with a block for the description below it. I would also like to have two buttons, one on either side of the photos. When you hover over these buttons (likely arrows), I would like the div containing the photos to scroll (or appear to scroll) either right or left. I have looked into a few JSFiddles, but none of them do exactly what I would like. This one comes close, but I want it to scroll left and right, rather than up and down. I tried the code with my div, but it didn't do anything. This is the page I'm working with:

[website is no longer in existence]

Thanks in advance!

var amount = '';

function scroll() {
    $('#container').animate({
        scrollTop: amount
    }, 100, 'linear',function() {
        if (amount != '') {
            scroll();
        }
    });
}
$('#hover').hover(function() {
    amount = '+=10';
    scroll();
}, function() {
    amount = '';
});
$('#hover2').hover(function() {
    amount = '-=10';
    scroll();
}, function() {
    amount = '';
});

Upvotes: 1

Views: 2147

Answers (2)

Ahmed Ali
Ahmed Ali

Reputation: 1007

You have to Change 

 $('#container').animate({
    scrollUp: amount
}, 100, 'linear',function() {
    if (amount != '') {
        scroll();
    }
});

to 

 $('#container').animate({
    scrollLeft: amount
}, 100, 'linear',function() {
    if (amount != '') {
        scroll();
    }
});

JSFiddle

Upvotes: 0

Brian Hoover
Brian Hoover

Reputation: 7991

In the scroll function, you want to set "scrollLeft"

I've created a fiddle, that I think does what you are looking to do. I've put the text into another div so that it won't automatically wrap to the width of it's primary container.

function scroll() {
    $('#container').animate({
        scrollLeft: amount
    }, 100, 'linear',function() {
        if (amount != '') {
            scroll();
        }
    });
}

jsFiddle

Upvotes: 4

Related Questions