https://www.skills-studio.com/wp-content/themes/skills/assets/js/inc/ifbreakpoints.js?ver=1.0.0

1
2// Create global variables that can be used elsewhere
3
4// set variables  
5var xs;
6var sm;
7var md;
8var lg;
9var xl;
10var xxl;
11var breakpoint;
12( function( $ ) {
13// Checks if the span is set to display lock via CSS
14function checkIfBlock (target) {
15    var target = $(target).css('display') == 'block';
16    return target;
17}
18
19// function to check the sizes
20function checkSize (){
21  // Set some variables to use with the if checks below
22
23xs = checkIfBlock('.breakpoint-check .xs');
24sm = checkIfBlock('.breakpoint-check .sm');
25md = checkIfBlock('.breakpoint-check .md');
26lg = checkIfBlock('.breakpoint-check .lg');
27xl = checkIfBlock('.breakpoint-check .xl');
28xxl = checkIfBlock('.breakpoint-check .xxl');
29
30
31// add the breakpoint to t console
32
33if( xs == true) {
34	breakpoint = "xs - <576px";
35	console.log(breakpoint);
36	$("body").removeClass('xs sm md lg xl xxl').addClass( "xs" );
37} 
38
39if( sm == true) {
40		breakpoint = "sm - ≥576px";
41	console.log(breakpoint);
42	$("body").removeClass('xs sm md lg xl xxl').addClass( "sm" );
43} 
44
45if( md == true) {
46		breakpoint = "md - ≥768px";
47	console.log(breakpoint);
48	$("body").removeClass('xs sm md lg xl xxl').addClass( "md" );
49} 
50
51if( lg == true) {
52		breakpoint = "lg - ≥992px";
53	console.log(breakpoint);
54	$("body").removeClass('xs sm md lg xl xxl').addClass( "lg" );
55} 
56
57if( xl == true) {
58		breakpoint = "xl - ≥1200px";
59	console.log(breakpoint);
60	$("body").removeClass('xs sm md lg xl xxl').addClass( "xl" );
61} 
62if( xxl == true) {
63		breakpoint = "xxl - ≥1600px";
64		console.log(breakpoint);
65	$("body").removeClass('xs sm md lg xl xxl').addClass( "xxl" );
66} 
67} 
68// end check size
69
70
71
72$(document).ready(function(){
73 	// Add some invisible elements with Bootstrap CSS visibile utility classes
74	$( "body" ).append( "<div style='display:none;' class='breakpoint-check'><span class='xs d-block d-sm-inline'></span><span class='sm d-sm-block d-md-inline'></span><span class='md d-md-block d-lg-inline'></span><span class='lg d-lg-block d-xl-inline'></span><span class='xl d-xl-block d-xxl-inline'></span><span class='xxl d-xxl-block'></span></div>" );
75	checkSize();
76});
77
78
79// Reload demo on  window resize
80$( window ).resize( function(){
81	checkSize();
82}); 
83} )( jQuery );