LogFile

Boxing clever.

Jun
29

Today I have another jQuery plugin to unleash upon the bearded masses. Boxy is a Facebook-inspired dialog/overlay featuring animation, drag and drop and a comprehensive API for interacting with dialog instances. There’s also fairly detailed documentation.

Here’s a quick screenshot:

Visit the boxy project page for live examples and documentation, or download direct from the jQuery plugin page. Sources at github.

Update: version 0.1.1 has been released; thanks to Robin Whittleton and Fabio Fedelix for their contributions. View the release notes.

Another update: version 0.1.2 is hot off the platter. Support for fixed positioning plus another couple of IE bugs have been smited. Relase notes here; thanks again to Robin W for the patches.

Filed under: Coding, Projects — Tags: , , — Jason @ 7:44 pm

Here follows the dissent of the 11 heretics

  1. At 9:49 pm on July 1, 2008, Fabio Fedelix responded thusly:

    There’s a “bug” on IE7 users that the opacity doesn’t works correctly, to correct this just add in the classes there uses the opacity this tag:

    filter:alpha(opacity=70);

    Add this too in image borders.

    Sorry for the bad english =P

    Fabio

  2. At 10:22 pm on July 1, 2008, Jason responded thusly:

    Thanks for the heads up; I’ll sort this and post a new release asap.

  3. At 4:57 pm on July 2, 2008, Fabio Fedelix responded thusly:

    Jason,

    There’s another thing in IE7 caused by the margin on tag

    Just add in css p { margin:0; }

    Screenshots:
    Before: http://img389.imageshack.us/my.php?image=boxy1kx1.jpg
    After: http://img368.imageshack.us/img368/2277/boxy2wn8.jpg

    In time… Nice work!

  4. At 6:08 pm on July 2, 2008, Fabio Fedelix responded thusly:

    Another problem in IE7, when you get a content via ajax the IE7 caches the page and if there’s a modification he doesn’t show the new page, he shows the page in cache previous loaded.

    To resolve this problem I add this line in jquery.boxy.js after line 39

    Line 39: dataType: ‘html’,
    Line 40: data: “math=”+Math.random(),
    Line 41: success: function(data) {

    The function Math.random() generates a random number “forcing” the IE7 to load the content correctly making a new cache.

    In Firefox doesn’t have this problem neither the problems in others comments

    Fabio

  5. At 7:01 am on August 5, 2008, Darius responded thusly:

    Hey there, did anyone notice a bug on FF where the box open on first click in the bottom right of the browser window? on second click its all good but everytime I reload the browser with SHIFT+F5 it opens on first click in the bottom right.

  6. At 7:41 am on October 10, 2008, pligg.com responded thusly:

    boxy - Facebook-like dialog/overlay, with frills…

    Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays I’ve seen by providing an object interface to control dialogs after they’ve been created. And for simple usage scenar…

  7. At 5:37 pm on October 30, 2008, stefan responded thusly:

    hey ho! cool plugin! when i use boxy with model:true just the document gets blacked-out not the hole screen.
    i fixed that by modifying _documentSize() from
    return {height: document.body.offsetHeight};
    to
    return {height: window.innerHeight};

  8. At 8:11 am on November 22, 2008, Nosy responded thusly:

    hi,why the javascript invalid when load a url to the boxy?

  9. At 1:30 pm on November 25, 2008, jf responded thusly:

    Really like this plug=in, but I’m getting an IE7 error: Object required on load. Offending line is the last one below:
    _viewport: function() {
    var d = document.documentElement, b = document.body, w = window;
    return jQuery.extend(
    jQuery.browser.msie ?
    { left: b.scrollLeft || d.scrollLeft, top: b.scrollTop || d.scrollTop } :
    { left: w.pageXOffset, top: w.pageYOffset },
    !Boxy._u(w.innerWidth) ?
    { width: w.innerWidth, height: w.innerHeight } :
    (!Boxy._u(d) && !Boxy._u(d.clientWidth) && d.clientWidth != 0 ?
    { width: d.clientWidth, height: d.clientHeight } :
    { width: b.clientWidth, height: b.clientHeight }) );
    }

  10. At 6:56 pm on November 25, 2008, jf responded thusly:

    Never mind. I found the problem.

  11. At 9:38 am on February 11, 2009, weezy responded thusly:

    dude, can i get a step-by-step here? i’m a noob, i reallydon’t get how to use it.

    i’m using jquery in my php, validating stuff in the form. i wanna add this as a confirmation box but i can’t get it to work (or i don’t know how to add it) with my existing .js and stuff.

    really need your help man. thanks!

Leave a comment