-
Notifications
You must be signed in to change notification settings - Fork 8
/
if-b3-breakpoint.js
68 lines (53 loc) · 1.66 KB
/
if-b3-breakpoint.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// Create global variables that can be used elsewhere
// set variables
var xs;
var sm;
var md;
var lg;
var xl;
var breakpoint;
// Checks if the span is set to display lock via CSS
function checkIfBlock (target) {
var target = $(target).css('display') == 'block';
return target;
}
// function to check the sizes
function checkSize (){
// Set some variables to use with the if checks below
xs = checkIfBlock('.breakpoint-check .visible-xs-block');
sm = checkIfBlock('.breakpoint-check .visible-sm-block');
md = checkIfBlock('.breakpoint-check .visible-md-block');
lg = checkIfBlock('.breakpoint-check .visible-lg-block');
// add the breakpoint to the console
console.clear();
if( xs == true) {
breakpoint = "xs - <480px";
console.log(breakpoint);
$("body").removeClass('xs sm md lg').addClass( "xs" );
}
if( sm == true) {
breakpoint = "sm - ≥768px";
console.log(breakpoint);
$("body").removeClass('xs sm md lg').addClass( "sm" );
}
if( md == true) {
breakpoint = "md - ≥992px";
console.log(breakpoint);
$("body").removeClass('xs sm md lg').addClass( "md" );
}
if( lg == true) {
breakpoint = "lg - ≥1200px";
console.log(breakpoint);
$("body").removeClass('xs sm md lg').addClass( "lg" );
}
}
// end check size
$(document).ready(function(){
// Add some invisible elements with Bootstrap CSS visibile utility classes
$( "body" ).append( "<div style='visibility:hidden;' class='breakpoint-check'><span class='visible-xs-block'></span><span class='visible-sm-block'></span><span class='visible-md-block'></span><span class='visible-lg-block'></span></div>" );
checkSize();
});
// Reload demo on window resize
$( window ).resize( function(){
checkSize();
});