12 Replies Latest reply: Jul 31, 2013 3:28 PM by resdesign

Scale a div based on width/height of Stage?

Rokoff Jul 28, 2013 9:49 AM

My Stage is set to 100% w/h. I'd like to center a div, and have it scale based on a percentage of the Stage's size. The div contains animated text and images.

I've seen some similar examples but the Stage always seems to be set to pixels. Any thoughts? Thanks!

1. Re: Scale a div based on width/height of Stage?

robboerman Jul 28, 2013 2:43 PM (in response to Rokoff)

just set the div in% to, right?
or isn't that what you mean?
Like Show 0 Likes (0)

Actions
2. Re: Scale a div based on width/height of Stage?

Rokoff Jul 28, 2013 3:36 PM (in response to robboerman)

Hey robboerman-
Thanks for replying! The div called content is what I'd like to have scale, based on the browser window size. Selecting between px and % doesn't seem to scale my div. It may have something to do with the following code that i'm using to center my div.

var trueStage = sym.$("content");

    trueStage.offset({
        left: ($(document).width() - trueStage.width()) / 2,
        top: ($(document).height() - trueStage.height()) / 2,
    });

https://www.dropbox.com/s/x9fmepplen6i159/eco_friendly.zip
Like Show 0 Likes (0)

Actions
3. Re: Scale a div based on width/height of Stage?

Rokoff Jul 28, 2013 10:06 PM (in response to Rokoff)

Or is there another approach that would achieve a similar result?

I'm basically just needing a full screen image, with a centered div on top (containing images/text, etc). I'd like the whole composition to scale and center based on browser width.

The full screen image in the example I uploaded is working just how I want it when resizing the window, without any whitespace around it.
Like Show 0 Likes (0)

Actions
4. Re: Scale a div based on width/height of Stage?

robboerman Jul 29, 2013 12:49 AM (in response to Rokoff)

it isnt a good idea to make the content itself scaleable
you can make it responsive using edge reflow.

sym.$("content").css({
"margin" : "0px auto",
"position" : "static"
});

use that code to center something.
and it shouldn't have whitespace when you resize than/
Like Show 0 Likes (0)

Actions
5. Re: Scale a div based on width/height of Stage?

Rokoff Jul 29, 2013 7:59 AM (in response to robboerman)

Thanks again robboerman!

So it doesn't sound like I'll be able to accomplish this using Edge Animate by itself. I'll look at using Edge Reflow. Thanks for the tip!
Like Show 0 Likes (0)

Actions
6. Re: Scale a div based on width/height of Stage?

Departure Jul 30, 2013 2:14 AM (in response to Rokoff)

sym.$("contentTobeScaled").css({
margin : '0 auto',
position: 'relative'
});

This will center the div
Following can be used to scale your content responsively

$(window).resize(function() {
var scaleFactor= Your Calculations involving either - $(window).width() - or the height perhaps.
sym.$("contentTobeScaled").css({'transform': 'scale(' + scaleFactor+ ')'});
sym.$("contentTobeScaled").css({'-moz-transform': 'scale(' + scaleFactor + ')','-webkit-transform': 'scale(' + scaleFactor+ ')'});
});

I was able to perform many complex responsive transformations using .resize and a custom defined variable. The good thing is you can use any mathematical functions to relate these two, in some cases having "inverse" scale factors to make something shrink when windows are expanding. or non-linear effects, discrete effects, anything possible. Enjoy.
Like Show 0 Likes (0)

Actions
7. Re: Scale a div based on width/height of Stage?

Zaxist Jul 30, 2013 2:34 AM (in response to Rokoff)

Excuse me, Can i Ask you why do you open this conversation with same question that i answered you before with exactly what you wanted ?

if it wasnt exactly what you wanted why you didnt say that in there ?

http://forums.adobe.com/message/5528556#5528556

Zaxist
Like Show 0 Likes (0)

Actions
8. Re: Scale a div based on width/height of Stage?

Rokoff Jul 30, 2013 6:50 AM (in response to Zaxist)

I had asked about scaling full screen and centering a div in the other conversation. Scaling a centered div based on the size of the stage or browser window seemed like a separate question.
Like Show 0 Likes (0)

Actions
9. Re: Scale a div based on width/height of Stage?

Rokoff Jul 30, 2013 7:03 AM (in response to Departure)

I looked into using Reflow and wasn't having much luck. I ended up playing with this code using greensock for an animated scale effect:

function updateContent() {
     var $contentWidth = $(window).width();
if ($contentWidth < 400) {
         TweenLite.to(element, 1, {css:{scale:.48}, ease:Expo.easeOut});
    }else if ($contentWidth < 650){
        TweenLite.to(element, 1, {css:{scale:.7}, ease:Expo.easeOut});
    } else if ($contentWidth < 700){
        TweenLite.to(element, 1, {css:{scale:.7}, ease:Expo.easeOut});
    }else{
        TweenLite.to(element, 1, {css:{scale:1}, ease:Expo.easeOut});

    }
};

It seems to be working and I still need to tweek some of the scaling sizes for different window widths. However I'm intersted in trying the above code for comparison. Thanks!
Like Show 0 Likes (0)

Actions
10. Re: Scale a div based on width/height of Stage?

Zaxist Jul 30, 2013 9:03 AM (in response to Rokoff)

if you want to create responsive web page then you should create your site base on Percentage...

Zaxist
Like Show 0 Likes (0)

Actions
11. Re: Scale a div based on width/height of Stage?

fullakingi Jul 31, 2013 3:14 PM (in response to Departure)

Thansk for this help. I have a similar issue. I want to centre a div containing an image and a btn, where should I paste the code? In the compositionReady of the relative stage?
Like Show 0 Likes (0)

Actions
12. Re: Scale a div based on width/height of Stage?

resdesign Jul 31, 2013 3:28 PM (in response to fullakingi)

My preference is to put all I can in compositionReady in order to have one place to check and maintain code. However sometimes you need to add code somewhere else.
I would put that one in compositionReady.
Like Show 0 Likes (0)

Actions