Breakpoint Detection In jQuery - rwdUtility

rwdUtility is a breakpoint detector for developers that detects breakpoint changes and creates a debug bar to display the current media/device type and viewport size after window resize.

How to use it:

1. Download and insert the rwdUtility plugin after the latest jQuery library.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<script src="jquery.rwdUtility.js"></script>

2. Initialize the plugin to generate the breakpoint detector in a specific container or the whole document.

$(function(){
  $(document).rwdUtility();
});

// or
$(function(){
  $('body').rwdUtility();
});

// or
$(function(){
  $('.container').rwdUtility();
});

3. Override the default media queries breakpoints.

$(document).rwdUtility({
  media: {
    xs: 0,
    sm: 768,
    md: 992,
    lg: 1200,
    xl: 1599,
  }
});

4. Change the position of the breakpoint detector. Default: 'bottom'.

$(document).rwdUtility({
  position: 'top'
});

5. Determine whether to show the breakpoint change info in the console log instead. Default: false.

$(document).rwdUtility({
  console: true
});

6. Customize the appearance of the breakpoint detector.

$(document).rwdUtility({
  fontSize: '12px',
  color: 'white',
  backgroundColor: 'rgba(0,0,0,.65)'
});

7. Force to use Bootstrap 4 breakpoints.

$(document).rwdUtility({
  bootstrap4: false
});

Changelog:

2019-12-08

• v1.1.0: Added Bootstrap 4 option

---

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