/jquery-applyonscreen

jQuery plugin to apply function when screen size is reached

Primary LanguageJavaScriptMIT LicenseMIT

Build Status BCH compliance

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');