CODEWITHSUNDEEP
javascriptjqueryhtmlcssposition
Vladimir Rosca
Vladimir Rosca

Reputation: 407

How to display element on screen but not at the top of the screen in html/css?

I have some jQuery code that adds a picture to my page whenever a user clicks on a button. I want this picture to display on top of whatever the user is looking at. The problem is that I have this image set as position:absolute and it's displaying at the very top of the page. Think about it like this:

My page is 1000px high. If the users viewport is 300px down then thats where I want the image to display, not at the very top of the page. Position:static doesn't work for me in this case because I want the user to be able to scroll past the image and not have it follow him.

Any ideas? I was thinking something along the lines of a jQuery function that returns how far down the webpage the viewport is and set that as the top position of the image(since I have it set as absolute).

Thanks in advance!

Upvotes: 1

Views: 564

Answers (2)

KellyCode
KellyCode

Reputation: 787

I use this small jQuery extension to set something to center on the screen:

(function($)
{
$.fn.centerMe = function(centerIn)
{
    var containerWidth = $(centerIn).width();
    var containerHeight = $(centerIn).height();
    var elWidth = $(this).width();
    var elHeight = $(this).height();
    $(this).css('left', containerWidth / 2 - elWidth / 2);
    var adjTop = containerHeight / 2 - elHeight / 2;
    $(this).css('top', $(parent.window.document).scrollTop() + adjTop);
};
})(jQuery);

Usage is basically: $('#elemToCenter').centerMe(window);

Upvotes: 0

Amoliski
Amoliski

Reputation: 159

var viewportX = window.pageXOffset; var viewportY = window.pageYOffset;

Then position it relative to viewportX and viewportY.

Upvotes: 1

Related Questions