maciej-gurban/How-to-detect-breakpoints-in-Bootstrap-using-JavaScript.markdown

## How-to-detect-breakpoints-in-Bootstrap-using-JavaScript.markdown

      
    Raw
  

              How-to-detect-breakpoints-in-Bootstrap-using-JavaScript.markdown
            
          
    How to detect breakpoints in Bootstrap using JavaScript

A simple way of detecting changes in currently active breakpoint, as well as executing breakpoint-specific JavaScript code.
A Pen by Maciej Gurban on CodePen.
License.

  
## index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content=="IE=edge"/>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>How to detect breakpoints in Twitter Bootstrap using JavaScript (and execute custom code whenever active breakpoint changes)</title>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>

<body>
<div class="example-wrapper">

  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <h4><strong>How to detect breakpoints in Twitter Bootstrap using JavaScript </strong></h4>
        (and execute custom code whenever active breakpoint changes)<br/><br/>
        <p>In this example <em>active breakpoint</em> box will increase its width using JavaScript function whenever the smallest (xs) breakpoint is detected.</p>
        <p>Resize your browser's width to see it working</p>
        <p>Active breakpoint: <div class="breakpoint-alias"></div></p>
      </div>
    </div>
  </div>


<!-- mandatory -->
  <div class="device-xs visible-xs"></div>
  <div class="device-sm visible-sm"></div>
  <div class="device-md visible-md"></div>
  <div class="device-lg visible-lg"></div>
<!-- end mandatory -->

</div>

</body>
</html>

## script.js
(function($){
  /*
   * A lightweight window resize listener
   */
  var waitForFinalEvent = function(){var b={};return function(c,d,a){a||(a="I'm a banana!");b[a]&&clearTimeout(b[a]);b[a]=setTimeout(c,d)}}();
  /*
   * @returns
   * true  - if page is currently using the breakpoint specified as argument
   * false - if otherwise
   */
  function isBreakpoint( alias ) {
    return $('.device-' + alias).is(':visible');
  }

  /*
   * Main window resize listener
   * Executes each time window has been resized
   */
  $(window).resize(function () {
    waitForFinalEvent(function(){

      if (isBreakpoint('xs')) {
        $('.breakpoint-alias').animate({'width': '150px'}, 300);
      } else {
        $('.breakpoint-alias').animate({'width': '50px'}, 300);
      }

    }, 300, new Date().getTime())
  });


})(jQuery);

## style.css
/*
 * None of the CSS in this example is necessary for the script to work properly. The only required CSS is the one shipped with Bootstrap.
 */

/* This example's styling */

.breakpoint-alias {
  display: inline-block;
  padding: 6px 12px;
  color: #fff;
  background-color: #238cce;
  width: 50px;
  text-align: center;
}
h4 {
   margin-bottom: 0!important;
}

@media (max-width: 767px) {
  .breakpoint-alias:before {
    content: 'XS ';
  }
}
@media (min-width: 768px) and (max-width: 983px) {
  .breakpoint-alias:before {
    content: 'SM ';
  }
}
@media (min-width: 984px) and (max-width: 1199px) {
  .breakpoint-alias:before {
    content: 'MD ';
  }
}
@media (min-width: 1200px) {
  .breakpoint-alias:before {
    content: 'LG ';
  }
}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content=="IE=edge"/>
	<meta name=viewport content="width=device-width, initial-scale=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>How to detect breakpoints in Twitter Bootstrap using JavaScript (and execute custom code whenever active breakpoint changes)</title>
	<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
	</head>

	<body>
	<div class="example-wrapper">

	<div class="container">
	<div class="row">
	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
	<h4><strong>How to detect breakpoints in Twitter Bootstrap using JavaScript </strong></h4>
	(and execute custom code whenever active breakpoint changes)<br/><br/>
	<p>In this example <em>active breakpoint</em> box will increase its width using JavaScript function whenever the smallest (xs) breakpoint is detected.</p>
	<p>Resize your browser's width to see it working</p>
	<p>Active breakpoint: <div class="breakpoint-alias"></div></p>
	</div>
	</div>
	</div>


	<!-- mandatory -->
	<div class="device-xs visible-xs"></div>
	<div class="device-sm visible-sm"></div>
	<div class="device-md visible-md"></div>
	<div class="device-lg visible-lg"></div>
	<!-- end mandatory -->

	</div>

	</body>
	</html>
	(function($){
	/*
	* A lightweight window resize listener
	*/
	var waitForFinalEvent = function(){var b={};return function(c,d,a){a\|\|(a="I'm a banana!");b[a]&&clearTimeout(b[a]);b[a]=setTimeout(c,d)}}();
	/*
	* @returns
	* true - if page is currently using the breakpoint specified as argument
	* false - if otherwise
	*/
	function isBreakpoint( alias ) {
	return $('.device-' + alias).is(':visible');
	}

	/*
	* Main window resize listener
	* Executes each time window has been resized
	*/
	$(window).resize(function () {
	waitForFinalEvent(function(){

	if (isBreakpoint('xs')) {
	$('.breakpoint-alias').animate({'width': '150px'}, 300);
	} else {
	$('.breakpoint-alias').animate({'width': '50px'}, 300);
	}

	}, 300, new Date().getTime())
	});


	})(jQuery);
	/*
	* None of the CSS in this example is necessary for the script to work properly. The only required CSS is the one shipped with Bootstrap.
	*/

	/* This example's styling */

	.breakpoint-alias {
	display: inline-block;
	padding: 6px 12px;
	color: #fff;
	background-color: #238cce;
	width: 50px;
	text-align: center;
	}
	h4 {
	margin-bottom: 0!important;
	}

	@media (max-width: 767px) {
	.breakpoint-alias:before {
	content: 'XS ';
	}
	}
	@media (min-width: 768px) and (max-width: 983px) {
	.breakpoint-alias:before {
	content: 'SM ';
	}
	}
	@media (min-width: 984px) and (max-width: 1199px) {
	.breakpoint-alias:before {
	content: 'MD ';
	}
	}
	@media (min-width: 1200px) {
	.breakpoint-alias:before {
	content: 'LG ';
	}
	}