I recently started using FX.Slide in the next iteration of the List Central interface. It lets the user open and close “sliders” (div’s with content in them) as they want them. Check out the < a href="http://demos.mootools.net/Fx.Slide">mooTools demo to see FX.Slide in action.

I had one little problem with Fx.Slide though. The problem was that I wanted to be able to dynamically add content to an Fx.Slide, changing the height of the slider div after it has been opened. To my dismay, the implementation of Fx.Slide set the height of the div to specific numbers in pixel to achieve the vertical slider effect. This means that any content I added to the bottom of the div after it was opened would not be shown. In order for the height of the slider div to remain dynamic, I needed the height to be set to “auto”, not a specific number.

I had to figure out a way to maintain the the div’s ability to change in height while still using FX.Slide. I did some fiddling in mooTools source to try to achieve the effect I desired. I changed where FX.Slide set the height of the div to “auto”. After trying it out, I was astonished that it worked! I had moved on to some other development when I realized that my change to the mooTools source brock the fluid motion of my slider. It now opened all choppy and jumpy. It was no longer pleasing to the eye. I had to put the source back the way I found it. I may have learned some about the inner workings of mooTools though the process, but really, messing with the framework’s source is a path to trouble.

As with many problems, this one’s solution didn’t come to me until I put the problem away for a while, and worked on other things. The solution then came to me, and like many other solutions, it seemed so simple, once I knew it.

The trick to maintain dynamic height on a Fx.Slide is to add an onComplete function on to the slider that sets the height of the slider to “auto” if the slider is open, like this:

var formSlide = new Fx.Slide('FormSlider', {
        onComplete: function(){
            if(this.wrapper.getStyle('height') != "0px"){
                // Check if the slider is open
                this.wrapper.setStyle('height', 'auto');
            }
        }
    }).hide();

That’s it! It works like a charm now, just as I want it to. So much trouble, for such a simple solution!

I expect that this solution would work the same on the width for horizontal FX.Slide’s, though I haven’t tested it.

You might also like...

• Put a handle on mooTools Drag.Move