Centering a div on a page using jQuery when the page is longer than the window?

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.

Up vote 0 down vote favorite share g+ share fb share tw.

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! Jquery div center link|improve this question asked Dec 27 '10 at 18:07Aninemity538111 98% accept rate.

Aha! That actually does exactly what I need and is very simple! Thank you!

– Aninemity Dec 27 '10 at 20:58.

You're going to want to use document instead of window. See here: jsfiddle.net/GftBg/1/ In your code, replace $(window).height() with $(document).height(). If you want a to always be centered in the screen regardless of where the user scrolls after the is loaded in, you should use $(window).height() and set the 's position to fixed.

You can see this in action here: jsfiddle.net/GftBg/2.

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 0: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 1:03.

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").

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.