Question

I have the code that works at current

jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);

function resizeFrame() 
{
var w = $(window).width();
$('.resize').css('width', (w <= 1680) ? 1680 : 1920);
}

but now i need to add in other screen sizes, such as:

$('.resize').css('width', (w <= 1280) ? 1280 : 1920);
$('.resize').css('width', (w <= 1024) ? 1024 : 1920);

but im unsure about how to chain these together, ive tried using || but this didn’t work

help appreciated

Answer 1

function resizeFrame() {
  var height = $(window).height(),
      width  = $(window).width(),
      resizeWidth;

  if (width <= 1024) {
    resizeWidth = 1024;
  } else if (width <= 1280) {
    resizeWidth = 1280;
  } else if (width <= 1680) {
    resizeWidth = 1680;
  } else {
    resizeWidth = 1920;
  }

  $('.resize').css('width', resizeWidth);
}