Vertically and horizontally centering a div that follow scrolling

Azala

Question 1)
I'm trying to implement a layer in z-index 1 that animates a progress bar while a file is uploading.

Now since the form can appear sometimes at the top of the page and other times further down on the page I need to center this div in the actual "viewport". How do I go about this?

If the user scrolls I also want this div layer to follow so that it is centered in z-index:1 at any time as long as it's visible.

Question 2)
Is there a way to disable z-index:0 (all the content in this z-index). I don't want the user to be able to click on other things while something is uploading.

Cheers

Azala

Azala wrote:
Question 1)
I'm trying to implement a layer in z-index 1 that animates a progress bar while a file is uploading.

Now since the form can appear sometimes at the top of the page and other times further down on the page I need to center this div in the actual "viewport". How do I go about this?

If the user scrolls I also want this div layer to follow so that it is centered in z-index:1 at any time as long as it's visible.

Answer (not perfect in Opera, working on that):

_element.style.left = Math.round((document.documentElement.clientWidth/2)-(_element.style.width/2))+"px";
_element.style.top = Math.round((document.documentElement.clientHeight/2)-(_element.style.height/2)+document.documentElement.scrollTop)+"px";

bpat1434

Here's the solution for Opera:

Math.round(((document.body.clientHeight-document.documentElement.offsetHeight)/2)-(_element.style.height/2)+document.documentElement.scrollTop)+'px';

Now, I've implemented it like this:

if(navigator.appName.search(/opera/gi) != -1) { // Using Opera
    _element.style.top = Math.round(((document.body.clientHeight-document.documentElement.offsetHeight)/2)-(_element.style.height/2)+document.documentElement.scrollTop)+'px';
}
else { // Using IE / Firefox / Other
    // ....
}

Hope that helps 😉

Azala

Thanks bpat.

I ended up using CSS to accomplish the task, it's not working with older browsers, but that is fine, I already direct my users to the browser upgrade pages if they are using older versions. Some might not like that, but honestly I don't care, people can't expect to see the world as good through their old outdated glasses as with brand new ones :-)

Anyways, the CSS approach is simple.

# DIV LAYER
.myDivLayer{
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -75px;
position: fixed;
}

Margins should be half the size of your div. The clue here is the position:fixed, which IE didn't start supporting until v7.

bpat1434

Hmm... try position: absolute 😉

Azala

Yep you are correct, the clue was not the clue anyway hehe...

absolute works too.