Jquery with Breakpoint on Bootstrap

get bootstrap breakpoint  with jquery

Jquery

"use strict";
function isBreakpoint(alias) {
    return $('.device-' + alias).is(':visible');
}

if (isBreakpoint('xs')) {
    $('.lalji').css('border-top', 'none');
    $('.lalji').css('border-left', '1px dotted black');

}
if (isBreakpoint('sm') || isBreakpoint('md') || isBreakpoint('lg')) {
    $('.lalji').css('border-top', 'none');
    $('.lalji').css('border-left', '1px solid black');

}


var waitForFinalEvent = function () {
    var b = {};
    return function (c, d, a) {
        a || (a = "I am a banana!");
        b[a] && clearTimeout(b[a]);
        b[a] = setTimeout(c, d);
    };
}();

var fullDateString = new Date();


$(window).resize(function () {
    waitForFinalEvent(function () {

        if (isBreakpoint('xs')) {
            $('.lalji').css('border-top', 'none');
            $('.lalji').css('border-left', '1px solid black');
        }
        if (isBreakpoint('sm') || isBreakpoint('md') || isBreakpoint('lg')) {
            $('.lalji').css('border-top', 'none');
            $('.lalji').css('border-left', '1px solid black');
        }

    }, 300, fullDateString.getTime());

});

HTML

<div class="device-xs visible-xs">XS</div>
    <div class="device-sm visible-sm">SM</div>
    <div class="device-md visible-md">MD</div>
    <div class="device-lg visible-lg">LG</div>

Comments

Popular posts from this blog

Scroll After Fixed Navigation

Bootstrap CSS Customize with SCSS CSS