Aug 16 2006

More Flexibility From Moo.Box

Published by at 11:14 pm under General

This is an old article and the information contained within it may be out of date, not reflect my current views and/or contain broken links. If you feel this article is still valid and requires updating, you can use the contact form to let me know. However, I make no guarantee that it will get updated.

I’ve been working on a website with a phrixus for some time now and have been making it nice and “Web 2.0″ey with the addition of ajax content, lightboxes and sliding panels. I’m sure there’ll be some DailyWTF code in there by the digital bucket full.

Any way, what I’m blogging about is that I have finally, after about an hour of hacking, figured out how to close the lightbox that we’re using and call another javascript function with one link. The lightbox we’re using is Moo.Box and is the best I found that can display ajaxed content and is based on the Moo.fx platform which we were already using.

The documentation for Moo.box is very light on the ground and the only method given for initialising the lightbox is by calling the following code:
window.onload=function() {
new moobox({
closeText: "Want to close this? Click here",
ajaxLayout: "<div id='ajax'>%CONTENT%</div>",
imageLayout: "<img src='%SRC%' title='%TITLE%'/>"
});
}

and the only method given for closing the lightbox with a link is by including the following in the content to be displayed in the lightbox:
<a href="#" class="moobox" rel="close">Close box</a>

If you try adding javascript into the href of the link it will not be called when the link is clicked and if you add an onClick event to the link the lightbox will not be called. I tried a miriad of ways I could think of to close or hide the lightbox through javascript but they all failed. Then, whilst trying to get something else working I noticed the piece of code used to load the Moo.fx accordion effect and thought I would give it a whirl.

Instead of using the given method of loading the Moo.box I used the following:
var myMoobox;
window.onload=function() {
myMoobox = new moobox({
closeText: "Want to close this? Click here",
ajaxLayout: "<div id='ajax'>%CONTENT%</div>",
imageLayout: "<img src='%SRC%' title='%TITLE%'/>"
});
}

What this code does is give you a persistent handle to the Moo.box object that is created. As a result you can call all of the functions that are defined in the Moo.box. From digging around in the source code for Moo.box I found that the function I need is doEvent(). An example of how to use this new found functionality could be as follows:
<a href="javascript:myMoobox.doEvent('close','','');someOtherFunction();">Close box</a>

Notice that the class="moobox" and rel="close" have both gone. Note that the new link will close the lightbox before calling the other function.

Now, back to coding :)

One response so far