Code Monkey home page Code Monkey logo

jquery-loadmask-plus's Introduction

jquery-loadmask-plus

Build Status

A fork of jquery-loadmask which intends to modernise the look and feel of the original plugin by way of CSS updates and improved API usage.

The source code was exported to GitHub from Google Code

My additional functionality is noted in the original README document from the original repository along with some edits (shown below).

####Project installation

  • Download the release .zip
  • Use the hosted version:
//cdn.calcroft.co/jquery.loadmask-plus.min.js
//cdn.calcroft.co/jquery.loadmask-plus.min.css

####Development install

  1. Get the source code git clone https://github.com/robcalcroft/jquery-loadmask-plus.git
  2. Install Ruby
  3. Install Compass gem update --system && gem install compass
  4. Install dependancies npm install gulp jshint -g && npm install
  5. Build out the source gulp

####Notes

  • Only use this on container elements; I have found that this does not play well with padding and causes an offset on the text.

LoadMask jQuery plugin can mask DOM elements while their content is loading or changing to prevent user interactions and inform that some background task is still running. It is very light (~2Kb) and easy to use.

The behavior of this plugin is largely based on handy Element.mask() method from ExtJS Framework.

#Usage jQuery version required: > 1.2.3.

Please note that only elements that accept child nodes can be masked.

To start using the plugin you need to include jquery.loadmask.css and jquery.loadmask.js (or its minified version jquery.loadmask.min.js) to your html page:

<link rel="stylesheet" type="text/css" href="//cdn.calcroft.co/jquery.loadmask-plus.min.css" />
<script type="text/javascript" src="//cdn.calcroft.co/jquery.loadmask-plus.min.js"></script>

##Masking To put a mask over an element (or multiple elements) simply call mask(options) method :

$("#myDiv").mask() // Will show the loading animation in white

$("#myDiv").mask({
  iconColour: "red" // Updates the colour of the loading animation
});

// Alternatively, specify a label to be shown instead of the icon
$("#myDiv").mask({
  label: "Loading",
  delay: 500
});

###Options can be:

  • iconColour
  • bgColour
  • delay
  • label

The delay property sets a delay in milliseconds before element(s) is masked. If unmask() is called before the delay times out, no mask is displayed. This can be used to prevent unnecessary mask display for quick processes.

Note that the if the label property is set the icon will not be shown

##Unmasking To remove a previously displayed mask from an element (or multiple elements) call unmask() without any parameters:

$("#mydiv").unmask();

Calling unmask() on a delayed mask prevents it from showing up.

##Checking if an element is masked

You can use isMasked() method on a single element to check if it is currently masked. Please note that this method will return false whilst mask is delayed.

if($("#mydiv").isMasked()) { ... }

#Integration with ASP.net UpdatePanel Please take a look at this code.

#Integration with Jquery UI Please take a look at this code.

#Contributors

  • wpaap - provided snapshot for integration with ASP.net UpdatePanel
  • Artur Alexandre Moreira ([email protected]) - implemented delayed mask
  • theonlylawislove - provided Jquery UI integration solution

Thank you!


Thanks to Sergiy for the creation of this plugin!

jquery-loadmask-plus's People

Contributors

jxprime avatar robcalcroft avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

tayoagagu jxprime

jquery-loadmask-plus's Issues

Delayed Double-masked element does not unmask

What steps will reproduce the problem?
1. mask element A with a delay of 5000 (to be observable)
2. mask again element A with a delay of 5000
3. unmask element A

What is the expected output? What do you see instead?
I expect the element A never to be masked, or to be unmasked is mask appeared 
(because of delay)
What I see is that enven if unmask is called, the mask will appear seconds 
later...

What version of the product are you using? On what operating system?
Don't know: no revision number is written in the file :/


Original issue reported on code.google.com by [email protected] on 3 Aug 2012 at 10:11

function names collide with other jquery input mask plugin

What steps will reproduce the problem?
1. using this along with mask plugin 
http://digitalbush.com/projects/masked-input-plugin/

What is the expected output? What do you see instead?
The loadmask plugin doesnt work due to function name collision

I suggest renaming the functions so this will  not occur:
mask -> loadmask
unmask -> unloadmask

Original issue reported on code.google.com by [email protected] on 18 Jan 2011 at 1:48

Publish To NPM/Bower

The README says to pull in dependencies with npm.
However, I can't see this project in npm.

Can you publish to npm (or bower)?

Thanks

jQuery UI + Loadmask + FullCalendar

What steps will reproduce the problem?
1. jQuery UI 1.8.11
2. Internet Explorer
3. FullCalendar (http://arshaw.com/fullcalendar/)

What is the expected output? What do you see instead?
Masks instead, in Internet Explorer I do not see the mask or message (I believe 
it is being generated correctly but is being overlapped by some element of the 
jQuery UI CSS)

What version of the product are you using? On what operating system?
0.4

Please provide any additional information below.
I have tried to use the jquery-loadmask for jQuery UI listed on Project Home, 
but function 'unmask()' does not fire correctly, and the mask message is still 
behind some elements


Original issue reported on code.google.com by [email protected] on 19 Apr 2011 at 10:50

mask not shown after executed .mask sentence in business function under IE

What steps will reproduce the problem?
1. In business function abc(){
$("#content").mask("Waiting...");
//here do sth
//here do others
}//here business function end
2. debug codes .mask bellow
3. mask not show

What is the expected output? What do you see instead?
I want see the mask,but nothing instead.In fact, <div class="loadmask"></div> 
already existed after execute .mask.

What version of the product are you using? On what operating system?
may

Please provide any additional information below.

Original issue reported on code.google.com by [email protected] on 4 Mar 2014 at 2:22

Bug in IE9

Version 0.4

This code:

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");

in result in sets top and left properties to NaN (detected with alert()). Any 
fixes?

Original issue reported on code.google.com by [email protected] on 2 Feb 2011 at 11:06

use base64 encoded image instead of hard link

There is a link in the css file to ../images/loading.gif.  This forces a 
specific setup or requires changing the file.  It'd be much more flexible to 
just change the background to:

background: #fbfbfb 
url(data:image/gif;base64,R0lGODlhEAAQALMMAKqooJGOhp2bk7e1rZ2bkre1rJCPhqqon8PBud
DOxXd1bISCef///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAAMACwAAAAAEAAQAAAET5
DJyYyhmAZ7sxQEs1nMsmACGJKmSaVEOLXnK1PuBADepCiMg/DQ+/2GRI8RKOxJfpTCIJNIYArS6aRajW
YZCASDa41Ow+Fx2YMWOyfpTAQAIfkEBQAADAAsAAAAABAAEAAABE6QyckEoZgKe7MEQMUxhoEd6FFdQW
lOqTq15SlT9VQM3rQsjMKO5/n9hANixgjc9SQ/CgKRUSgw0ynFapVmGYkEg3v1gsPibg8tfk7CnggAIf
kEBQAADAAsAAAAABAAEAAABE2QycnOoZjaA/IsRWV1goCBoMiUJTW8A0XMBPZmM4Ug3hQEjN2uZygahD
yP0RBMEpmTRCKzWGCkUkq1SsFOFQrG1tr9gsPc3jnco4A9EQAh+QQFAAAMACwAAAAAEAAQAAAETpDJyU
qhmFqbJ0LMIA7McWDfF5LmAVApOLUvLFMmlSTdJAiM3a73+wl5HYKSEET2lBSFIhMIYKRSimFriGIZiw
WD2/WCw+Jt7xxeU9qZCAAh+QQFAAAMACwAAAAAEAAQAAAETZDJyRCimFqbZ0rVxgwF9n3hSJbeSQ2rCW
IkpSjddBzMfee7nQ/XCfJ+OQYAQFksMgQBxumkEKLSCfVpMDCugqyW2w18xZmuwZycdDsRACH5BAUAAA
wALAAAAAAQABAAAARNkMnJUqKYWpunUtXGIAj2feFIlt5JrWybkdSydNNQMLaND7pC79YBFnY+HENHMR
gyhwPGaQhQotGm00oQMLBSLYPQ9QIASrLAq5x0OxEAIfkEBQAADAAsAAAAABAAEAAABE2QycmUopham+
da1cYkCfZ94UiW3kmtbJuRlGF0E4Iwto3rut6tA9wFAjiJjkIgZAYDTLNJgUIpgqyAcTgwCuACJssAdL
3gpLmbpLAzEQA7) no-repeat 5px 5px;

Original issue reported on code.google.com by [email protected] on 12 Sep 2013 at 9:31

mask use on form causes instant redirect

What steps will reproduce the problem?

html:
<div id="updateBox">
<form action="#" id="exampleForm">
<input type="submit" />
</form>
</div>

JQuery (with the problem)
<script type="text/javascript">
$("#exampleForm").submit(function(){
$("#exampleForm").mask("Doing something..");
alert("you should see this too");
return false;
});
</script>

the problem here is, it doesnt even shows the alert, it just sends the form 
even though there is a return false, doing this without the mask plugin will 
result in a succes.
masking the Parent DIV doesnt works either.


What is the expected output? What do you see instead?
in the example above, an alert and not sending the form, instead it doesnt 
shows the alert and sends the form.


Original issue reported on code.google.com by [email protected] on 7 Jun 2011 at 11:54

Mask does not mask over comboboxes in IE6

What steps will reproduce the problem?
1.IE6 and a combobox 

What is the expected output? What do you see instead?
masking of all elements on page

What version of the product are you using? On what operating system?
IE6

Please provide any additional information below.
Possible solution (have not tried, just thinking out loud):
adding a "marker" class to all comboboxes requiring a visibility: hidden style
during masking and then unmarking (remove marking class) and make combobox
visible during unmask.

Original issue reported on code.google.com by [email protected] on 8 Aug 2009 at 8:57

Mask not showing in Google Chrome and IE8

What steps will reproduce the problem?
1. Just use a standard jquery mask call in Chrome or IE 8
2. The mask doesn't show


What is the expected output? What do you see instead?
I expect the mask to appear, then dissapear, and then the result

What version of the product are you using? On what operating system?
latest, windows 7

Please provide any additional information below.


Original issue reported on code.google.com by [email protected] on 21 Sep 2010 at 8:31

It doesn't come in center when the document.body is masked

What steps will reproduce the problem?
1. open console and write this code $(document.body).mask("loading...");
2. The image and label doesn't come in the center of the page, even people can 
not able to see.

What is the expected output? What do you see instead?
The image and label should come in center of the page.

What version of the product are you using? On what operating system?
Window XP, IE 8, Mozila 23.


Original issue reported on code.google.com by tameshwar.nirmalkar on 22 Jul 2013 at 2:01

Attachments:

Nested masks unmasked on outer most call to unmask()

What steps will reproduce the problem?
1. Mask an element
2. Mask an inner element
3. Unmask the outer element

What is the expected output? What do you see instead?

When outer element is unmasked, the inner mask persists

What version of the product are you using? On what operating system?

0.4 Linux

Please provide any additional information below.

When unmasking, jquery.find() is used to find the mask elements.  Use 
jquery.children() instead:

Patch:

102c102
<     element.find(".loadmask-msg,.loadmask").remove();

---
>     element.children(".loadmask-msg,.loadmask").remove();


Original issue reported on code.google.com by [email protected] on 15 May 2012 at 1:39

Improved code and more support.

I couldn't find discussions so I am posted some revised code that may be
useful.

I made the html rendered by loadmask to correspond with jquery-ui's overlay.
Example found here. http://jqueryui.com/themeroller/ 

I also improved centering to use outerwidth rather than manually adding
paddings. This gives a more accurate reading in cross browser scenarios.

I also added the ability to have the label parameter passed to mask(label)
to either be a string or a jquery object (for custom formats).


Original issue reported on code.google.com by [email protected] on 4 May 2010 at 9:37

Attachments:

Chaining patch

Currently, this plugin cannot be chained.
Please add "return this;" statements to the tails of $.fn.mask and $.fn.unmask 
to make it chainable.
Same for the jQueryUI themeroller-compatible version, which is the one I plan 
to use.

Original issue reported on code.google.com by [email protected] on 31 Oct 2011 at 2:47

CSS causes issues with other SVG applications.

I'm writing this so I have a place to put my screenshot basically, I've already submitted a PR for this issue. When using this plugin w/ the Bing Maps SDK and the DirectionsManager, there seems to be a conflict with the styling.

image

Delay on load then unload

This inst necessarily a problem but I was wanting to be able to have this 
display load then unmask after the images / page load.  Made a minor adjustment 
to the code.  Rather have it delay the unload process than the loading of the 
"loading" mask.  Great JQuery plugin though, Kudos


$.maskElement($(this), label);
element.data("_mask_timeout", setTimeout(function() { 
$.unmaskElement(element)}, delay));



M97


Original issue reported on code.google.com by [email protected] on 17 Aug 2011 at 2:09

Addes posibility to specify position from top

My requirement was to be able to apply load mask to the entire page when 
submitting a form, and show the loading message at a height where the user can 
actually see it if the page is too long.

It works like this: $("#wrap").mask("Loading..",0,240);

The third parameter specifies how many pixels from top to place the loading 
message.

Hope someone finds it useful and will be somehow integrated in a newer version.

Nice plugin, thanks!

Original issue reported on code.google.com by [email protected] on 1 Feb 2012 at 12:12

Attachments:

Show Load Div in Viewport

What steps will reproduce the problem?
1. Have a page with a large scroll

Please update so the div shows in the view port not the auto height of the div 
when applying a load to the body.  i.e. $("body").mask()

Original issue reported on code.google.com by [email protected] on 11 Apr 2012 at 8:56

To mask entire webpage, the waiting.. loader is not seen

What steps will reproduce the problem?
1. ("body").mask()
2. The loader is not seen if I am on top or bottom of the web page
3.

What is the expected output? What do you see instead?
It should be relative to the window not the webpage. It always displays in
the middle of the webpage. But when I am at the bottom of the webpage,
loader is not visible.

What version of the product are you using? On what operating system?
Latest, Win and Ubuntu

Please provide any additional information below.


Original issue reported on code.google.com by [email protected] on 26 Apr 2010 at 10:43

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.