The MOOdalBox script is a great addition to the mootools library. The interface is pretty slick. And easy to style with just CSS. Răzvan Brateş did a great job here. And every now and then i have to implement one of those MOOdalBoxes in a web application. No problem here.

Until today all MOOdalBoxes i used were triggered by simply clicking a link on a page. But today i needed to load a MOOdalBox window on page load. The screen represented some sort of QuickStart menu. Which can be disabled. I had no idea how to trigger the MOOdalBox from javascript. But once i read through the source. It became clear that it should be as easy as calling:

MOOdalBox.open(url, title, sizes);

This kept giving me the following error:

this.overlay is undefined

Looking through the MOOdalBox source. I noticed the this.overlay property was set inside the init() method. So let’s try that before we call the open() method.

MOOdalBox.init();
MOOdalBox.open(url, title, sizes);

This actually worked. I was pretty happy with the result. untill i opened IE 7 to test the same page. Nothing happened. No error’s and no MOOdalBox. Let’s try something else. Whenever i need to load something on page load in IE i use the window.onload method.

window.onload = function()
    MOOdalBox.init();
    MOOdalBox.open(url, title, sizes);
}

Now the overlay was loaded. But still no MOOdalBox on top of it. I figured it had something to do with the DOM not being fully loaded. But i couldn’t really think of a solution. So of to Google. After a bit of browsing i found somebody with the same problem. And a reply from the original author of MOOdalBox. Add a domready event to make it work.

window.addEvent('domready', loadMOOdal);
function loadMOOdal() {
    MOOdalBox.open('Quickstart/load', '', '700 500');
}

This did it. And my only goal was to make it function properly inside of IE 7. but this also fixes the same problem for IE 6. So a big thanks to Răzvan for creating MOOdalBox and for supplying the fix.

Today i got a question from Richard. About the flicker bug and how to implement the fix. The problem that he had with Javascript throwing an illegal character error was because of copy pasting from this blog. I’m not sure why the single quotes get screwed up. But i will have a look at it. I also didn’t state which version of mootools i was using. It was 1.1 at the time. And i was using the full uncompressed version.

But since then version 1.2 of mootools came out. And id didn’t really had time yet to look into it. But this version also has the same annoying bug. So i looked at the code. The FX.Slide class changed a bit. And the core and plugins are split up into separate files now. But the fix remains the same. And since i don’t really want to write a whole article about it right now. I decided to create two sets of archives. One with the fix for version 1.1 and one for version 1.2. The changes i made are explained in the previous article. But for 1.1 they are around line 4453 and 4458. For 1.2 if you only use the FX.Slide plugin it’s around line 17 and 29.

You can download the archives here:
version 1.1
version 1.2

When my coworker decided to use mootools for a project we are working on. I decided to give it a try also.

I decided to use the FX.Slide effect on some tab based boxes. This was pretty straight forward. The mootools library is pretty easy in usage. And the documentation is darn good. Bellow i will show how to add the most basic FX.Slide effect. This is directly copied from the mootools manual.

To create the sliding effect all you need is the following lines of javascript.

window.addEvent('domready', function() {

    // create an instance of the FX.Slide object
    var mySlide = new Fx.Slide('test');

    // Attach the click event to the wrapper div
    $('toggle').addEvent('click', function(e) {
        e = new Event(e);
	mySlide.toggle();
	e.stop();
    });
});

And of course some HTML to represent the sliding elements.

<h3 class="section">Fx.Slide Vertical</h3>

<a id="toggle" href="#">toggle</a>
<div id="test">
foo
</div>

And some CSS to cover it all in a nice sauce.

#test {
    background: #222;
    color: #fff;
    padding: 10px;
    margin: 20px;
    border: 10px solid pink;
}

So this looks great. It functions well. And the sliding is very smooth. There is one small problem though. When the wrapper contains an element with a style attribute overflow set to “auto”. The sliding will cause a flicker effect on the page. This is probably caused by rescaling the wrapper. Witch in it’s turn rescales the element with attribute overflow set to auto.

I didn’t really try to figure out why this happens. Maybe that’s a later project. But i did come up with a small fix. When a slide object is created. FX.Slide wraps a div around the container that will slide in and out. This wrapper has the attribute overflow set to hidden. I couldn’t figure out why overflow is set to hidden on this wrapper. So i added the ability to set it through the options object. When overflow is set to auto the flicker bug disappears. To add this feature we need to add some small changes to the FX.Slide class.

options: {
	mode: 'vertical'
},

First we change the code above to reflect the code below:

options: {
	mode: 'vertical',
	overflow: 'hidden'
},

Then on the third line of the initialize function we change:

this.wrapper = new Element('div', {'styles': $extend(this.element.getStyles('margin'), {'overflow': "hidden"})}).injectAfter(this.element).adopt(this.element);

To:

this.wrapper = new Element('div', {'styles': $extend(this.element.getStyles('margin'), {'overflow': this.options.overflow})}).injectAfter(this.element).adopt(this.element);

When all this is done and we want to create a FX.Slide object without the flicker bug. We add the options parameter. The constructor will make sure the right value is used.

var mySlide2 = new Fx.Slide('test', {overflow: 'auto'});

$('toggle').addEvent('click', function(e){
    e = new Event(e);
    mySlide2.toggle();
    e.stop();
});