Search code examples
scrollmootools

mootools Scrollable not working

I used mootools scrollable(http://mootools.net/forge/p/scrollable) on my page,but it is not working. my page: http://neyriz.net/moo/ I used it for div with id="right" why it's not work?

Solution

  • You are making 2 mistakes. The first is that you try to instanciate the Scrollable before the DOM is ready and so your element doesn't exist. So you have to move your script tag either to the end of the body or you wrap it in an event listener. I.E:

    window.addEvent('domready', function() {
    var myScrollable = new Scrollable($('right'));
});

    The second problem is that the plugin has some dependencies. In this case you need to include Slider, Element.Measure, Element.Shortcuts from MooTools more. You can go to http://mootools.net/more/ and select those 3 modules. Download the file and include it into your head between mootools-core and scrollable:

    <script type="text/javascript" src="mootools-core.js"></script>
<script type="text/javascript" src="mootools-more.js"></script> INSERT MOOTOOLS MORE HERE!
<script type="text/javascript" src="scrollable.js"></script>

    In general it's better when you define and load your JS files before the body. So it looks like:

    <html>
    <head><title>My awesome page</title></head>
    <body>
        <h1>My awesome page</h1>
        <p>Some text</p>
        <script type="text/javascript" src="mootools-core.js"></script>
        <script type="text/javascript" src="mootools-more.js"></script> INSERT MOOTOOLS MORE HERE!
        <script type="text/javascript" src="scrollable.js"></script>
    </body>
</html>