Breakpoint Detection In jQuery - rwdUtility

File Size: | 5.48 KB |
---|---|
Views Total: | |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.