Press "Enter" to skip to content

jQuery Plugin View Current Breakpoint Information in Responsive Web Page | rwdKit

rwdKit jQuery plugin can help developers display the current breakpoint detector in a responsive webpage and creates a debug bar to display current media/device type and viewport size after window resizing.

How to make use of it:

1. Download and insert the rwdUtility plugin after the most recent jQuery library.

<script src="/path/to/cdn/jqueryslim.min.js"></script>
<script src="/path/to/jquery.rwdKit.js"></script>

2. Initialize the plugin to generate the breakpoint detector in a particular container or the entire doc.

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

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

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

3. Override the default media queries breakpoints.

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

4. Change the position of the breakpoint detector.

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

5. Determine whether or not to indicate the breakpoint change data within the console log as an alternative.

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

6. Customize the looks of the breakpoint detector.

$(document).rwdKit({
  color: 'white',
  backgroundColor: 'rgba(14,120,200,.9)',
});

7. Force to make use of Bootstrap 3 breakpoints. False = Uses Bootstrap 4 breakpoints.

$(document).rwdKit({
  bootstrap3: false
});

Breakpoint Detection In jQuery, jQuery rwdKit 2 Plugin/Github


See Demo And Download

Official Website(avantage-digital): Click Here

This superior jQuery/javascript plugin is developed by avantage-digital. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *