Question

I have a div which could be dragged around and scaled. It may or may not be larger than the window, I am trying to write a function which will keep it centered around its current center relative to the window when the div’s width or height is changed (by a scaling function). To do this I will need to change its top and left (or its margin but prefer top and left position) to a number which relates to its current top and left position. I just can’t wrap my head around the logic of the function which will keep it centered at its current position. To center it completely I would just change its top and left to (-)half of the size of the div, but to keep it centered around its current center what would i do!

Answer 1

Got it with help from a friend..

function changeZoom(amount)
{   
    var oldWidth = $('#zoom').width(), oldHeight = $('#zoom').height();
    if(oldWidth == amount){return false}
    var xPercent = (($('#viewer').width() / 2) + Math.abs($('#zoom').position().left)) / oldWidth,
    yPercent = (($('#viewer').height() / 2) + Math.abs($('#zoom').position().top)) / oldHeight;

    var newLeft = (amount * xPercent) - ($('#viewer').width() / 2),
    newTop = (amount * yPercent) - ($('#viewer').height() / 2);

    newLeft = 0 - newLeft;
    newTop = 0 - newTop;

}