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!
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;
}