|
Hello everyone,
I'm searching for a way to do a overlay with a loading indicator cover only 1 div on the page.
the reason i want to do this is that i'll have multiple sections in my pages that will do ajax calls to the server to get data and display in fields, most will be calculation results, so i don't want to replace the div's content, just the field value.
in my searchs, i only found solutions for overlays that cover the entire screen, that's good, but i want the rest of the page to be accessible while the ajax request goes on the background.
right now, i've the following code to create a overlay:
var lockOverlayHtml = '<div class="overlayDiv"></div>';
var lockElement = (function (container) {
var element = $(container);
var overlay = $(lockOverlayHtml);
overlay.offset(element.offset());
overlay.height(element.outerHeight(false));
overlay.width(element.outerWidth(false));
overlay.appendTo(document.body);
});
problem is, i can't think in a way to remove only this overlay when the ajax request ends, as it can be used to cover any element on the screen and i can have multiple ones at a time.
what can i use to identify this overlay and remove it?
i thought in something like generating a id using the coordinates, is it a good idea?
also, don't know if i can ask this here, but the overlayDiv class looks like this:
.overlayDiv
{
position: absolute;
opacity: 0.5;
z-index: 1000;
background-color: #606060;
}
this will work even when the browser scrolls? or i need to do something else in that case?
I'm brazilian and english (well, human languages in general) aren't my best skill, so, sorry by my english. (if you want we can speak in C# or VB.Net =p)
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
