0

I need to take this question one step further.

The div I have is centered vertically using the following code:

var boxheight = $('#notifications').height();
var windowheight = $(window).height();
var boxheight = $('#notifications').height();
var pagecenterH = ((windowheight-boxheight)/2);
$('#notifications').animate({'top': pagecenterH});

That works great if the page is only as tall as the window, but if the page is much longer and the user is halfway down the page when they click to open the #notifications code above, the div appears centered from the top of the screen, so they may miss the box altogether.

How can I get the code to recognize where on the page the user is so that the div will appear vertically centered no matter how far down they scroll?

Thanks in advance!

Community
  • 1
  • 1
TH1981
  • 3,105
  • 7
  • 42
  • 78

3 Answers3

1

You're going to want to use document instead of window. See here:

http://jsfiddle.net/GftBg/1/

In your code, replace $(window).height() with $(document).height().

If you want a <div> to always be centered in the screen regardless of where the user scrolls after the <div> is loaded in, you should use $(window).height() and set the <div>'s position to fixed. You can see this in action here:

http://jsfiddle.net/GftBg/2/

treeface
  • 13,270
  • 4
  • 51
  • 57
  • That will center the element on the page instead of the window, but it can still appear outside the window. Actually, it's even more likely that it does... – Guffa Dec 27 '10 at 18:20
  • @Guffa, not sure what you mean by that. My second option would center the div directly inside the window using `position:fixed`. – treeface Dec 27 '10 at 18:29
  • You added that after I wrote the comment. – Guffa Dec 28 '10 at 00:56
  • @Guffa Actually, I added it two minutes before you wrote that comment (edit: `2010-12-27 18:18:32Z`, your comment: `2010-12-27 18:20:01Z`), you just didn't refresh the page. – treeface Dec 28 '10 at 01:03
0

You can use position:fixed to place the element relative to the window instead of relative to the page. That way it will show up centered, and remain centered even if the user scrolls.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
0

Try below code, in this we are first centering the div in window to to bring it in user view we add scroll top and scroll left to it - 

    $('#notifications').css("position","absolute");
    $('#notifications').css("top", ( $(window).height() - $('#notifications').height() ) / 2+$(window).scrollTop() + "px");
    $('#notifications').css("left", ( $(window).width() - $('#notifications').width() ) / 2+$(window).scrollLeft() + "px");
Alpesh
  • 5,307
  • 2
  • 19
  • 19