Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

Mask.html

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="mask.js"></script>
        <link rel="stylesheet" type="text/css" href="mask.css">
    </head>
    <body>
        <div id="div1" style="margin: 5px; border: 1px solid red; height: 100px; width: 500px;"></div>
        <div id="div2" style="margin: 5px; border: 1px solid blue; height: 100px; width: 500px">
            <div id="div3" style="margin: 5px; border: 1px solid red; height: 88px; width: 235px; float:left;"></div>
            <div id="div4" style="margin: 5px; border: 1px solid green; height: 88px; width: 235px; float:left;"></div>
        </div>
    </body>
</html>

Mask.js

(function ($) {
    $.fn.Mask = function () {

    if ($(this).find('.Mask').length > 0) return null;
        var __ctrl = $(this)[0];
        if (__ctrl.tagName != 'DIV') return null;

        var containerCssPaddingTop = $(__ctrl).css('padding-top');
        var containerCssPaddingRight = $(__ctrl).css('padding-right');
        var containerCssPaddingBottom = $(__ctrl).css('padding-bottom');
        var containerCssPaddingLeft = $(__ctrl).css('padding-left');

        $(__ctrl).css('position', 'relative');
        $(__ctrl).css('overflow', 'hidden');

        var mask = '<div class="Mask"><div class="MaskContent"><img src="PleaseWait.gif"/></div></div>';
        $(__ctrl).prepend(mask);

        var m = $(this).find('.Mask');
        var mc = $(this).find('.MaskContent');

        m.css('margin-top', '-' + containerCssPaddingTop);
        m.css('margin-right', '-' + containerCssPaddingRight);
        m.css('margin-bottom', '-' + containerCssPaddingBottom);
        m.css('margin-left', '-' + containerCssPaddingLeft);

        // The 16 just comes from the fact that the image displayed is 32x32
        mc.css('left', m.width()/2 - 16 + "px");

        var toReturn = {
            RemoveMask: function () {
                m.remove();
            }
        };

        return toReturn;
    };
})(jQuery);

mask.css

.Mask {
    background-image: -webkit-radial-gradient(center, ellipse farthest-side, #FFFFFF 0%, #EEEEEE 100%);
    height: 100%;
    opacity: 0.8;
    position: absolute;
    width: 100%;
    z-index: 4;    
}

.MaskContent {
    background: none;
    position: absolute;
    top: 30%;
    z-index: 5;
}

The real code I would like reviewed/criticized is in Mask.js and Mask.css

The idea is that this extends jQuery so you can block a div while it is being updated.

You would use it by running

v = $('#div1').Mask()

then, to remove it, one would do

v.RemoveMask();
share|improve this question
4  
Quick comment: PascalCase is only for constructors which are meant to be called with new. All other methods should use camelCase. –  ANeves Dec 4 '12 at 19:04
    
Thank! I will modify it accordingly. –  Matt Dec 4 '12 at 20:05
add comment

1 Answer 1

up vote 1 down vote accepted

The code looks fine to me. Just a couple minor points:

  1. Why do you change the div's position to relative? If the function is called on a div with absolute positioning, it would mess up the layout. And you should revert the CSS changes on RemoveMask() to what they were when Mask() was called because the div's content might depend on a certain overflow value.

  2. If the div changes size while masked, the image will no longer be horizontally centered. I would suggest using CSS instead of JS to center it:

    .MaskContent {
      background: none;
      position: absolute;
      width: 32px;
      height: 32px;
      top: 30%;
      left: 50%;
      margin-left: -16px;
      z-index: 5;
    }
    
  3. Your mask background currently only supports webkit browsers; you should add the CSS3 variations for the other browsers.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.