-3

I have a div in the center of a page that displays some content. When the user clicks a button, I make an AJAX call to get some new data to display in the div. I want to do the following to the DIV while I wait for the data from the AJAX call...

1) Change the opacity for all content in the div to 50%

2) Prevent any content that was clickable in the DIV from being clicked; I don't want to the user to do anything until AJAX call returns

3) Overlay a image in the center of the div that displays a loadingicon (assume I have an image named loading.gif for this)

4) As soon as the AJAX call returns with data, return the opacity back to normal and remove any restrictions on clickability in the DIV, and turn off the loading image icon.

Are there any frameworks for this?

raffian
  • 31,267
  • 26
  • 103
  • 174
  • 7
    -1. Have you tried anything? If so, where are you getting stuck? – maxedison Jan 21 '12 at 16:29
  • What's with the down vote? The question was explained clearly, and I asked for a code sample OR a link to a framework – raffian Jan 21 '12 at 16:52
  • 2
    You're getting down votes because you are supposed to have tried something, gotten stuck, and then posted here a specific question related to where you got stuck. Simply saying "I want to do this. Give me the code" is not an acceptable question. – maxedison Jan 21 '12 at 18:07
  • With all due respect, but clearly it was an acceptable question since others were courteous enough to post a link as an answer, which was more than sufficient for my needs...read the FAQ instead of conjuring up your own rules. – raffian Jan 21 '12 at 18:20
  • possible duplicate of [Javascript - loading/busy indicator or transparent div over page on event click](http://stackoverflow.com/questions/205631/javascript-loading-busy-indicator-or-transparent-div-over-page-on-event-click) – outis Jan 21 '12 at 19:17
  • Question suspected of duplicate is over 3 years old, perhaps previous answers are outdated? – raffian Jan 21 '12 at 21:43

2 Answers2

1

There is a good plugin for this that called Nimle Loader http://www.salesclic.com/jquery.nimble.loader/demo/

Per Kastman
  • 4,466
  • 24
  • 21
0

if you put a div with the needed opacity above the form, using with higher z-index, all clickable items won't be clickable. See "Opacity of div's background without affecting contained element in IE 8?".

Community
  • 1
  • 1