CODEWITHSUNDEEP
jquerycssajaxspin.js
Marco
Marco

Reputation: 2473

Spin.js - Disabling element when loading

I am wanting to use the spin.js library when users are performing actions on my site but i am not seeing how or if it is possible to disable the element the spinner is on top of. for example, when my grid is loading i do not want the user clicking on anywhere on the grid itself.

thanks!

Upvotes: 2

Views: 4753

Answers (3)

Steven
Steven

Reputation: 13985

Spin.js is just an animated spinning animation. If you want to turn off everything else "behind it" I assume it is in a modal window, in which case you just need a 100% width and height div that has a z-index higher then that of every other element with the spinner on it.

So something like

<div style="width:100%;height:100%;position:absolute;top:0px;left:0px;z-index:9999;">
SPIN STUFF with z-index 10000;
</div>

That would cover every element and prevent them from clicking on it.

If I read your question wrong let me know.

Upvotes: 2

TacoEater
TacoEater

Reputation: 2278

I added block UI to spin.js, It uses the bootstrap css because that's what I use but you can adapt it to your own needs.

spin.backdrop

Upvotes: 0

nitsua
nitsua

Reputation: 793

Steven's answer works to disable the page - however, I found that if I used that method, the other elements on the page remained blocked and could not be clicked on. You could get around it with hiding and showing the element as desired - however, when I did that I found that the SpinJS spinner stopped centring and ended up in the top-left corner.

In the end, I combined SpinJS with the JQuery BlockUI Plugin, which puts an overlay over the page temporarily and prevents any clicking, with some customisable options.

So in the end, my code looks something like...

var target = document.getElementById("centre");
var spinner = new Spinner(opts).spin(target);
$.blockUI({ message: null, overlayCSS: { backgroundColor: '#ddd' } });

//Things things things  

spinner.stop();
$.unblockUI();

Upvotes: 2

Related Questions