I am trying to realize a simple slideIn()
with mootools on a RTE.
It should slide in, when the RTE area is hovered (mouseenter
), and show some extra options for writing an entry that I do want to offer in this area. Please see the link below, should be self-explanatory
So my Problem is, when I try to create a Fx.Slide
instance, the code isnt being executed.
I tried it with the show
method and it works fine.
Here is the jsfiddle with my working code, the parts that do not work are commented out.
Again, what I do want is to Slide in the buttonbar
element when the mouseenter
event is fired. This works fine with show
but does not with the slide instance.
I'd be happy if someone could point me in the right direction.
If there are any futher questions, please comment and i will give give further information, if required.
So long, Lino
Alright, I just realized what i was doing wrong. It was this little piece:
wrap.grab(buttonbar.hide());
This is rubbish, because buttonbar
is not in the DOM already. It has to be split up to:
wrap.grab(buttonbar);
buttonbar.slide('hide');
After that, it just took a few changes in the event setting:
editor.addEvents({
'click': function(ev) {
ev.stop();
buttonbar.show();
},
'mouseenter': function(ev) {
ev.stop();
this.addClass('mark');
buttonbar.show();
//this.slideIn();
},
'mouseleave': function(ev) {
ev.stop();
//buttonbar.hide();
this.removeClass('mark');
}
});
to this:
editor.addEvents({
'click': function(ev) {
ev.stop();
buttonbar.slide('toggle');
},
'mouseenter': function(ev) {
ev.stop();
this.addClass('mark');
buttonbar.slide('in');
},
'mouseleave': function(ev) {
ev.stop();
this.removeClass('mark');
buttonbar.slide('out');
}
});
And now my slides slide as hell :)) Here a link to the fiddle.