I'd like to have a css div that is displayed in the center of the browser window when a user selects an operation that kicks off an ajax request.
What I have thus far is a div that shows up in the center of the "unscrolled" browser window when needed (by unscrolled I mean that if the user were to first hit the page and activate a link in the visible portion of the page - not one found via scrolling down - the div would appear centered in that visible area). The problem that I'm having is that, if the user scrolls down and selects a link the kicks off a request, the div still appears centered on the "top" portion of the page (the original, "unscrolled" portion). I want the pop up div to be displayed in the center of the "visible" area of the browser. Here's the javascript I have thus far:
Expand|Select|Wrap|Line Numbers
- function showIndicator(){
- var availHeight;
- var availWidth;
- if(typeof(window.innerWidth) == 'number'){
- availHeight = window.innerHeight;
- availWidth = window.innerWidth;
- }else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)){
- availHeight = document.documentElement.clientHeight;
- availWidth = document.documentElement.clientWidth;
- }else if(document.body && (document.body.clientWidth || document.body.clientHeight)){
- availHeight = document.body.clientHeight;
- availWidth = document.body.clientWidth;
- }
- var indicatorWidth = 50;
- var indicatorHeight = 50;
- var left = (availWidth/2) - (indicatorWidth/2);
- var top = (availHeight/2) - (indicatorHeight/2);
- var indicator = document.getElementById('indicator');
- indicator.style.border="1px solid gray";
- indicator.style.background="white";
- indicator.style.position="absolute";
- indicator.style.zIndex="999";
- indicator.style.top=top+"px";
- indicator.style.left=left+"px";
- indicator.style.display="block";
- }
-I've only tested this in firefox 2 and ie 6 thus far.
Thanks very much!