1

I'm working on an interactive which has jQuery to adjust the positioning of certain animations based on screensize. The issue is that this doesn't update as the screen is resized, unlike Media Queries on CSS.

I've tried this method:

var screenSize = viewport()['width'];

$(window).resize(function() {


  if (screenSize >= 730 && screenSize <= 739) {
    // new animation positions
  } else if (screenSize >= 740 && screenSize <= 749) {
    // new animation positions
  } else {
    // new animation positions
}
                                            
});

Any idea why this wouldn't work? I can resize the window and refresh to find the animations in the new positions, but not when it's resized without the refresh.

Thanks.

samjohnsonmw
  • 87
  • 4

1 Answers1

1

Try this. Hope it helps.

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

This corresponds to current window width. You can use this in your conditions. myself using $(window).height() for achieving things i intend to.

Ila
  • 195
  • 13
  • Please [edit] in an explanation of why/how this code answers the question? Code-only answers are discouraged, because they are not as easy to learn from as code with an explanation. Without an explanation it takes considerably more time and effort to understand what was being done, the changes made to the code, if the code answers the question, etc. The explanation is important both for people attempting to learn from the answer and those evaluating the answer to see if it is valid, or worth up voting. – Makyen Feb 25 '15 at 06:06
  • Sorry my bad for the reply! – Ila Feb 25 '15 at 06:27