Javascript variable concatenation not working

Question

I know there have been may related posts but for the life of me I can't seem to figure out why the script isn't implementing my variables associated value.

Here is the fiddle: https://jsfiddle.net/9s4k9449/5/

In brief:

A red div is fixed at 743px wide until the width of the window gets to 734px at which point the red div's width changes to 100%.
A function called getFraction() measures the width of the red div and divides it by the red divs original width of 743 to create a variable named myfraction. The result is that when the window is larger than 734px wide myfraction is equal to 1, otherwise the fraction displays as a you got it, a fraction.
A blue div is contained within the red div, and is scaled using webkitTransform using myfraction's value. The result should be that when the window is greater than 734px wide the blue div is not scaled because myfraction = 1 (scale = 1.), but when the window is less than 734px the blue div scales to myfraction.

NOTES: The problem lies in the function "scale()". I believe that this issue has to do with the function not grabbing the value of myfraction; probably a concatenation mistake that I can't find. I believe this because when the variable "myfraction" is replaced with an actual number say 0.5, the entire process works perfectly (though the blue div is not scaled dynamically with the windows width the function does execute on window resize at a scale of 0.5).

Here is the code:

window.onresize = resizefunc;
    
function resizefunc(){    
  getFraction();
  scale();
}

/*This function takes the red div's current width and divides it by its original width to create a fraction */
function getFraction() {    
  var myfraction = document.getElementById("reddiv").offsetWidth / 743; 
  document.getElementById("dimensions").innerHTML = myfraction ;
}   

/*This function should take the blue div and scale it by the fraction */
function scale() {
  document.getElementById("bluediv").style.webkitTransform = 'scale(' + myfraction + ',' + myfraction + ')';
}

.red {
  width: 743px;
  height: 380px;
  background-color: red;
  margin: auto;
}

@media screen and (max-width: 743px) {.red {width: 100%}}

#bluediv {
    background-color: blue;
    width: 400px;
    height: 380px;
    margin: auto;
}

<div style="width: 100%; height: 500px;">
  <div id="reddiv" class="red">
    <div id ="bluediv"></div>
   </div> 
   <p id="dimensions"></p> 
</div>

I do not mean to sound like a jerk, but what exactly are you asking? Can you sum up your question in one or two sentences? — mariocatch
– mariocatch, Commented Jun 15, 2016 at 19:17
Hey guys sorry It was a long question meant to be thorough. To be more concise, I simply want the blue div to scale by the value myfraction using javascript. The reason i don't want to use CSS only is because the blue div will actually end up being an iframe who's inner content I want scaled; not something that can be done only using CSS. — Taylor
– Taylor, Commented Jun 15, 2016 at 19:21
@Mojtaba; thanks for your quick reply, I don't want value to actually be (0.5, 0.5), this was simply an example. I want it to scale dynamically with the window width so when myfraction = 0.9 the blue div scales to (0.9 0.9) or when myfraction = 0.2 the blue div scales to (0.2,0.2) etc. — Taylor
– Taylor, Commented Jun 15, 2016 at 19:24

Tony Chiboucas · Accepted Answer · 2016-06-15 19:24:58Z

1

Your `size()` function never had the `myfraction` value

https://jsfiddle.net/9s4k9449/6/

window.onresize = resizefunc;

function resizefunc(){    
    scale(getFraction());
}
//This function takes the red div's current width and divides it by its original width
// to create a fraction
function getFraction() {    
    var myfraction = document.getElementById("reddiv").offsetWidth / 743; 
    document.getElementById("dimensions").innerHTML = myfraction ;
    return myfraction;
}   

//This function should take the blue div and scale it by the fraction
function scale(frac) {
    document.getElementById("bluediv").style.webkitTransform = 'scale(' + frac + ',' + frac + ')';
}

answered Jun 15, 2016 at 19:24

Tony Chiboucas

5,7231 gold badge32 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Taylor Over a year ago

PERFECT! Thanks a lot Tony really appreciate it!

Mojtaba · Accepted Answer · 2016-06-15 19:24:52Z

0

The problem is with the scope of myfraction variable. You did not global it.

window.onresize = resizefunc;
var myfraction = 0;
    
function resizefunc(){    
getFraction();
scale();
}

/*This function takes the red div's current width and divides it by its original width to create a fraction */
function getFraction() {    
myfraction = document.getElementById("reddiv").offsetWidth / 743; 
document.getElementById("dimensions").innerHTML = myfraction ;
}   

/*This function should take the blue div and scale it by the fraction */
function scale() {
 document.getElementById("bluediv").style.webkitTransform = 'scale(' + myfraction + ',' + myfraction + ')';
}

.red {
width: 743px;
height: 380px;
background-color: red;
margin: auto;}

@media screen and (max-width: 743px) {.red {width: 100%}}

#bluediv {
    background-color: blue;
    width: 400px;
    height: 380px;
    margin: auto;
    }

<div style="width: 100%; height: 500px;">
  <div id="reddiv" class="red">
    <div id ="bluediv"></div>
   </div> 
   <p id="dimensions"></p> 
</div>

answered Jun 15, 2016 at 19:24

Mojtaba

5,0175 gold badges24 silver badges40 bronze badges

2 Comments

Tony Chiboucas Over a year ago

no need to use globals, and they should be avoided where possible.

Mojtaba Over a year ago

@TonyChiboucas, I agree. But, I am going to fix the issue of the existing code. I am not optimizing the code.

Richard Vinoth · Accepted Answer · 2016-06-15 19:27:15Z

0

If i undersand your question :) I just joined two functions to just one, you can give it a try

function getFraction() {    
var myfraction = document.getElementById("reddiv").offsetWidth / 743; 
document.getElementById("dimensions").innerHTML = myfraction ;
 document.getElementById("bluediv").style.webkitTransform = 'scale(' + myfraction + ',' + myfraction + ')';
}

answered Jun 15, 2016 at 19:27

Richard Vinoth

3003 silver badges12 bronze badges

Collectives™ on Stack Overflow

Javascript variable concatenation not working

3 Answers 3

Your `size()` function never had the `myfraction` value

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Your size() function never had the myfraction value

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Your `size()` function never had the `myfraction` value