Home/ Questions/Q 6471409
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T06:13:15+00:00

I am trying to use a very simple implementation of the scrollTo plugin: http://jsfiddle.net/TPQyY/

  • 0

I am trying to use a very simple implementation of the scrollTo plugin:

http://jsfiddle.net/TPQyY/

But I can’t get it to work. Any idea why it’s not scrolling horizontally to reveal the next image in the list?

<!doctype html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<script type="text/javascript">
$(function() {

    $('.next').click(function(e) {
        $('ul#scrollThis').scrollTo( 'li:eq(1)', 1000, {axis:'x'} );    
        e.preventDefault(); 
    });

});
</script>

<style>

@import "http://developer.yahoo.com/yui/build/reset/reset.css";

body { padding: 100px; }

ul { list-style-type: none; width: 50px; height: 50px; overflow: hidden; }
ul li { float: left; }

</style>

<ul id="scrollThis">
    <li><img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" width="50" height="50" /></li>
    <li><img src="http://www.thecouchsessions.com/wp-content/uploads/2011/08/fat-cat.jpg" width="50" height="50" /></li>
    <li><img src="http://static.howstuffworks.com/gif/dog-best-friend-1.jpg" width="50" height="50" /></li>
</ul>

<a href="" class="next">Next >></a>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Forget the plugin for a second, you are using an unordered list so the images are actually one after the other vertically, not horizontally. You can see this by removing the overflow: hidden css style.

    So you have a vertical list (down the Y axis) and you are locking the plugin to only scroll the x axis. If you remove the {axis:’x’} argument you will see it scroll vertically.

    If you want it to scroll horizontally then you just need to change your CSS for the UL to appear one after the other horizontally.

    UPDATE

    To achieve the horizontally aligned items (and therefore the horizontal scrolling), you need to change the UL to be wide enough to accomodate all of the items side by side (if you limit the width of the UL it will just push items down to the next line), and set white-space to nowrap.

    Then set the LI’s to display:inline (or you could use float:left I believe).

    Now you have the items side by side, you need to crop the view so only one is displayed. To do this wrap the UL in a container div and on this set the width and height so only one item is displayed and overflow to hidden.

    Finally change your scrollto, to tell the container to scroll not the list.

    This should achieve the result you are after.

    <!doctype html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<script type="text/javascript">
$(function() {

    $('.next').click(function(e) {
        $('#container').scrollTo( 'li:eq(1)', 1000, {axis:'x'} );    
        e.preventDefault(); 
    });

});
</script>

<style>

@import "http://developer.yahoo.com/yui/build/reset/reset.css";

body { padding: 100px; }

ul { list-style-type: none; white-space: nowrap; width: 70000px; }
ul li { display: inline; }
#container { width:50px; height:50px; overflow:hidden;  }

</style>

<div id="container">
    <ul id="scrollThis">
        <li><img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" width="50" height="50" /></li>
        <li><img src="http://www.thecouchsessions.com/wp-content/uploads/2011/08/fat-cat.jpg" width="50" height="50" /></li>
        <li><img src="http://static.howstuffworks.com/gif/dog-best-friend-1.jpg" width="50" height="50" /></li>
    </ul>
</div>

<a href="" class="next">Next >></a>
    • 0