Finally, The vBox Plugin!

Ever wanted a nice plugin that you could just insert, and run with it? No major reconfigurations, no extra images, nothing of the sort.

Bad news first!

Here are some of the cons:
– Modern Browser Support only.
– IE 9+
– Chrome 4+ (all)
– FF 3.5+
– Safari 5.1+
– Safari Mobile 5.0+
– Android 4.0+
– Chrome aor FF for Android (all)
– Dependent on jQuery.

And the good news!

Here are some of the pros:
– Resizeable with window if contents are larger than window.
– Multiple levels, stackable.
– Based on jQuery, easy to implement and use.
– Always stays in the center.
– SUPER light!

Take it, make it, minimize it, do whatever to it. Feedback would be appreciated.

vbox-0.1.2
Updated from 0.1.1: Added a resize on any element within that has the class resizable to fit the pop up which fits the window itself.

vbox-1.0.0
Updated from 0.1.2: Added compatibility for other browsers. Added custom fade time.

Usage:

1
$.fn.vbox('open',{content:'<p>My internal HTML text.</p>'});

If you want to read it without opening the file, here you go:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
(function($){
    var g_vboxlevel = 0;
    $(document).on('click','.vbox-close, .fuzz',function(e) {
        e.stopPropagation();
        $.fn.vbox('close');
    }).on('click','.vbox-content',function(e){
        e.stopPropagation();
    });
    $(window).on('resize',function(){
        $.fn.vbox('resize');
    });
    $.fn.vbox = function (action,options) {
        var settings = $.extend({
            content: 'sample',
            speed: 100
        },options);
       
        var win = $(window);
        var winH = win.height();
        var winW = win.width();
       
        if (action == 'open') {
            g_vboxlevel++;
            $('body').append('<div class="fuzz" id="vbox_'+g_vboxlevel+'"><div class="vbox"><div class="vbox-content"><div class="inner-content">'+settings.content+'<a data-id="'+g_vboxlevel+'" href="#" class="vbox-close">&times;</a></div></div></div></div>');
            $thisbox = $(document).find('#vbox_'+g_vboxlevel);
            $thisbox.animate({opacity:1},settings.speed,function(){
                $.fn.vbox('resize');
            });
        };
        if (action == 'close') {
            $(document).find('#vbox_'+g_vboxlevel).animate({opacity:0},settings.speed,function() {
                $(this).remove();
            });
            g_vboxlevel--;
        };
        if (action == 'resize') {
            $thisbox = $(document).find('#vbox_'+g_vboxlevel);
            $thisbox.find('.inner-content, .resizable').css({'max-width':(winW - 100) + 'px'});
            $thisbox.find('.inner-content, .resizable').css({'max-height':(winH - 100) + 'px'});
        }
       
    }
}(jQuery));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.fuzz {
    position: fixed;
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
    vertical-align: middle;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}
.fuzz .vbox {
    display: table-cell;
    vertical-align: middle;
}

.fuzz .vbox-content {
    box-shadow: 0 9px 39px #333;
    display: inline-block;
    padding: 20px;
    background: #fff;
    position: relative;
}
.fuzz .inner-content {
    overflow: auto;
    border: 1px solid #ccc;
    padding: 20px;
}
.fuzz .vbox-close{
    position: absolute;
    font-size: 28px;
    text-decoration: none;
    top: -12px;
    right: -12px;
    border: 3px solid #fff;
    box-shadow: 0 0 10px #000;
    border-radius: 16px;
    height: 26px;
    line-height: 22px;
    background: #000;
    color: #fff;
    width: 26px;
    font-weight: bold;
}

Update:

I’ve managed to make some tweaks with the help from some feedback and the vBox plugin is finally ready for release. Enjoy!

Site Migration Plugin for WordPress

I’m in the process of finishing up the first version of the plugin that will make site migration really easy for anyone who wants to migrate their sites entirely from one environment to another. This is a great tool for someone setting up their environments initially. Messing around with the database is not a great idea, so this plugin will handle all of the table copying, etc. The requirements are to have a repository in SVN. A future version will have other repository features, such as GIT.

And here’s the first version for your amusement. Modify to your heart’s content, and send me some notes. I know a lot can be fixed and re-factored to make it better.

okm-sitemover