Tag Archives: jquery

FaceBox: Facebook-Style JavaScript Overlays

FaceBox DialogLightbox-type DIV overlays have a multitude of uses. If you’re building a web app, or if you are just looking for a way to declutter your blog, you can just sweep elements under the proverbial rug until they’re needed, and then call them back in a “almost-window.”

FaceBox, is yet another way of implementing this functionality, but styled in a similar manner to FaceBook’s pop-up boxes.

FaceBox can display DIVs, images, AJAX-loaded pages, or you can just write content in dynamically via JavaScript. It’s fairly easy to implement the script, though it took me a little bit of tweaking to get all of the images to display correctly (I just had to change a few paths throughout the code).

The JavaScript file is just 6KB, and the 1KB worth of CSS can easily be pasted into your existing stylesheet, or referenced separately. There are also a few assorted images that are required, though they’re mainly under 1K. Also note that FaceBox requires jQuery to function, so you may not want it if you’re a Prototype aficionado.

jQuery vs. Prototype

The two biggest JavaScript frameworks in use are jQuery and Prototype. Until recently, I used Prototype a bit. After having to use jQuery for a recent project, I’ve actually started to enjoy using it. It’s easy to use, and it’s lightweight. I’m probably going to re-code a bunch of things over at NTugo so I can use jQuery there instead of Prototype. It’s a lot better.

Enough of my personal experiences, here are the hard facts:

jQuery

File Size: 21KB

Code Required to Toggle a DIV:

<script type="text/javascript">
$('#mydivtrigger').click(function() {
$('#mydiv').toggle(400);
return false;
});
</script>
<a href="#" id="mydivtrigger">Toggle!</a>
<div id="mydiv">
Lorem ipsum.
</div>

Continue reading →