0

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

iJade
  • 23,144
  • 56
  • 154
  • 243
lino
  • 85
  • 11

1 Answers1

0

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.

lino
  • 85
  • 11