mooTools Binding All Classes

Question

I am not used to using mooTools, it looks a lot like Prototype JS. Can anyone tell me how to bind this to every class?

// This grabs all the classes
var mousy = $$('.hf-item-images');

// I don't think this is correct to apply this scroller to all the above classes
var scroll = new Scroller(mousy, {area: 100, velocity: 1});

// Mousemove
mousy.addEvent('mouseover', scroll.start.bind(scroll));
mousy.addEvent('mouseout', scroll.stop.bind(scroll));

Answer 1

you need to be smarter about this, looping through nnnn items to make scollers can be expensive. so is attaching pairs of events on each one.

given markup like so:

<div id="container">
    <div class="hf-item-images">...</div>
    <div class="hf-item-images">...</div>
</div>

you can delegate stuff on the parent and only instantiate a scroller instance on elements that need it, reusing it afterwards.

var container = document.id('container'),
    settings = {
        area: 100,
        velocity: 1
    };

container.addEvents({
    'mouseover:relay(.hf-item-images)': function(e, el){
        var scroll = el.retrieve('scroller');
        if (!scroll){
            // create instance the first mouseenter and store for later
            scroll = new Scroller(el, settings);
            el.store('scroller', scroll);
        }
        scroll.start();
    },
    'mouseout:relay(.hf-item-images)': function(e, el){
        el.retrieve('scroller').stop();
    }
});