Warning: This site describes the AngularJS (1.x) implementation of the SKY UX framework. We still support this version, but it is in maintenance mode. We no longer develop features for this version of SKY UX, and we recommend that you use the latest version instead. For more information, see developer.blackbaud.com/skyux.

Media breakpoints

The media breakpoints service calls callback functions when a Bootstrap grid system breakpoint is hit. This allows you to manipulate the user interface programmatically when CSS media queries are not sufficient.

Dependencies


Media breakpoint methods

  • register(callback) — Registers a callback method with the service to be called any time a media breakpoint is hit. The callback function is called with the following arguments:
    • breakpoint — An object with xs, sm, md, and lg properties. The property that corresponds to the current breakpoint is set to true and the rest are set to false.
  • unregister(callback) — Unregisters the specified callback method. This should be called whenever the controller's $scope is destroyed.
  • getCurrent() — Gets the current media breakpoint object.

Demo

Resize the browser to watch the label below change when you hit a media breakpoint.
Current media breakpoint: {{mediaCtrl.status}}

Markup

<div ng-controller="MediaBreakpointsTestController as mediaCtrl">
  Resize the browser to watch the label below change when you hit a media breakpoint.
  <div class="alert alert-info" style="margin-top: 10px;">
    Current media breakpoint: <strong>{{mediaCtrl.status}}</strong>
  </div>
</div>

JavaScript

/*global angular */

(function () {
    'use strict';

    function MediaBreakpointsTestController($scope, bbMediaBreakpoints) {
        var self = this;

        function mediaBreakpointCallback(breakpoint) {
            var p;

            for (p in breakpoint) {
                if (breakpoint.hasOwnProperty(p) && breakpoint[p]) {
                    self.status = p;
                    break;
                }
            }
        }

        bbMediaBreakpoints.register(mediaBreakpointCallback);

        $scope.$on('$destroy', function () {
            bbMediaBreakpoints.unregister(mediaBreakpointCallback);
        });
    }

    MediaBreakpointsTestController.$inject = ['$scope', 'bbMediaBreakpoints'];

    angular.module('stache').controller('MediaBreakpointsTestController', MediaBreakpointsTestController);
}());