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();
1 Answer 1
The code looks fine to me. Just a couple minor points:
Why do you change the
div'spositiontorelative? If the function is called on adivwith absolute positioning, it would mess up the layout. And you should revert the CSS changes onRemoveMask()to what they were whenMask()was called because thediv's content might depend on a certainoverflowvalue.If the
divchanges 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; }Your mask background currently only supports webkit browsers; you should add the CSS3 variations for the other browsers.
new. All other methods should use camelCase. \$\endgroup\$