CODEWITHSUNDEEP
javascript
ntgCleaner
ntgCleaner

Reputation: 5985

Function to write new text size on window resize

I am trying to figure out an equation for a small problem I'm having. I'm not great at figuring these types of things out, but I know I've done it before with a different set of numbers.

Basically, I'm trying to figure out:

  if 360px = 100%;
 and 959px = 160%;
then 720px = X;

720px is an arbitrary number. I know that 360px should be 100% font size, while 959px should be 160% font size. I'd like the body font-size to change when the screen is enlarged or shrunken (on load usually) and I'd like to find out any font size percentage in between.

I would like to plug this into a javascript math function for something like this:

function widthToPerc(){
    var width = $(window).width();
    var toPerc = // THIS FORMULA RIGHT HERE TO GET A PERCENTAGE
    $('body').css({"font-size" : toPerc + "%"});
}

And then initiate this on window load and window resize.

Upvotes: 0

Views: 91

Answers (4)

user2755150
user2755150

Reputation:

OnLoad you will get the initial $(window).width(). You will store that in a global variable as I said from the very beggining.

var initWidth = $(window).width();

Then the function:

function widthToPerc(){

    var width = $(window).width();
    var diff = width - initWidth;

    var toPerc;

    if(diff > 0){ //window is bigger after resizing

        toPerc = Math.floor((diff / initWidth) * 100) + 100;

    }
    else{ //window is smaller after resizing

        diff = Math.abs(diff);

        toPerc = Math.abs(Math.floor((diff / initWidth) * 100) - 100);

    }

    $('body').css({"font-size" : toPerc + "%"});

}

So let's say you have 600 as initial width and the user resize the browser to make it bigger. Now the width is 800.

So: 

var initWidth = 600;
var width = 800;
var diff = 200;      // 800 - 600

diff > 0    // true 

toPerc = 0.3    // 200 / 600
toPerc = 30     // after *100 and rounded down
toPerc = 130    // 30 + 100

//the window is a 30% bigger than it was intially

$('body').css({"font-size" : "130%"});

Now let's see when window it's been resized and got smaller

var initWidth = 600;
var width = 400;
var diff = -200;      // 400 - 600

diff < 0    // true 

diff = 200      //after Math.abs

toPerc = 0.3    // 200 / 600
toPerc = 30     // after *100 and rounded down
toPerc = -70    // 30 - 100
toPerc = 70     // after Math.abs

//the window is a 30% smaller than it was intially

$('body').css({"font-size" : "70%"});

Upvotes: 0

kei
kei

Reputation: 20491

I'm not sure if this is what you mean, but here's how I understood it.

This seems more like a math problem to me, so let's turn the pixels and percentages into points:

p1 = (360,100)
p2 = (959,160)
p3 = (720,y3)

Now we find what in terms of percent is 720 is in between 360 and 959:

(720-360)/(959-360) = around 60%

To get y3, we then do this:

((160-100)*.60)+100 = 136

Making this work for any value in between 360 and 959

function widthToPerc(){
    var width = $(window).width();
    var toPerc;
    var minX = 360;
    var maxX = 959;
    var minY = 100;
    var maxY = 160;
    if (width >= 360) {
      toPerc = min;
    }
    else if (width <= 959) {
      toPerc = max;
    }
    else {
      toPerc = ((maxY-minY)*((width-minX)/(maxX-minX)))+minY;
    }
    $('body').css({"font-size" : toPerc + "%"});
}

Upvotes: 0

sergio0983
sergio0983

Reputation: 1278

function calculate(w){
   //Assuming the numbers you provided and w coming without px

    var d = 959-360;
    var p = 160-100;

    var c = w - 360;

    var cp = p*c/d + 100
    return cp
}

Upvotes: 1

cpacheco
cpacheco

Reputation: 186

if your equation is linear, this should be the solution:

f(x) = a*x + b

f(360) = 100
f(959) = 160

a * 360 + b = 100
a * 959 + b = 160

Solve this and you get a ~= 0.1 and b ~= 63.94

So, as a result:

var ToPerc = width * 0.1 + 63.94; // 99.94% for 360px; 159.84% for 959px

if you need more precision solve with more decimals

Upvotes: 3

Related Questions