CODEWITHSUNDEEP
jquery
3gwebtrain
3gwebtrain

Reputation: 15299

jquery scale height and width of a div from center point of screen

i am in the situation of making a customized slide show. for that, i need to make a div element and appended to body. as well i center it for the screen, using screen width and height, but i unable to make that div scale from the center point of the screen..

what i need is, which i creating div have the 0px height and 0px width, in this state, it need to scale to the size what i am going to append the image with this. so, while it get the image size ( i am keeping it in array), it need to scale height and width what array supplies. but it should start from center of the screen.

how can i achieve a div scale from center of the screen?

$('#slideHolder').appendTo('body').css({border:'1px solid red'});
           var getHCenter = ($(window).width() - $('#slideHolder').outerWidth())/2;
           var getVCenter = ($(window).height() - $('#slideHolder').outerHeight())/2;
           $('#slideHolder').css({left:getHCenter,top:getVCenter}).animate({height:$('#slideHolder').outerHeight()+'px',width:$('#slideHolder').outerWidth()+'px'},100).hide();

this is what the function what i am using. but scale is not start and end in the center of the screen. any good idea to scale as well position the image center?

Upvotes: 2

Views: 6534

Answers (1)

Marco Johannesen
Marco Johannesen

Reputation: 13134

Yo could proberbly use a MINUS margin instead.

       var getWidth = $('#slideHolder').outerWidth())/2;
       var getHeight = $('#slideHolder').outerHeight())/2;

And then setting on the element:

Left: 50%;
Top: 50%;
Margin: -getHeight 0 0 -getWidth

with:

$('#slideHolder').css('left':'50%','top':'50%','margin':'-'+getHeight+' 0 0 -'getWidth);

What it does is send it 50% from the left and top, and then giving the minus margin half of #slideHolder - making it centered from the top and left :)

EDIT

Guess this is what you want?

http://jsfiddle.net/V5KLa/

Upvotes: 2

Related Questions