Change variable value on window width change jQuery

Question

I am fairly new to jQuery/javascript and I have a quick question, probably very simple but I can't seem to figure it out.

I want to change a variable value when the window width has changed. The reason I'm doing it with jQuery is that I can't alter the width or height via css.

This is my code:

<script type="text/javascript">

    var jwheight = 390,
    windowSize = $(window).width();

    $(window).resize(function(){
        if (windowSize < 992) {
            jwheight = 39;
        }
    })

player.initialize(800, jwheight, "player", "http://www.website.com", "http://www.website.com/static/images/logo.png", true);

</script>

So I want to change the height (jwheight) when the window width is smaller than 992px.

All help would be appreciated, thank you.

you have to re-calculate the window width inside the function. The initial width calculated was initialy before any window re-size. That is the point — Nikos M.
– Nikos M., Commented Sep 22, 2015 at 21:27
Note that changing the variable jwheight doesn't change the player object. — Guffa
– Guffa, Commented Sep 22, 2015 at 21:28
@Guffa how would I go about changing the player object? I need that height to change — KD1
– KD1, Commented Sep 22, 2015 at 21:36
@KD1: Use the new variable value to call the resize method of the player. — Guffa
– Guffa, Commented Sep 22, 2015 at 21:52

taxicala · Accepted Answer · 2015-09-22 21:25:16Z

3

your windowSize is outside the resize function, so it will always have the same value. You should use the width inside the function as follows:

<script type="text/javascript">
    var jwheight = 390;
    $(window).resize(function(){
        if ($(window).width() < 992) {
            jwheight = 39;
        }
    })

    player.initialize(800, jwheight, "player", "http://www.website.com", "http://www.website.com/static/images/logo.png", true);

</script>

answered Sep 22, 2015 at 21:25

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

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

1 Comment

KD1 Over a year ago

Thanx @taxicala I'll try this out

Guffa · Accepted Answer · 2015-09-22 21:51:12Z

0

Check the $(window).width() value inside the resize event, and resize the player depending on the result.

You would want to calculate the height depending on the width, then compare that to the current height so that you don't call player.resize when there isn't actually a size change:

var jwheight = 390;

$(window).resize(function(){
  var newHeight = $(window).width() < 992 ? 39 : 390;
  if (newHeight != jwheight) {
    jwheight = newHeight;
    player.resize(800, jwheight);
  }
})

player.initialize(800, jwheight, "player", "http://www.website.com", "http://www.website.com/static/images/logo.png", true);

answered Sep 22, 2015 at 21:51

Guffa

703k112 gold badges760 silver badges1k bronze badges

Collectives™ on Stack Overflow

Change variable value on window width change jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related