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();
new
. All other methods should use camelCase. – ANeves Dec 4 '12 at 19:04