CODEWITHSUNDEEP
javascriptjquerycssjquery-uiscale
alt
alt

Reputation: 13907

In javascript, or with a jQuery plugin, to completely scale a div and its contents?

I'm looking to achieve an effect as seen on the metalabs site's image changer/slider:

http://metalabdesign.com/

I got it working, but the catch is that I'm not using images, I'm scaling a div with content inside it. Dynamic content that's subject to change. Is there a way I can just blow up the whole div and its contents, because manually scaling each element inside the div is a huge hassle.

I'm currently scaling a div with a jQuery animation:

Starting css:

#tagBox {
    display: none;
    width: 1280px;
    height: 1000px;
    position: absolute !important;
    left: 50% !important;
    margin-left: -640px;
    top: 50% !important;
    margin-top: -500px;
    opacity: 0;
}

The jQuery that changes it.

$('#tagBox').show().animate({
    opacity: 1,
    width: 700,
    height: 500,
    marginLeft: '+=275px',
    marginTop: '+=250px'
}

But that only animated the div. The div's contents stay fixed in the upper right corner. I'm looking for a way to imitate the animation, but just scale the div as a whole, all elements together, preferably in normal javascript.

Thanks!

Upvotes: 1

Views: 5645

Answers (1)

mildog8
mildog8

Reputation: 2154

you can use css3 transformations.

-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);

Check It - http://jsfiddle.net/6gJka/2/.

Upvotes: 7

Related Questions