Apply on Screen

jQuery plugin to apply function when screen size is reached

How to Install:

• BOWER

bower install applyonscreen

• NPM:

npm i jquery-applyonscreen

Default Variables:

options = {
  min: {
    mobile: 0,
    tablet: 768,
    desktop: 992,
    large: 1200
  },
  max: {
    mobile: 767,
    tablet: 991,
    desktop: 1199,
    large: 7680
  }
};

Usage:

• HTML

  <div class="selector"></div>

• JavaScript

  • Applied when the screen is between 0 and 767

    $('.selector').applyOnScreen(function() {...}).range(0, 767);

  • Applied when the screen is between 0 and 767

    $('.selector').applyOnScreen(function() {...}).range('mobile', 'mobile');

  • Applied when the screen is between 0 and 767

    $('.selector').applyOnScreen(function() {...}).max(767);

  • Applied when the screen is between 0 and 767

    $('.selector').applyOnScreen(function() {...}).max('mobile');

  • To extend options variable

    $('.selector').applyOnScreen(function() {...}, {max: {xs: 480}}).max('xs');