I've been learning Mootools, but I'm having problems firing custom events. I'm sure it must be something simple, but I can't see it for the life of me.
I wrote a simple class to nudge some list items using Fx.Tween. It works perfectly, except that the custom events aren't being triggered, no matter what I try.
<script type="text/javascript">
var Pusher = new Class({
Implements: [Events,Options],
options: {
elements: []
},
initialize: function(options){
this.setOptions(options);
this.attachListeners(this.options.elements);
},
attachListeners: function(elements){
$$(elements).each(function(el){
$(el).addEvent('mouseover', this.pushIn.bind(el))
.addEvent('mouseout', this.pushOut.bind(el));
}, this);
},
pushIn: function(){
this.fireEvent('in');
this.set('tween', {duration: 'short'});
this.tween('paddingLeft', '50px');
},
pushOut: function(){
this.fireEvent('out');
this.set('tween', {duration: 'short'});
this.tween('paddingLeft', '0px');
}
});
window.addEvent('domready', function(){
var p = new Pusher({
elements: $$('li')
});
p.addEvent('in', function(){ alert('in'); });
p.addEvent('out', function(){ alert('out'); });
});
</script>
And in the HTML:
<ul id="mylist">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
I've also tried the following:
window.addEvent('domready', function(){
var p = new Pusher({
elements: $$('li'),
onIn: function(){ alert('in'); },
onOut: function(){ alert('out'); }
});
});
What am I doing wrong?
