Return of the FaceBox: Iframes!

Harisenbon — Mon, 19 Oct 2009 07:27:36 +0000

This article is a follow-up to my (oddly?) popular article Simple Modal Boxes: FaceBox with Prototype which, as the name implies, talks about how to get FaceBox ( the amazingly cool JQuery Facebox-like modal window) to work with the Prototype framework, and then releases that code under the MIT license.

Ippatsu's Flashcard FaceBox

Where things went wrong: IFrames

I was fairly forthcoming about it when I released version 1.1, but my FaceBox had a major problem: Loading full HTML pages (as opposed to html snippets) borked the system. It was a combination of the and tags along with all that excess Javascript and CSS being loaded into an inline div that pretty much did it in. IE6 would display it (poorly) while anything else just gave up and displayed an empty box.

So I fixed it.

Starting with version 1.2 you can set a facebox to load in an IFrame by simply adding the tag “iframe” to the rel tag of the link.

So
My Page!

becomes
Google

and now you’re cooking with crisco. The page will be loaded in an IFrame, and any links will be self-contained within that iframe unless you specifically break out of it.

Breaking backwards compatibility

So, I am a big believer in backwards compatibility, but unfortunately adding the iframe option, along with my desire to adhere to better HTML coding practices has made me break backwards compatibility with version 1.1.

But wait!

It’s simple to change over, and you can change over almost all your code with a simple search/replace! So let’s get to it!

New way to handle classes

The old way of handing classes was to simply put all the classes you wanted to use after a hyphen after the facebox tag, like so:

My Classy Page!

This brings about the problem that now “iframe” is just thought of as a class. (It’s also not very contained, and rather messy). So I changed to to be more self-contained by putting the classes in square brackets []:

The new Code

My Classy Page!

Now you know exactly what is a class, and what is not, and it’s easier to use it in conjunction with the IFrames option above.

This loads google in its own classy iframe

Simple as pie.

New way to handle styles

Originally, my way to handle styles (useful for setting the height and width of a Facebox for a single message or page) was to put the data in the rev tag and just pass that through to the FaceBox. However, with the new class syntax, I had a chance to change the way that the styling works.

Also, the rev tag is used to describe how the current document applies to the link, so it really isn’t a good place to put the data syntactically. It’s much better to put it in the rel tag along with the class information.

The new code

So where you used to use the rev tag:
My Stylish Page!

You'll now use curly brackets in the rel tag:
My Stylish Page!

And we can combine that with the iframes and classes above, to further customize our facebox

Class and Style
My Classy Stylish Page!

Iframe Class and Style
This loads google in its own classy and stylish iframe

Download the code

You can download the code right here! It’s Open sourced under the MIT License.

If you find any problems or bugs, feel free to drop me a comment!

Download FaceBox v 1.2 (Open sourced under the MIT License)

Adventures in Japanese Programming » prototype