Trigger A Function When A Screen Size Is Reached - jQuery applyOnScreen

Trigger A Function When A Screen Size Is Reached - jQuery applyOnScreen

Apply on Screen is a jQuery plugin that monitors the window resize event and conditionally runs functions on the screen limit defined by min and max.

1. Load the minified version of the Apply On Screen plugin after loading jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous"></script>
<script src="dist/applyonscreen.jquery.min.js"></script>

2. Specify the breakpoints for each screen resolution.

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

3. Fire a custom function when a specific screen size is reached.

$( window ).resize(function() {
  $('body').applyOnScreen(function() {
    alert('Large');
  }).max('large');
});
$( window ).resize(function() {
  $('body').applyOnScreen(function() {
    alert('Desktop');
  }).max('desktop');
});
$( window ).resize(function() {
  $('body').applyOnScreen(function() {
    alert('Tablet');
  }).max('Tablet');
});
$( window ).resize(function() {
  $('body').applyOnScreen(function() {
    alert('Mobile');
  }).max('Mobile');
});

This awesome jQuery plugin is developed by dipcode-software. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 03.01.2018
  • Source