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

Post a Comment

Popular posts from this blog

Scroll After Fixed Navigation

jQuery : $(document).ready(function() {   var toggleAffix = function(affixElement, scrollElement, wrapper) {     var height = affixElement.outerHeight(),         top = wrapper.offset().top;       if (scrollElement.scrollTop() >= top){         wrapper.height(height);         affixElement.addClass("affix");     }     else {         affixElement.removeClass("affix");         wrapper.height('auto');     }       };   $('[data-toggle="affix"]').each(function() {     var ele = $(this),         wrapper = $('<div></div>');       ele.before(wrapper);     $(window).on('scroll resize', function() {         toggleAffix(ele, $(this), wrapper);     });       // init     t...
Read more

Bootstrap CSS Customize with SCSS CSS

Using Bootstrap with Bower First let's make a  package.json file for Node to see. Either use npm init -y or create a package.json file containing just an empty JSON object ( {} ). Now let's install gulp , gulp-bower , and gulp-sass : $ npm install --save-dev gulp gulp-bower gulp-sass Now let's use Bower to install bootstrap. This will allow us to import Bootstrap into our SCSS code and compile it down to CSS manually. Create a bower.json file using bower init or by manually creating one: Now let's install bootstrap-sass with Bower. $ bower install --save bootstrap-sass Create One file Now we can make an SCSS file that includes bootstrap into our project. Let's call our SCSS file css/app.scss : @ import "bootstrap" ; @ import "bootstrap/theme" ; Now let's use gulp to compile our app.scss , which includes Bootstrap SASS: Create On JS File with gulpfile.js var gulp = require ...
Read more

Best way to prevent page scrolling on drag (mobile)

 window.onmousedown= function (e) {            if (isTouchDevice()) {                 $(document).on('touchstart', function (e) {                     e.preventDefault();                 });             } }  window.onmouseup = function (e) {     $(document).off('touchstart'); }
Read more