Mathematics with javascript, range input, and css transform: scale()

Question

I have a div with the width 794px and a range input with max 250 and min 0. I am scaling the div with the css transform: scale(1), where 1 is when the div is actually shown at 794px.

However, when the width of the browser window is greater than that I want to be able to scale up even more so that when the window is at 1588px, the div should have the value scale(2). And when the browser window is smaller than 794px the maximum value (250) should represent the width of the window.

I have tried several different solutions for this, I will only post the last one so I won't confuse anyone.

Javascript:

const baseWidth = 794;
const maxWidth = (baseWidth * 2) + 50;
const workspace = document.getElementById('workspace');
const oWidth = workspace.offsetWidth;
const rangeValue = zoomElement.target.value;
const rangeStepSizeByPixels = (oWidth - 0) / 250;
const rangeStepSizeByPercent = (rangeStepSizeByPixels / oWidth) * 100;
const trueZoom = rangeValue * this.state.rangeStepSize;

this.setState({
    ...this.state,
    actualZoom: trueZoom,
    height: (700 * trueZoom) / 100,
    width: (550 * trueZoom) / 100,
});

HTML:

<section id="infobar" class="inner-margin">
    <input type="range" step="0.4" min="0" max="250" class="zoomslider" value="250">
</section>

<section id="workspace" class="scrollable tender-edit orange-midnight-them">

    <div class="doccontainer" style="width: 794px; height: 1123px;">
        <section class="init-scale" style="transform: scale(1);">
            <div class="doc-header">
            ...
            </div>
            <div class="doc-inner">
            ...
            </div>
            <div class="doc-footer">
            ...
            </div>
        </section>
    </div>

</section>

This resulted in a situation where the range value 250 was the same as setting scale(1), which is not what I am going for.

Would this not work with just CSS Media Queries? Similar to this: https://stackoverflow.com/questions/13033918/css-using-media-queries-to-scale-content — Nope, Sep 19 '17 at 13:23
@Fran, how would I do that if I want the range input so that the user can decide which zoom he wants? — Winter, Sep 19 '17 at 13:25
Ah, OK, I see. Didn't see that right of the bat. Reading the top of the question, can this be separated? Basic functionality without custom zoom in CSS and then user defined zoom in addition? — Nope, Sep 19 '17 at 13:27

score 0 · Accepted Answer · answered Sep 20 '17 at 14:29

Well, after getting some help from a friend it turns out that the answer was much simpler than I thought.

const factor = (oWidth - 50) / baseWidth;

(That -50 is only there to set some padding on the parent element.)

With this number I get the multiplication factor that I can then use to set the value of the percentage that I am after, and also to calculate the value that my range input should have as per default.

const rangeValue = zoomElement.target.value;
const trueZoom = (rangeValue / 250) * 100 * this.state.factor;

That is the value that I get when the range input is changed.

The following is my calculation to set the default zoom and the default range value based on the parent element's actual width.

const defaultDocWidth = ((oWidth - 50) * 0.5) / 2;
const newFactor = (defaultDocWidth / (oWidth - 50));
const defaultZoom = (defaultDocWidth) * newFactor;
const defaultRangeValue = (250 / 100) * defaultZoom;

Mathematics with javascript, range input, and css transform: scale()

1 Answers1