css breakpoint device selector - Download Auto Pass CSS Breakpoints To JavaScript - js.device.selector

Download Auto Pass CSS Breakpoints To JavaScript – js.device.selector

By Posted on

This time I will share jQuery Plugin and tutorial about Auto Pass CSS Breakpoints To JavaScript – js.device.selector, hope it will help you in programming stack.

css breakpoint device selector - Download Auto Pass CSS Breakpoints To JavaScript - js.device.selector
File Size: 741 KB
Views Total: 494
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

“

js.device.selector is a JavaScript plugin that detects the device/display type (mobile, tablet, desktop, large-desktop, retina) of a browser and automatically passes the breakpoints defined in the CSS to the JavaScript.

How to use it:

1. Include the minified version of the js.device.selector plugin after jQuery.

view source
1 <script src="/path/to/jquery.js"></script>
2 <script src="/path/to/jquery.device.selector.js"></script>

2. Create the HTML for the device selector.

view source
1 <div data-device-selector>
2   <div data-device-selector-item data-device-selector-devicetype="mobile"></div>
3   <div data-device-selector-item data-device-selector-devicetype="tablet"></div>
4   <div data-device-selector-item data-device-selector-devicetype="desktop"></div>
5   <div data-device-selector-item data-device-selector-devicetype="large-desktop"></div>
6   <div data-device-selector-item data-device-selector-displaytype="retina"></div>
7 </div>

3. Define the breakpoints in the CSS media queries.

view source
01 [data-device-selector-item] {
02   display: none;
03 }
04  
05 @media
06 only screen and (max-width: 768px) {
07   [data-device-selector-devicetype="mobile"] {
08     display: block !important;
09   }
10 }
11  
12 @media
13 only screen and (min-width: 769px) and (max-width: 960px) {
14   [data-device-selector-devicetype="tablet"] {
15     display: block !important;
16   }
17 }
18  
19 @media
20 only screen and (min-width: 961px) and (max-width: 1200px) {
21   [data-device-selector-devicetype="desktop"] {
22     display: block !important;
23   }
24 }
25  
26 @media
27 only screen and (min-width: 1201px) {
28   [data-device-selector-devicetype="large-desktop"] {
29     display: block !important;
30   }
31 }
32  
33 @media
34 only screen and (-webkit-min-device-pixel-ratio: 2),
35 only screen and (   min--moz-device-pixel-ratio: 2),
36 only screen and (     -o-min-device-pixel-ratio: 2/1),
37 only screen and (        min-device-pixel-ratio: 2),
38 only screen and (                min-resolution: 192dpi),
39 only screen and (                min-resolution: 2dppx) {
40   [data-device-selector-displaytype="retina"] {
41     display: block !important;
42   }
43 }

4. Initailize the js.device.selector plugin.

view source
1 $.fn.deviceSelector();

5. Get the current device type: mobile || tablet || desktop || large-desktop.

view source
1 console.log($.fn.deviceSelector.getDeviceType());

6. Get the current display type: retina || undefined.

view source
1 console.log($.fn.deviceSelector.getDisplayType());

7. The DeviceSelector options.

  • selector: The DeviceSelector selector options.
  • selector.name: The DeviceSelector selector name for initialisation.
  • selector.items: The DeviceSelector selector items for initialisation.
  • selector.items.name: The DeviceSelector selector items name for initialisation.

    • f

  • selector.parent: The DeviceSelector selector parent for initialisation.
  • selector.parent.name: The DeviceSelector selector parent name for initialisation.
  • device: The DeviceSelector device type options.
  • device.selector: The DeviceSelector device type selector for initialisation.
  • device.selector.name: The DeviceSelector device type selector name for initialisation.
  • display: The DeviceSelector display type options.
  • display.selector: The DeviceSelector display type selector for initialisation.
  • display.selector.name: The DeviceSelector display type selector name for initialisation.
view source
01 $.fn.deviceSelector({
02   "selector": {
03     "name": ".namespace__m-device-selector",
04     "parent": {
05       "name": ".namespace",
06     },
07     "items": {
08       "name": ".namespace__m-device-selector__item",
09     },
10   },
11   "device": {
12     "selector": {
13       "name": "data-ds-devicetype",
14     },
15    source : jquery.net

Related posts: