Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Proportionally scaling adjacent elements?

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #244956
    slmille4
    Participant

    I found the article at
    https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/
    extremely informative, and it almost does what I need it to, but in my case I need to have two similar elements which are adjacent (currently via float: left;) which I need to have scale proportionally. What do I need to do to modify the single element version to have each element take up 50% of the available space?

    #244957
    Beverleyh
    Participant

    It helps if you show us what you’ve tried – why not fork the demo of Chris’ and modify it?

    I imagine that you’ll be able to float 2 elements side-by-side within the #very-specific-design div, and the demo should still exhibit the same scaling behaviour.

    Just remember that there is padding already on some elements that will impact upon the box model. Might be worth absorbing it all with a box-sizing reset in order to get 2 50% wide divs sitting side-by-side;

    .scaleable-wrapper * { box-sizing: border-box }
    
    #244963
    slmille4
    Participant

    I think I’ve sort of done something like that, but I’m getting a problem where the inner boxes aren’t scaling quite right, so they pop out of alignment when the size of the container is reduced. The box-sizing: border-box; did help with getting the padding right though.

    http://codepen.io/slmille4/pen/xOvqqx

    (this is just me trying stuff randomly, so it’s not very well done)

    #244967
    Beverleyh
    Participant

    I’m getting a problem where the inner boxes aren’t scaling quite right

    You’ve got 2 elements with the same id #very-specific-design. Looks like you’ve misread what I said;

    I imagine that you’ll be able to float 2 elements side-by-side within the #very-specific-design div

    #244968
    slmille4
    Participant

    What effect should that have, since the parent #scaleable-wrapper is acting as the container? Also the two elements have different ids (#very-specific-design1/#very-specific-design2) but the same class (.very-specific-design). In the actual use case there are two components that need to be scaled, so they need to have two different divs.

    #244969
    Beverleyh
    Participant

    What effect should that have, since the parent #scaleable-wrapper is acting as the container?

    Because the #very-specific-design id is being used by the JS, so if you treat it like a wrapper and add your “twin” divs inside, they’ll scale proportionally together (in relation to each other – isn’t that what you want?) and you won’t have to worry about modifying the JavaScript, just the HTML and CSS.

    In the actual use case there are two components that need to be scaled, so they need to have two different divs.

    And there will be – it’s just that you need to create them and dress them up with your own CSS.

    #245005
    slmille4
    Participant

    Excellent, got it, thank you! One thing I’m confused about though, in the original with the Resizable component, the transform code was:

    $el.css({
    transform: “translate(-50%, -50%) ” + “scale(” + scale + “)”
    });

    while in order to get things to line up when it was just in a div, I needed:

    $el.css({
    transform: “translate(-50%, 0%) ” + “scale(” + scale + “)”
    });

    why was the change necessary?

    source:
    http://codepen.io/slmille4/pen/PzrQLv

    #245006
    Beverleyh
    Participant

    Because you’ve removed the explicit height from #scaleable-wrapper.

    translate(-50%, -50%) is part of a vertical and horizontal centring technique that works in conjunction with top: 50%; left: 50%; on .very-specific-design. You can see that in Chris’ original demo.

    In your modified demo, with the height gone from #scaleable-wrapper, top: 50%; on .very-specific-design becomes redundant. It will effectively default to top: 0;. The problem there is that translate(-50%, -50%) is still doing its thing on the horizontal and vertical, pulling it back half way along its width and height. You want it to do that on the X axis but not the Y axis, so, changing it to translate(-50%, 0) will only make the centering happen horizontally.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.