Question

Hi I have an image who’s position I get and store to a variable using

var position = $(".portfolio-items a").offset();

but for some reason it returns

Object { top=1227.5, left=416.5}

How would I go about rounding it up and adding the px on the end so that I can then assign it to a new element to place it over the top of the current one?

Thanks.

I’ve uploaded the site to http://www.pixelcoding.co.uk so that you can see where the problem is now. When you click on the AJLComputers portfolio link the new image should be displayed over the old one but it is off by about 200pxs vertically.

Answer 1

Simply use Math.round() on the returned positions:

var position = $(".portfolio-items a").offset(),
    top = Math.round(position.top) + 'px',
    left = Math.round(position.left) + 'px';

This will always round appropriately (so 0.4 rounds down to 0, 0.5 rounds up to 1); if you always want to round up then you can use Math.ceil() in place of Math.round():

var position = $(".portfolio-items a").offset(),
    top = Math.cel(position.top) + 'px',
    left = Math.ceil(position.left) + 'px';

There’s also Math.floor() which, as you might imagine, always rounds down to the integer.

But while you can use the functions, it’s not necessary to do so, since jQuery can, and will, use them as-is.

References:

• Math.ceil().
• Math.floor().
• Math.round().