hekigan / is-loading Goto Github PK

Loading animation don't appear.

I think that is more convenience to manage this plugin.

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: &quot;Loading&quot; });">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.

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

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

how can i use the plugin inside ui widget selectmenu?

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

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 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

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

using "ui tab" with isloading option "position: overlay"
if browser window is resized also the ui-tab is resized but the overlay not

I have my loading text coming out but the icon dont. Where do i did wrong?

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.

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.

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.

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...