https://github.com/dipcode-software/jquery-applyonscreen

jQuery plugin to apply function when screen size is reached
https://github.com/dipcode-software/jquery-applyonscreen

breakpoint jquery jquery-plugin responsive

Last synced: about 1 month ago
JSON representation

jQuery plugin to apply function when screen size is reached

• Host: GitHub
• URL: https://github.com/dipcode-software/jquery-applyonscreen
• Owner: dipcode-software
• License: mit
• Created: 2017-08-21T17:45:41.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-03T15:21:30.000Z (about 7 years ago)
• Last Synced: 2024-04-23T21:28:45.716Z (8 months ago)
• Topics: breakpoint, jquery, jquery-plugin, responsive
• Language: JavaScript
• Size: 85.9 KB
• Stars: 3
• Watchers: 7
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Build Status](https://travis-ci.org/dipcode-software/jquery-applyonscreen.svg?branch=master)](https://travis-ci.org/dipcode-software/jquery-applyonscreen)

[![BCH compliance](https://bettercodehub.com/edge/badge/dipcode-software/jquery-applyonscreen?branch=master)](https://bettercodehub.com/)

# Apply on Screen

jQuery plugin to apply function when screen size is reached

## How to Install:

* BOWER

```bash

bower install applyonscreen

```

* NPM:

```bash

npm i jquery-applyonscreen

```

## Default Variables:

```javascript

options = {

  min: {

    mobile: 0,

    tablet: 768,

    desktop: 992,

    large: 1200

  },

  max: {

    mobile: 767,

    tablet: 991,

    desktop: 1199,

    large: 7680

  }

};

```

## Usage:

 - HTML

 	```html

    


    ```


 - JavaScript

	 - Applied when the screen is between **0** and **767**

        ```javascript

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

        ```

	 - Applied when the screen is between **0** and **767**

        ```javascript

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

        ```

	 - Applied when the screen is between **0** and **767**

        ```javascript

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

        ```

	 - Applied when the screen is between **0** and **767**

		```javascript

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

		```

	 - To extend **options** variable

        ```javascript

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

        ```