JS/css breakpoint mingle

[mhulse]

I know it's not all CSS here, but this is useful:

There's this approach:

body:before {
  display: none !important;
  @include breakpoint(xs) {
    content: 'xs' !important;
  }
  @include breakpoint(sm) {
    content: 'sm' !important;
  }
  @include breakpoint(md) {
    content: 'md' !important;
  }
  @include breakpoint(lg) {
    content: 'lg' !important;
  }
}

$(window).resize(function () {
      var breakpoint = window
          .getComputedStyle( document.querySelector('body'), ':before' )
          .getPropertyValue( 'content' )
          .replace(/['"]+/g, '');
    // Do the thing based on the breakpoint.
});

Which is related to a more robust plugin found here:

• https://github.com/JoshBarr/on-media-query

And this other approach:

Put this anywhere in your document:

<span id="mq-detector">
    <span class="visible-xs" data-id="0"></span>
    <span class="visible-sm" data-id="1"></span>
    <span class="visible-md" data-id="2"></span>
    <span class="visible-lg" data-id="3"></span>
</span>

The above uses Bootstrap 3’s CSS:

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  display: none !important;
}
@media (max-width: 767px) {
  .visible-xs {
    display: block !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .visible-sm {
    display: block !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .visible-md {
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .visible-lg {
    display: block !important;
  }
}

Then this JS:

$(function() {

    // https://stackoverflow.com/a/28373319/922323
    // https://github.com/garand/sticky/issues/211
    // https://github.com/JoshBarr/on-media-query

    var $sticky = $('.sticky');
    var options = {
        topSpacing: 10,
        responsiveWidth: true
    };

    $sticky.sticky(options);

    $('body').on('BREAKPOINT', function(event, size) {
        if (size <= 1) {
            $sticky.unstick();
        } else {
            $sticky.sticky(options);
        }
    });

});

//----------------------------------------------------------------------
// THIS SHOULD COME LAST!
//----------------------------------------------------------------------

$(function() {

    var mqDetector = $('#mq-detector');
    var mqSelectors = [
        mqDetector.find('.visible-xs'),
        mqDetector.find('.visible-sm'),
        mqDetector.find('.visible-md'),
        mqDetector.find('.visible-lg')
    ];

    var checkForResize = function() {
        for (var i = 0; i <= mqSelectors.length; i++) {
            if (mqSelectors[i].is(':visible')) {
                if (window.BREAKPOINT != i) {
                    window.BREAKPOINT = i;
                    console.log(mqSelectors[i].attr('class'));
                    $('body').trigger('BREAKPOINT', mqSelectors[i].data('id'));
                }
                break;
            }
        }
    };

    window.BREAKPOINT = undefined;

    $(window).on('resize', checkForResize);

    checkForResize();

});