Make divs scroll horizontally using jQuery

Question

I'm trying making inline divs scroll horizontally by clicking on a toggle button, smoothly, but I don't know how to make this work : jsfiddle

Here is my code:

   <button class="go">go</button>

<div class="right">right scroll</div>
<div class="left">left scroll</div>

jquery

$(function () {
    $('.go').on('click', function(){
        $('.left').animate({'left': '-105%'});
        $('.right').animate({'left': '0px'});
        $(this).toggleClass('return go');
        $('.return').bind('click', function(){
        $('.left').animate({'left': '0px'});
        $('.right').animate({'left': '105%'});
        $(this).toggleClass('return go');
    });
    });
});

css

.left {
    min-width:100%;
    min-height:300px;
    background:red;
    position:relative;
    float:left;
    clear:right;
    left:0;
}
.right {
    min-width:100%;
    min-height:300px;
    background:blue;
    position:relative;
    right:-105%;
     float:left;
    clear:right;

}

The -1 was not mine. The jsfiddle is not enough, who knows if they don't delete old fiddles, or if the service will still exist tomorrow? The idea of Stack Overflow is that your question should also be useful for future visitors, that's why code should go into the question. See meta.stackexchange.com/questions/125997/… — bfavaretto
– bfavaretto, Commented May 21, 2013 at 16:04
@bfavaretto you're right i didn't thought about if they remove that :P — Filippo oretti
– Filippo oretti, Commented May 21, 2013 at 16:05

bfavaretto · Accepted Answer · 2013-05-22 14:31:42Z

1

Not sure if this is what you want:

$(function () {
    $('a').on('click', function () {
        $('.left').animate({'left': '-105%'});
        $('.right').animate({'left': '0px'});
    });
});

http://jsfiddle.net/f7VdQ/3/

You were not animating the elements, just setting their CSS. Also, you were setting another click handler on the link on every click (I didn't understand why, so I removed it).

Regarding your updates/comments

To make the divs side-by-side, wrap them in an container with position: relative, and use position: absolute on the divs, with top: 0. Don't use floats.
Don't set a new click handler from within the click handler. That doesn't replace the existing click handler, but adds a new one. So every click does more animations than the previous one (and the visible effect in this case is a delay before the animation starts). Use an if statement inside you existing click handler instead:
```
$('a').on('click', function(){
    if($('.left').css('left') == '0px') {
        $('.left').animate({'left': '-105%'});
        $('.right').animate({'left': '0px'});
    } else {
        $('.left').animate({'left': '0px'});
        $('.right').animate({'left': '105%'});
    };
});
```
Working demo

edited May 22, 2013 at 14:31

answered May 21, 2013 at 16:08

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Filippo oretti Over a year ago

this could be the fix, problem is divs are not inline :( and i have the same problem too :( i see divs 1 over the other instead of inline :P can you confirm? i'm on FF

bfavaretto Over a year ago

That's because they're both taking the full available width (both have min-width:100%;). Make them 50% or less.

Filippo oretti Over a year ago

but they can be out of screen before to show them , i mean, uhmmmm really can't fix this actually , let me try somenthing more , then i'll tell you thanks a lot man!

Filippo oretti Over a year ago

this is what i would like to do jsfiddle.net/f7VdQ/6 problem is div still being not inline :(

bfavaretto Over a year ago

@okok See my update above, I think that's what you're looking for.

Collectives™ on Stack Overflow

Make divs scroll horizontally using jQuery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related