2012
06.26

While working on an ajax UI, I wanted to show that something was happening while preventing the user from interacting with page elements that are getting replaced. I used the .position() function from JQuery UI to place a div directly over the changing content.

    $("#busyIndicatorDiv").position({
        of: $("#changingContentDiv"),
        my: "left top",
        at: "left top",
        offset: 0,
        collision: "none none"
    });

Looking at the code above, you can see that we’re setting the top left corner of our busy indicator at the top left corner of our changing content. The collision property is used to deal with bumping into the edges of the window and since we’re not showing popup menus etc, we don’t want to do anything special so I left it at ‘none none’.

In my particular case I had several elements that were all being loaded with ajax, so I used the JQuery .clone() function to make duplicates of a busy indicator div for each one. I was careful to change the id attribute of each clone to keep them unique and something that I would be able to find easily when it’s time to remove the busy indicator.

$('#busyOverlayBase').clone(true).removeAttr('id').attr('id', busyName).insertAfter($('#busyOverlayBase'));

Try the demo and leave a comment below if you found it useful or had a suggestion.

Comments are closed.