List Central uses mooTools for it’s JavaScript framework. I love it! It makes developing in JavaScript a pleasure, with increased reliability, and nifty eye candy to play with.
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.
6 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.
Marilyn,
I’d just like to say a big thanks for this article as I had the exact same requirement and had just tried a few (failed) attempts at fixes before I hopped on to Google and found this.
This is one of those ‘tips and tricks’ that I’ll never forget and will use time after time.
thanks,
but i think that the height will stay stuck at auto – thus preventing any subsequent toggles from working.
The height auto doesn’t break the sliders functionality. Subsequent toggles work fine. Try it out.
err i did try …. height is stuck at auto … which code segment will reset it back to 0px ?
I see where the problem is. I had difficulty with the toggle function before the height auto entered the picture. I opted to use slideIn and slideOut with a function I wrote like called doSlider. Here is the relevant code:
function doSlider(e, slider){
if(e != “”){
e.stop();
}
if(slider.open == true){
// Close slider if open
formSlide.slideIn();
}else{
// else, open it
formSlide.slideOut();
}
}
function initSlider(){
var slider = new Fx.Slide(‘Slider’, {
duration: 400,
onComplete: function(){
if(this.wrapper.getStyle(‘height’) != “0px”){
// Prevents it breaking on close
this.wrapper.setStyle(‘height’, ‘auto’);
}
}
}).hide();
return Slider;
}
var slider = initSlider();
$(’sliderButton’).addEvent(‘click’, function(e){
doSlider(e, slider);
});
Thanks, you saved me lot of nerves, things around me and hours