Execute javascript layout adjustments based on breakpoints only once

jquery.adjustat.js

(function ($) {
    $.fn.adjustAt = function(options) {
        var elements = $(this);
        // Default settings merged with received options
        var settings = $.extend({
            width: 0,
            above: function(element) {},
            below: function(element) {},
            aboveRepeat: function(element) {},
            belowRepeat: function(element) {}
        }, options);
        // Executes above(), below(), aboveRepeat() and belowRepeat() if necessary
        function adjust(element, force) {
            if((element.data('last-width') < settings.width || element.data('last-width') === undefined || force) && $('html').width() >= settings.width) {
                // if width of window is growing, and we passed the breakpoint, execute above()
                settings.above(element);
            } else if((element.data('last-width') > settings.width || element.data('last-width') === undefined || force) && $('html').width() <= settings.width) {
                // if width of window is shrinking, and we passed the breakpoint, execute below()
                settings.below(element);
            }
            if($('html').width() >= settings.width) {
                settings.aboveRepeat(element);
            } else {
                settings.belowRepeat(element);
            }
        }
        return elements.each(function() {
            var element = $(this);
            // Adjust each element once on initiation (forced adjustment)
            adjust(element, true);
            $(window).resize(function() {
                // Adjust each element (if necessary)
                adjust(element);
                // Save window width for the next time (can not be saved in global scope, because of possible interference with other instances)
                element.data('last-width', $('html').width());
            });
        });
    };
}(jQuery));

jquery.adjustat.markdown

Execute javascript layout adjustments based on breakpoints only once

---

This code is now a proper repository: https://github.com/tillsanders/adjust-at

---

So, I know, this isn't best practice, but sometimes it is unavoidable: Let's say, you want to build a responsive website. For screens smaller than 1000px, you want your menu to appear more mobile-friendly, hide it, attach a menu icon, attach click events to it, etc. For screens bigger than 1000px, you need to detach some event handlers, make it visible, in case it's hidden, etc. Now, how can we do that: Well, one way, would be to check the screen size and do whatever needs to be done, every single time, the window.resize event fires. There are some scenarios where we need just that, but in many cases, we only need these tasks executed once, that is: whenever we pass the breakpoint.

This is a small jQuery-Plugin. Attach it to the element you want to adjust and provide the breakpoint, as well as functions to be executed once above and below the breakpoint, and repeatedly above and below.

Demonstration: So, we have this element, and we want it to be hidden above 1000px screen size. Also, we want to do this with javascript, because who needs CSS anyway, right? ;)

$('.hidethissometimes').adjustAt({
    width: 1000,
    above: function(element) {
        element.hide();
    },
    below: function(element) {
        element.show();
    }
});

Great, this should be rather self-explanary. Both closures (above and below) will only be fired once :) Performance, bitch! You can also pass functions to be executed above/below the breakpoint everytime window.resize fires. The Parameters are called aboveRepeat and belowRepeat.