INDIAN2020/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

Responsive Bootstrap Toolkit provides an easy way of breakpoint detection in JavaScript, detecting changes in currently active breakpoint, as well as executing any breakpoint-specific JavaScript code.
A Pen by Maciej Gurban on CodePen.
License.

  
## index.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">
    <title>Responsive Bootstrap Toolkit</title>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
    <!-- Include default Bootstrap stylesheet -->
    <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
</head>

<body>

    <div class="wrapper">
        <div class="site-topbar clearfix" data-compact-height="40" data-fullsize-height="60">
            <h5 class="text-uppercase">Responsive Bootstrap Toolkit</h5>
            <div class="breakpoint-alias pull-right text-center"></div>
        </div>

        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 col-sm-push-2 col-md-push-3 col-lg-push-3">
                    <br/>
                    <br/>
                    <p>Boxes below get highlighted whenever current viewport matches their expression. Alias of current breakpoint is visible in the top right corner.</p>
                    <br/>

                    <div class="comparison-boxes">
                        <div class="comparison-operator box-1">
                            &lt;=sm
                        </div>
                        <div class="comparison-operator box-2">
                            md
                        </div>
                        <div class="comparison-operator box-3">
                            &gt;md
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://rawgit.com/maciej-gurban/responsive-bootstrap-toolkit/master/dist/bootstrap-toolkit.min.js"></script>

</body>
</html>

## script.js
(function($, document, window, viewport){

    var highlightBox = function( className ) {
        $(className).addClass('active');
    }

    var highlightBoxes = function() {
        $('.comparison-operator').removeClass('active');

        if( viewport.is("<=sm") ) {
            highlightBox('.box-1');
        }

        if( viewport.is("md") ) {
            highlightBox('.box-2');
        }

        if( viewport.is(">md") ) {
            highlightBox('.box-3');
        }
    }

    // Executes once whole document has been loaded
    $(document).ready(function() {

        highlightBoxes();

        console.log('Current breakpoint:', viewport.current());

    });

    $(window).resize(
        viewport.changed(function(){
            highlightBoxes();

            console.log('Current breakpoint:', viewport.current());
        })
    );

})(jQuery, document, window, ResponsiveBootstrapToolkit);

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

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

/* This example's styling */

@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";
  }
}

body {
  font-family: 'Open Sans', sans-serif;
}

@media (max-width: 767px) {
  h1 {
    font-size: 20px;
  }
}
@media (min-width: 768px) and (max-width: 983px) {
  h1 {
    font-size: 24px;
  }
}
@media (min-width: 984px) and (max-width: 1199px) {
  h1 {
    font-size: 24px;
  }
}
@media (min-width: 1200px) {
  h1 {
    font-size: 30px;
  }
}

.wrapper {
  background: white;
  color: #666666;
}
.wrapper .site-topbar {
  height: 60px;
  line-height: 60px;
  vertical-align: middle;
  background: #414141;
  color: white;
  position: relative;
  vertical-align: middle;
}
.wrapper .site-topbar h5 {
  height: inherit;
  line-height: inherit;
  vertical-align: middle;
  font-weight: 300;
  margin: 0 60px 0 15px;
  vertical-align: middle;
}
.wrapper .site-topbar .breakpoint-alias {
  background-color: #238cce;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 60px;
  margin: auto;
}

.comparison-boxes {
  text-align: justify;
  font-size: 0.1px;
}
.comparison-boxes:after {
  content: '';
  display: inline-block;
  width: 100%;
}

.comparison-operator {
  height: 140px;
  line-height: 140px;
  vertical-align: middle;
  display: inline-block;
  background: #414141;
  color: white;
  font-size: 25px;
  text-align: center;
  width: 33%;
  min-height: 50%;
}
.comparison-operator.active {
  background: #238cce;
}

.text-uppercase {
  text-transform: uppercase;
}
	<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">
	<title>Responsive Bootstrap Toolkit</title>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
	<!-- Include default Bootstrap stylesheet -->
	<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
	</head>

	<body>

	<div class="wrapper">
	<div class="site-topbar clearfix" data-compact-height="40" data-fullsize-height="60">
	<h5 class="text-uppercase">Responsive Bootstrap Toolkit</h5>
	<div class="breakpoint-alias pull-right text-center"></div>
	</div>

	<div class="container-fluid">
	<div class="row">
	<div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 col-sm-push-2 col-md-push-3 col-lg-push-3">
	<br/>
	<br/>
	<p>Boxes below get highlighted whenever current viewport matches their expression. Alias of current breakpoint is visible in the top right corner.</p>
	<br/>

	<div class="comparison-boxes">
	<div class="comparison-operator box-1">
	<=sm
	</div>
	<div class="comparison-operator box-2">
	md
	</div>
	<div class="comparison-operator box-3">
	>md
	</div>
	</div>
	</div>
	</div>
	</div>

	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="https://rawgit.com/maciej-gurban/responsive-bootstrap-toolkit/master/dist/bootstrap-toolkit.min.js"></script>

	</body>
	</html>
	(function($, document, window, viewport){

	var highlightBox = function( className ) {
	$(className).addClass('active');
	}

	var highlightBoxes = function() {
	$('.comparison-operator').removeClass('active');

	if( viewport.is("<=sm") ) {
	highlightBox('.box-1');
	}

	if( viewport.is("md") ) {
	highlightBox('.box-2');
	}

	if( viewport.is(">md") ) {
	highlightBox('.box-3');
	}
	}

	// Executes once whole document has been loaded
	$(document).ready(function() {

	highlightBoxes();

	console.log('Current breakpoint:', viewport.current());

	});

	$(window).resize(
	viewport.changed(function(){
	highlightBoxes();

	console.log('Current breakpoint:', viewport.current());
	})
	);

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

	/* This example's styling */

	@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";
	}
	}

	body {
	font-family: 'Open Sans', sans-serif;
	}

	@media (max-width: 767px) {
	h1 {
	font-size: 20px;
	}
	}
	@media (min-width: 768px) and (max-width: 983px) {
	h1 {
	font-size: 24px;
	}
	}
	@media (min-width: 984px) and (max-width: 1199px) {
	h1 {
	font-size: 24px;
	}
	}
	@media (min-width: 1200px) {
	h1 {
	font-size: 30px;
	}
	}

	.wrapper {
	background: white;
	color: #666666;
	}
	.wrapper .site-topbar {
	height: 60px;
	line-height: 60px;
	vertical-align: middle;
	background: #414141;
	color: white;
	position: relative;
	vertical-align: middle;
	}
	.wrapper .site-topbar h5 {
	height: inherit;
	line-height: inherit;
	vertical-align: middle;
	font-weight: 300;
	margin: 0 60px 0 15px;
	vertical-align: middle;
	}
	.wrapper .site-topbar .breakpoint-alias {
	background-color: #238cce;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 60px;
	margin: auto;
	}

	.comparison-boxes {
	text-align: justify;
	font-size: 0.1px;
	}
	.comparison-boxes:after {
	content: '';
	display: inline-block;
	width: 100%;
	}

	.comparison-operator {
	height: 140px;
	line-height: 140px;
	vertical-align: middle;
	display: inline-block;
	background: #414141;
	color: white;
	font-size: 25px;
	text-align: center;
	width: 33%;
	min-height: 50%;
	}
	.comparison-operator.active {
	background: #238cce;
	}

	.text-uppercase {
	text-transform: uppercase;
	}