Question

I am creating a feedback system for one of my projects. My target device is iPad. Basically what happens is a div called into the page via ajax and it is supposed to overlay the content underneath. I have that part working.

What I want to do is have the div locked to the middle of the view-port. I have tried position:fixed on my element which works, except it will lock into the wrong position. It seems to be centering itself to the initial position of the viewport. If I scroll down to the bottom of a longer page and call my feedback window, it will still be near the top.

Ajax Page (this runs when the page is called)

$(document).ready(function(){
  $(".popup").css({
    top: "50%",
    left: "50%",
    marginLeft: -$(".popup").width() / 2,
    marginTop: -$(".popup").height() / 2
  });
});

If I can find the top of the viewport I think I’d be able to get this working right.

I’ve looked into: http://www.appelsiini.net/projects/viewport but it doesn’t really solve my problem.

Any help, advice or pointers in the right direction would be greatly appreciated! Thanks!

Answer 1

Fixed positioning is applied relative to the top-left corner of the window, regardless of how far down you’re scrolled (which I assume is what you want).

So:

.popup {
   position:fixed;
   top:20px;
   left:40px;
   right:40px;
}

Will, first of all, put your popup 20px from the address bar (meaning, even if you scrolled to the bottom).

Next, setting both left AND right will “stretch” the fixed element to start and end 40px (or whatever you give it) from both sides of the window. That’s a convenient way of centering this popup div.

If your popup needs to be a fixed size – not stretched based on the width of the window – you could set both the left and right (to zero probably) and then inside this div, have another div with margin:0 auto, which will center that inner div within the fixed outer div.

P.S.
Just as you can set both left and right, you can also set both top and bottom, which will have corresponding results. However, if you need a fixed height, you won’t be able to vertically center it using the margin:auto trick.