jQuery Responsive / Breakpoint Optimized Library

A Breakpoint is a lightweight jQuery library for detecting and managing breakpoint changes. Breakpoint was originally written to optimize for large one-page sites with too many links to resize causing performance issues. While it still achieves the previous goal, it has also been rewritten to help manage general breakpoints.

jquery media query, set breakpoint in jquery, jquery responsive, jquery with, clientwidth jquery, jquery window width, javascript get bs breakpoint

How to make use of it:

1. Install jQuery Breakpoints with NPM:

$ npm install jquery-breakpoints --save

2. Alternatively, you can also download and insert a JavaScript file.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
<script src="jquery.breakpoints.min.js"></script>

3. Configure the plugin and we are ready to go.




4. Run a function when the breakpoint changes.

$(window).bind("breakpoint-change", function(event) {
  console.log(event.from, event.to);

$(window).bind("breakpoint-change", function(event) {
  if (event.from === "md") {
    // ...

  if (event.to === "md") {
    // ...

5. Preset breakpoints.

  breakpoints: [
    {"name": "xs", "width": 0},
    {"name": "sm", "width": 768},
    {"name" : "md", "width": 992},
    {"name" : "lg", "width": 1200}

6. Compare breakpoints and perform certain functions.

$(window).on('lessThan-md', function() {
  // Do something when viewport is less than 992px

7. API methods.

// Returns the current breakpoint name.

// Returns the current breakpoint width

// Destroys the plugin

8. More plugin options.

  // A buffer is set before breakpoints trigger breakpoint-change. 
  // The buffer keeps resizing more performant by not triggering actions prematurely.
  buffer: 300,

  // On initializing Breakpoints after the buffer trigger a breakpoint-change so all bindings necessary could happen. 
  // This will return the same event object as regular breakpoint change with event.initalInit.
  triggerOnInit: false,

  // Use $(window).outerWidth() over the default $(window).width() for window width calculations.
  outerWidth: false

Execute Functions Within Certain Breakpoints Plugin/Github, how to set window width in jquery

See Demo And Download

Official Website(jerrylow): Click Here

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

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Select Box Based Star Rating JavaScript Library | star-rating.js

star-rating.js is a small JavaScript library to create a customizable and gradually improved star rating control from a regular tick box with numeric values. The ES6 module…


Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

Bootstrap Notification is an easy-to-use jQuery plugin that uses the Bootstrap Alerts component to create static, rejectable, and stackable notification popups in the upper right corner of the…


Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav

Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps the infinite nesting of submenu…


Responsive Masonry Layout with SSR Support for Vue 3 | vue-masonry-wall

Vue masonry wall is a responsive masonry layout component for Vue 3 to deliver a Masonry-style responsive grid layout with SSR and RTL layout support. Features 📱…


A Bootstrap 5 Toast Notification Framework Library | bs-toaster

bs-toaster is simple to instantiate bs-toaster and create multiple toasts effortlessly using native Bootstrap 5! Feature Facts Small and clean Modern browser support. No IE sorry 💥…