carlosbonetti / jquery-loading Goto Github PK

View Code? Open in Web Editor NEW

355.0 355.0 200.0 2.71 MB

Easily add and manipulate loading states of any element on the page.

Home Page: http://carlosbonetti.github.io/jquery-loading/

License: MIT License

JavaScript 97.81% CSS 2.19%

easy-loading javascript jquery jquery-plugin loading

jquery-loading's People

Contributors

Stargazers

Watchers

Forkers

goupviet incraigulous honger05 metsystem wqsaali leonardoscorza liangxm victordpg chandra10207 huabotang victordf lixinxiaobai sbespalov gottaboy krucamper thandonguocmo2020 rohitutekar tteasel jumpbyte jsyluo maki80 li5t sametozcan89 saguajardo iamchurchill meugarfo rjkhan devhong hquangthien-it1 adelghr kishodai bruce994 ytzyangting talonswordno1 batay rafamc djaymago shahzadthathal iwebdesignthai jaymz9634 dinhchuong7913 tttsunny v1xingyue rodneileal royalparihar fercastroud chaofenonline joedefadel filippir 10xsebastian srutheesh0 sistiandy ahnjunwoo robertogallardo dreamflywang tekintian zeusbaseweb marcoc22 rodrigore meetkishan muhammad-habib rociwo captianli dmartinezlopez viniva diegobuenocoelho-zz limingxu-notts materliu kareekij hoyongryu uc-rri sanker2008 thawatchai-goingjesse mzahirr sunilnkashyap dennisshen7 omidheshmatinia ranabilalzafar byungjune hectormmg xkf163 ashrafdev aksenventwo pendechosen tayanevalls pampapathi-vandli mluna97 hammourihab japsz markmumi ignaciogans duongkhanhnghia-hh ycshill zzq0826 adisazhar123 johnhe2015 anassbaba theabdulbari gnyaliyeva yoyochi

jquery-loading's Issues

Unable to get the overlay to display

I'm having problems getting the overlay to display correctly.

I have a table with an id of '#rounds' I've initiated the plug in using:
$('#rounds').loading();

At this point I can see the div loading within the elements at the base of the page (in chrome developer tools) which looks like this:

<div class="loading-overlay loading-theme-light loading-shown" style="display: none; position: absolute; z-index: 1; top: 280px; left: 9px; width: 923px; height: 123px;" id="rounds_loading-overlay"><div class="loading-overlay-content">Loading...</div></div>

I'm trying to use the overlay in a click event.

$('.delete-row').click(function (e) {
            $('#rounds').loading();
            e.preventDefault();
            submitDeleteRequest($(this))
        });

I've tried as a test to place it in the doc ready, it only displays if I move my mouse away from the main page element, into say chromes toolbar at the top or a side menu in the page. Otherwise It's not visible - strange

Am I missing something?

I'm using ver 1.10

Thanks

If you use multiple loadings, message does not change

I got 2 buttons with ajax on them,

first one
...
beforeSend: function () {
$('body').loading({
stoppable: false,
message: 'Unpublish...'
});
},
...

second one
...
beforeSend: function () {
$('body').loading({
stoppable: false,
message: 'Publish...'
});
},
...

if i click "publish", then another button will have same message and vice versa

Multiple loading with custom overlay

Since every loading call with a setting (like custom overlay) destroy the old ones (cmiiw), how can I create multiple loading with custom overlay?

can't mask all body when work with jeasyui

can't mask north region by the blow code (sorry can't upload htm file ,please change test.txt to test.html):
test.txt

Submit button inside form tag doesn’t work in Safari

I can't seem to figure out how to make the <button> inside a <form> work in Safari for macOS or iOS. Works in Firefox and Chrome.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jquery-loading test</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.jsdelivr.net/npm/jquery-easy-loading/dist/jquery.loading.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="row">
	    <h2>Full page loader</h2>
	    <div class="col-xs-6">
	      <form action="http://yahoo.com:8080/" method="post">
            <button id="loading-form-btn" class="btn btn-danger">Inside Form</button>
	      </form>
	      <script>
          $('#loading-form-btn').click(function() {
            $('body').loading({
              stoppable: true
            });
          });
	      </script>
	    </div>
	    <div class="col-xs-6">
	      <div>
	        <button id="loading-body-btn" class="btn btn-success">Outside Form</button>
	      </div>
	      <script>
          $('#loading-body-btn').click(function() {
            $('body').loading({
              stoppable: true
            });
          });
	      </script>	  
	    </div>
      </div>
    </div>
    <script src="http://cdn.jsdelivr.net/npm/jquery-easy-loading/dist/jquery.loading.min.js"></script>
  </body>
</html>

How to destroy plugin instance?

Hi.
Is there any methods to destroy plugin instance? Something like $( element ).loading('destroy')?
The problem is that when i am doing $( element ).loading('stop') the overlay div element still exists in the DOM.

Unable to use multiple instances on same element

For some reason, I'm unable to open multiple instances of the loading object on the same page.... not at the same time. I'm listing lots of files to download and each time a file is downloaded I'm trying to add the overlay to the browser for a second. It works the first time, and closes correctly, but after that it doesn't appear anymore. I've verified the function is still called correctly and executes correctly.. it just doesn't show anything. No errors in the console.

$(document).ready(function()
{
	$(".download-overlay").on("click", function (e)
	{
		/* Add overlay */
        $("body").loading({
            stoppable: true,
            theme: "light",
            overlay: $("#submission-overlay"),
        });

		/* Set timeout */
		setTimeout(function()
		{
			$("body").loading('stop');
		}, 1000);
	});
});

My HTML:

<span class="line-break"><a class="download-overlay" href="{{ base['links']['site'] }}downloads/file/{{ file['id'] }}-{{ file['seo_title'] }}/?do=download&csrfKey={{ base['csrfKey'] }}" rel="nofollow" title="{% trans from "downloads" %}Download File ({{ size }}){% endtrans %}"><img src="{{ base['links']['cdn'] }}images/download_file.png" alt="{% trans from "downloads" %}Download{% endtrans %}"></a></span>

And submission overlay:

<div id="submission-overlay" style="display:none">
    <div class="loading-spinner"></div>
</div>

Using Jquery 2.1.4.....

Nuget package deployment

I'd love to be able to install the package through Visual Studio's Nuget Package Manager. Creating and deploying is very easy, here you can find the details: https://docs.nuget.org/Create/using-a-gui-to-build-packages

there is no destroy method

When I try to use the destroy method I get:

jquery.loading.min.js:9 Uncaught TypeError: Cannot read property 'apply' of undefined
at HTMLDivElement. (jquery.loading.min.js:9)
at Function.each (jquery-1.11.1.min.js:2)
at m.fn.init.each (jquery-1.11.1.min.js:2)
at m.fn.init.a.fn.loading (jquery.loading.min.js:9)
at :1:27

for reproduction, you can open the browser console on the demo page and type:

    $('#loading-light-theme').loading('destroy')

Bad position

When use loading, and the origin element is modified, the loading layer still in the position, showing in bad position.

z-index 9 is too low

I see that the jquery loading overlay has always z-index of 9. I think there should be some way of overriding this.

I'm using Bootstrap modals, which have z-index of 1050 and I cannot get the loading overlay displayed on top of them, since they get inline CSS with z-index 9. Any idea how I could work around this?

critical dependency error on laravel mix

i got this error, can you explain me how to solve it?
thanks
WARNING in ./node_modules/jquery-easy-loading/dist/jquery.loading.min.js
9:147-174 Critical dependency: the request of a dependency is an expression
@ ./node_modules/jquery-easy-loading/dist/jquery.loading.min.js
@ ./resources/assets/js/app.js
@ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

loading('stop') displyaing the loading widget

Hey guys,

When I use .loading('stop'); on an element that was NOT already displaying the widget, it starts displaying.

The expected behavior would be nothing. If i call loading('stop'); and there is no loading on this element, nothing should happen.

I know it's an on the edge case, but in my case sometimes it happens..

Error: Cannot find module '[object Window]'

If module is required through Webpack (i.e. with require('jquery-easy-loading');) an error appears in the js console:

Error: Cannot find module '[object Window]'

This is due to the AMD define:

if (typeof define === 'function' && define.amd) {
      // AMD
      define(['jquery', window], factory);
}

that requires window.
I'm not sure if that is needed in some other situation, but changing the define to:

define(['jquery'], factory);

solves the issue in my case.

$(...).loading is not a function

$('*[ajax-form-container]').fajax({
	beforeSend: function() {
		$('body').loading();
	},
    success: function(){
        toastr.info('The form was successfully sent');
        $('body').loading('stop');
    },
});

it error $(...).loading is not a function when i submit form!

the file of jquery.loading.min.js contains 'const' symbol

as the title described, the compressed version of jquery-loading, contains an es6 syntax—— const, which can't be supported by IE explorer.

Does it possible to add a update message function?

Which the update function can let user to update the loading object message?
for example:
loading...
then update the mesasge to
processing...
etc.

Thanks for your help.

Overlay doesn't hide and a second overlay appears over first one

Hello,
thank you for your nice plugin !
I don't know if it's a real issue (maybe I simply use incorrectly your plugin), but in some cases I get 2 overlays that never disappear.
It happens only when I modify html content (using html(strData)) before removing the overlay (using loading('stop')).

JQuery version is 1.11.1, tested on Chrome 35.

Example :

...

Will work :
$("#submit-button-id").click(function(event) {
event.preventDefault();
$("#feedback-panel-id").parent().hide();
$("#feedback-panel-id").html('');
$('body').loading({
message: 'My overlay ...'
});
$.ajax({
url: 'url_for_form_validation',
type: "post",
data: $("#form-id").serialize(),
dataType: "html",
success: function(strData) {
if (strData !== '') {
// Put loading('stop') BEFORE html('').html(strData)
$('body').loading('stop');
$("#feedback-panel-id").html('').html(strData);
$("#feedback-panel-id").parent().show();
} else {
$("#form-id").submit();
}
},
error:function(){
// Put loading('stop') BEFORE html('Error !')
$('body').loading('stop');
$("#feedback-panel-id").html('Error !');
$("#feedback-panel-id").parent().show();
}
});
return false;
});

Will not work (the overlay doesn't hide and a second overlay appears over first one !) :
$("#submit-button-id").click(function(event) {
event.preventDefault();
$("#feedback-panel-id").parent().hide();
$("#feedback-panel-id").html('');
$('body').loading({
message: 'My message ...'
});
$.ajax({
url: 'url_for_form_validation',
type: "post",
data: $("#form-id").serialize(),
dataType: "html",
success: function(strData) {
if (strData !== '') {
$("#feedback-panel-id").html('').html(strData);
$("#feedback-panel-id").parent().show();
// Put loading('stop') AFTER html('').html(strData)
$('body').loading('stop');
} else {
$("#form-id").submit();
}
},
error:function(){
$("#feedback-panel-id").html('Error !');
$("#feedback-panel-id").parent().show();
// Put loading('stop') AFTER html('Error !')
$('body').loading('stop');
}
});
return false;
});

Thank you for your help :)

Issue using in a Bootstrap modal dialog

I'm trying to use this to put a loading overlay on top of a Bootstrap dialog, but it does not have a high enough z-index to get above the Bootstrap modal. I had to force it to use a higher number. Is there any reason why you don't just always default it to be some gigantic z-index? Also, the default Bootstrap styling makes the modal have rounded corners, but the overlay does not, so you can see the overlay over the corners. Maybe the plugin could detect if the target has rounded corners, and if so, also round the overlay div.

My CSS:
.loading-overlay {
display: table;
opacity: 0.9;
z-index: 25000 !important;
}

carlosbonetti / jquery-loading Goto Github PK

jquery-loading's People

Contributors

Stargazers

Watchers

Forkers

jquery-loading's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs