Skip to content

Instantly share code, notes, and snippets.

@pallavsharma
Created February 7, 2015 04:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pallavsharma/17a57c0504f5a6eaef11 to your computer and use it in GitHub Desktop.
Save pallavsharma/17a57c0504f5a6eaef11 to your computer and use it in GitHub Desktop.
Jquery_loadmask
;(function($){
$.fn.mask = function(label, delay){
$(this).each(function() {
if(delay !== undefined && delay > 0) {
var element = $(this);
element.data("_mask_timeout", setTimeout(function() { $.maskElement(element, label)}, delay));
} else {
$.maskElement($(this), label);
}
});
};
/**
* Removes mask from the element(s). Accepts both single and multiple selectors.
*/
$.fn.unmask = function(){
$(this).each(function() {
$.unmaskElement($(this));
});
};
/**
* Checks if a single element is masked. Returns false if mask is delayed or not displayed.
*/
$.fn.isMasked = function(){
return this.hasClass("masked");
};
$.maskElement = function(element, label){
//if this element has delayed mask scheduled then remove it and display the new one
if (element.data("_mask_timeout") !== undefined) {
clearTimeout(element.data("_mask_timeout"));
element.removeData("_mask_timeout");
}
if(element.isMasked()) {
$.unmaskElement(element);
}
if(element.css("position") == "static") {
element.addClass("masked-relative");
}
element.addClass("masked");
var maskDiv = $('<div class="loadmask"></div>');
//auto height fix for IE
if(navigator.userAgent.toLowerCase().indexOf("msie") > -1){
maskDiv.height(element.height() + parseInt(element.css("padding-top")) + parseInt(element.css("padding-bottom")));
maskDiv.width(element.width() + parseInt(element.css("padding-left")) + parseInt(element.css("padding-right")));
}
//fix for z-index bug with selects in IE6
if(navigator.userAgent.toLowerCase().indexOf("msie 6") > -1){
element.find("select").addClass("masked-hidden");
}
element.append(maskDiv);
if(label !== undefined) {
var maskMsgDiv = $('<div class="loadmask-msg" style="display:none;"></div>');
maskMsgDiv.append('<div>' + label + '</div>');
element.append(maskMsgDiv);
//calculate center position
maskMsgDiv.css("top", Math.round(element.height() / 2 - (maskMsgDiv.height() - parseInt(maskMsgDiv.css("padding-top")) - parseInt(maskMsgDiv.css("padding-bottom"))) / 2)+"px");
maskMsgDiv.css("left", Math.round(element.width() / 2 - (maskMsgDiv.width() - parseInt(maskMsgDiv.css("padding-left")) - parseInt(maskMsgDiv.css("padding-right"))) / 2)+"px");
maskMsgDiv.show();
}
};
$.unmaskElement = function(element){
//if this element has delayed mask scheduled then remove it
if (element.data("_mask_timeout") !== undefined) {
clearTimeout(element.data("_mask_timeout"));
element.removeData("_mask_timeout");
}
element.find(".loadmask-msg,.loadmask").remove();
element.removeClass("masked");
element.removeClass("masked-relative");
element.find("select").removeClass("masked-hidden");
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment