hekigan / is-loading Goto Github PK
View Code? Open in Web Editor NEWSimple library to show visual feedback when loading data or any action that would take time
Home Page: http://hekigan.github.io/is-loading/
License: MIT License
Simple library to show visual feedback when loading data or any action that would take time
Home Page: http://hekigan.github.io/is-loading/
License: MIT License
how can i use the plugin inside ui widget selectmenu?
I would like the ability to add an overlay while I am setting up content behind the mask. However, the library assumes that new content will replace the overlay. Is there a possibility of allowing the remove method to remove itself from the DOM?
When the element I need to apply the load mask to has a margin on top or left the overlay is not positioned properly. I fixed this for me by making these changes on line 125 of the non minified js file:
var marginTop = parseInt($(this.element).css('marginTop')), marginLeft = parseInt($(this.element).css('marginLeft'));
$( this.element ).prepend( '<div class="isloading-overlay" style="position:absolute; top: ' + (pos.top + marginTop) + 'px; left: ' + (pos.left + marginLeft) + 'px; z-index: 10000; background: rgba(0,0,0,0.5); width: ' + $( this.element ).outerWidth() + 'px; height: ' + $( this.element ).outerHeight() + 'px;" />' );
This change retrieves margin-top and margin-left and factors is into the top and left styles of the overlay.
This may need to be slightly reworked to not make this adjustment when the elements position is relative. I don't have this scenario currently, so I did not test that.
According to the documentation (https://fortawesome.github.io/Font-Awesome/examples/) the template should be changed to
<i class="fa fa-refresh fa-spin"></i>
to support the current (renamed?) refresh icon of Font Awesome
using "ui tab" with isloading option "position: overlay"
if browser window is resized also the ui-tab is resized but the overlay not
The code - the generated HTML layout - depends on css files, that are not included in this repository. External files might change without any notice, and they are licensed completely differently then this jquery plugin. So... you wont be able to get similar outlook for your overlays without including those files as well...
I've been using it since version 1.
I want to use the updated version, but the message " Module is not defined " is displayed.
I imported isLoading.js from npm, is it wrong?
**Browser Version: Chrome
Node.js Version: not Node.js, jquery 1.12.4
I want to use isLoading for all ajax request in my aplication, using this code:
$(function() {
// Action on Click
$(document).ready(function() {
$.isLoading({ text: "Loading" });
// Re-enabling event
setTimeout( function(){
$.isLoading( "hide" );
}, 2000 );
});
});
The image load's perfectly but when the request it's completed it keeps the overlay and the loading icon on the screen
I think that is more convenience to manage this plugin.
If "hide" is called before any invocation of "isLoading", it is showing a loading overlay attached to the body of the page.
The problem can be observed in this fiddle: http://jsfiddle.net/ZQ99w/
If the button "Hide" is clicked before clicking the Load button at least once, it shows a loading overlay.
Background info: I currently need to execute an operation that will display a modal window to the user, regardless of any process that has'nt finished loading yet, so I was calling $.isLoading("hide");
to hide any possible loading overlay, because I don't know of a way of checking if the loading is being displayed or not.
Ran across this issue during testing on a client application. It appears the anchor tags fail to display the loading screen correctly in Safari 9.0 (OsX 10.11). In our case we are using jQuery to handle the client side click event of some anchor tags and calling the isloading before we redirect. This has been validated to be working on: IE9 (Win), IE10(Win), FF 38.1.1(Win), Chrome 46 (Os X 10.11).
I was also able to replicate the behavior in your demo site (http://hekigan.github.io/is-loading/) by modifying the "Overlay" example: I changed the <span>
button (line 170) to the following anchor tag
<a href="http://hekigan.github.io/is-loading/" class="btn" onclick="$.isLoading({ text: "Loading" });">Test</a>
. Then I commented out the JS inside the <script></script>
block (lines 176-195).
So on all browsers but Safari the div overlay & animation is displayed before the re-direct occurs, but the Safari browser fails to display the overlay.
When i use "is-loading" same as:
function blockScreen() {
isLoading({text: 'Loading...'}).loading();
}
function unBlockScreen() {
isLoading().remove();
}
/** try to remove isLoading screen without activate **/
unBlockScreen();
browser alert this error:
TypeError: Argument 1 of Node.removeChild is not an object. isLoading.js:248:13
**Browser Version:
Firefox 57.0.1 (64-bit) linux mint
Hi.
I implemented this plugin with jquery and used it in two instances, loading and saving data. In the data load, this shows me the text that you configure in the options. Then I need to save the data and create other options with another text (for example: Save) for the other instance but, in load (with the new options) this dont change text... both are in full-overlay ($.isLoading(OPTIONS)).
This is the reason:
// Constructor
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if ( !$.data( this, "plugin_" + pluginName ) ) {
$.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
} else {
var elt = $.data( this, "plugin_" + pluginName );
if ("hide" === options) { elt.hide();}
else { elt.show(); }
}
});
};
I change for this:
// Constructor
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if ( !$.data( this, "plugin_" + pluginName ) ) {
$.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
} else {
var elt = $.data( this, "plugin_" + pluginName );
if ("hide" === options) {
elt.hide();
$.removeData(this, "plugin_" + pluginName)
}
else { elt.show(); }
}
});
};
with this, dont use the old Options ("load" for example).
Browser:
Chrome 59.0.3071.115 x64
Loading animation don't appear.
I attempted to use it for an async content download, and I add for example 10 000 lines to the end of the page. The css rules present:
.isloading-overlay .isloading-wrapper { top: 10%; }
This value with the updated page content of mine means that the overlay is about 1000 * 10% lines from the top, that is way outside of the screen.
I have my loading text coming out but the icon dont. Where do i did wrong?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.