How to set dynamyc and proportional Height/Width

  • Hello there!,


    I'm a bit new into this, and I honestly don't know what else to try (or why isn't it working).

    I have added a logo to the pano, with 2 layers, one with type="container" so I can round the edges later to make the logo always look inside a circle, and the inner layer which holds the image, what I need is to make it proportional (thus being able to rezise when changing between portrait/landscape), I have tried setting one of them to "10%" and the other one to "prop", but seems that it doesn't work with container type layers, is this true?.

    On the other hand, I think it's not only needed to be proportional, but also to be calculated according to the stage size, if I make it 10% of width and the stage is pretty wide it'll have the same height, so it'll be huge!.

    I've tried setting the height and width to this "if:stageheight GE stagewidth, calc:stagewidth * 0.1, calc:stageheight * 0.1", and many other things...

    The truth is... I don't know what else to try!.

    Thank you, in beforehand!

  • Explore code from here: Link
    Maybe this can help boost your learning curve ;)

    OK! Sowrry for taking so long, I saw what you have done, and is somehow what I need, but my problem is actually with the "prop" value of height/width, since it seems to not work when the layer is type "container", I'll look later if I really need it to be container, which I think I do, since I need the image to always be inside a circle-shape, no matter the size or the shape of the image, always in a circle, so I use the bg-attributes of the container-type layer.

  • Hi,

    using 'prop' for width or height can't work for container elements because container elements don't have an own 'original' size.

    For a 'circle' width and height simply should be always the same.

    Best regards,
    Klaus

  • Hi,

    using 'prop' for width or height can't work for container elements because container elements don't have an own 'original' size.

    For a 'circle' width and height simply should be always the same.

    Best regards,
    Klaus

    Hmm Ok Klaus, I know, width and height should be always the same, but if I need it according to screen size, I can't just set "10%" to both of them, since one will scale with the height and the other with the width, and it'll change if it's landscape or portrait and so on, the circle will start changing and stop being a circle, or that's what happens to me at least :/.

  • Hi,

    okay, in this special case that can't be used,

    but what's possible is using the onresize event and calculating and setting there the size, e.g.

    Code
    <events onresize="calc(layer[circle].width, stagewidth * 0.1); copy(layer[circle].height, layer[circle].width);"/>

    Best regards,
    Klaus

  • Hi,

    okay, in this special case that can't be used,

    but what's possible is using the onresize event and calculating and setting there the size, e.g.

    Best regards,
    Klaus

    Oky!, I've tried this (actually I've done it before too but somehow wasn't working xD) And it worked, but there's the other thing!...

    I was doing this:

    Code
    if(stagewidth GT stageheight,			calc(circles_size, stageheight * 0.1);		,			calc(circles_size, stagewidth * 0.2);		)				set(layer[circle1].width,  circles_size);		set(layer[circle1].height,  circles_size);				set(layer[circle2].width,  circles_size);		set(layer[circle2].height,  circles_size);


    And the circles were not resizing when I changed window size... Then I did what you said, and it looks like this now:

    Code
    if(stagewidth GT stageheight,			calc(layer[circle1].width, stageheight * 0.2);			copy(layer[circle1].height, layer[circle1].width);			calc(layer[circle2].width, stageheight * 0.2); 			copy(layer[circle2].height, layer[circle2].width);		,			calc(layer[circle1].width, stageheight * 0.1);			copy(layer[circle1].height, layer[circle1].width);			calc(layer[circle2].width, stageheight * 0.1); 			copy(layer[circle2].height, layer[circle2].width);		)


    And it does work now.... What kind of sorcery is this!?.

    (Edit: sowrry, I don't know how to make the code to be in different lines :/)


    And by the way, thanks, a lot! I was struggling with this one, trying here and there without solution. :3

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!