Simple element blocker with and without jQuery

If you’re using jQuery the best (the only reasonable?), in my opinion, way to block an element or entire page (for example for updating it contents) is to use blockUI plugin. But, if you only have to block one or two small elements then you may consider writing your own, very simple blocker instad of using blockUI. And if you’re using jQuery only for that purpose (really small project or task), the you may try to do the same without jQuery at all.

Using jQuery without blockUI

Blocking any element isn’t too hard problem and just a few lines should be enough. We’re using a class way of soloving this problem here. Writing this in direct, procedural way, would probably result in even shorter code.

function Blocker(layerName)
{
    this.layerName = layerName;

    this.showLoader = function()
    {
        this.theBlocker = $("<div style='background:url(loader.gif) no-repeat center center;background-color:black;border:none;margin:0;padding:0;position:absolute;width:100%;height:100%;top:0;left:0'></div>").appendTo(jQuery(this.layerName));

        $(this.theBlocker).css({opacity: 0.5});
    };

    this.hideLoader = function()
    {
        $(this.theBlocker).remove();
    };
}

To use this solution in your own project, you only have to copy this class to any of your Javascript source file and modify path to your loader image (loader.gif);

This is 100% Javascript-based solution, that is, why it looks a bit ugly. For a real-time app, you cold consider moving entire style to some CSS file and replace <div style='background:... with <div class="blocker">.

Here is sample code to test above class:

(function()
{
    var l1, l2, l3;

    l1 = new Blocker("#element1");
    l1.showLoader();

    setTimeout(function()
    {
        l2 = new Blocker("#element2");
        l2.showLoader();
    }, 2000);

    setTimeout(function()
    {
        l1.hideLoader();
        l3 = new Blocker("#element3");
        l3.showLoader();
        }, 4000);

    setTimeout(function()
    {
        l2.hideLoader();
        l3.hideLoader();
    }, 6000);
})();

Just add some HTML code (and maybe some styling in CSS), replace #element1 and others with your own object, that you want to block and you’re ready to go.

Pure Javascript

Now, let’s try to do the same without using jQuery at all. Since .appendTo, .remove() and css() are the only functions used here, this shouldn’t be that hard task.

Keep in mind, that (probably) the biggest advantage of jQuery is not it’s simplicity, but its fight for leveraging browser inconsistencies. For this reason, if we’re dropping jQuery at all in this example, we’re also dropping the is.theBlocker).css({opacity: 0.5}) part. Just because of that. It is just a pretty feature, but jQuery does the hard job behind of adapting opacity through all browser-dependent methods (like AX filters and transformations in IE).

Plus, you’re also loosing the element-detecting feature of jQuery, where you could not take care whether Blocker constructor’s parameter (i.e. object to be blocked) is passed as id, class or DOM element. And whether it is just a single object or array of objects. jQuery did that all for you. We’re making simplification, that our Blocker object always accepts only the id, so it always refers to single, named object.

Here’s the function:

function Blocker(blockedElement)
{
    blockedElement = blockedElement.replace('#', '');

    this.blockedElement = document.getElementById(blockedElement);

    this.showLoader = function()
    {
        var cssString = "background:url(loader.gif) no-repeat center center;background-color:black;border:none;margin:0;padding:0;position:absolute;width:100%;height:100%;top:0;left:0";

        this.theBlocker = document.createElement('div');
        this.theBlocker.style.cssText = cssString;

        this.blockedElement.appendChild(this.theBlocker);
    };

    this.hideLoader = function()
    {
        this.blockedElement.removeChild(this.theBlocker);
    };
}

You can of course extended it, for example like that:

this.blockedElement =
    document.getElementById(blockedElement) ||
    document.getElementsByClassName(blockedElement)[0] ||
    document.getElementsByTagName(blockedElement)[0] ||
    document.getElementsByName(blockedElement)[0];

Or, even better, use the solution discussed in [this](Very simple alternative to jQuery.txt) article. But that would surely be reinventing the wheel, and if you need such functionality, you should steer back toward jQuery!