CODEWITHSUNDEEP
jquerycssscroll
Marc Morales Valldepérez
Marc Morales Valldepérez

Reputation: 561

ScrollLeft doesn't run

I have seen this example: http://jsfiddle.net/UwEe2/306/ that is implemented with scrollleft.

Now I have done a modification.

This is my script but is doesn't run: http://jsfiddle.net/njKXB/39/

What is the problem?

Upvotes: 0

Views: 777

Answers (2)

Sparky
Sparky

Reputation: 98718

I have no idea what you're trying to achieve by putting a list of 1's inside li elements without the required ul container.

Simply replacing the text with the img element in your code demonstrates that it's functional.

http://jsfiddle.net/njKXB/54/

The reason you can't scroll your list of 1's left/right is because it's wrapping. If you increase the height, you can see it wrapping below. Since it's wrapping down, there is nothing there to scroll side to side.

http://jsfiddle.net/njKXB/55/

The solution is to remove the float on the li's and add display:inline; which causes them all to stay in one line. Then add white-space: nowrap; to the container to prevent wrapping.

http://jsfiddle.net/njKXB/75/

Upvotes: 1

Blender
Blender

Reputation: 298046

Your scroll amount was too small for you to notice the movement.

Also, you can animate to +=10px and jQuery will automatically add that value to the current value.

var scroll = 100;
var speed = 200;

$('#left').click(function() {
    $('#container').animate({
        'scrollLeft': '-=' + scroll
    }, speed);
});

$('#right').click(function() {
    $('#container').animate({
        'scrollLeft': '+=' + scroll
    }, speed);
});

$('#up').click(function() {
    $('#container').animate({
        'scrollTop': '-=' + scroll
    }, speed);
});

$('#down').click(function() {
    $('#container').animate({
        'scrollTop': '+=' + scroll
    }, speed);
});

Also, don't close the <img /> tag with a closing tag. <img /> tags are self-closing:

<img src="http://nyquil.org/uploads/IndianHeadTestPattern16x9.png" />

Demo: http://jsfiddle.net/UwEe2/311/

Upvotes: 0

Related Questions