2

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!

Sage Mitchell
  • 1,563
  • 8
  • 31
Marco
  • 2,453
  • 3
  • 25
  • 35

3 Answers3

2

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.

Michael
  • 15,386
  • 36
  • 94
  • 143
Steven
  • 13,250
  • 33
  • 95
  • 147
  • Yes, i knew it was only mean for displaying animation but its being heavily utilized from what ive read in ajax scenarios, so my requirement seems very common. i'll give that a try, thx. – Marco Jan 25 '13 at 20:52
2

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();
nitsua
  • 763
  • 8
  • 20
0

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

TacoEater
  • 2,115
  • 20
  • 22