Fire jQuery when breakpoint is reached

Question

I have a responsive design with multiple breakpoints. Some of the block dimensions in the content are calculated with jQuery. When the viewport changes these dimensions change thus the calculation should be run. How can I fire these events when the dimension of the reference element changes? The reference element changes when a breakpoint is crossed.

I've looked at the "orientationchange" event but it's not having the results I need.

hook to the window resize event. – avrahamcool Mar 26 '16 at 18:31 — avrahamcool, Mar 26 '16 at 18:31

jfriend00 · Accepted Answer · 2016-03-26T19:07:42.857

2

You provide very little specifics and no code so all we can do is answer very generally.

Usually, you install a .resize() event handler and on every resize of the containing window, you check to see if the resulting dimensions have changed such that you need to recalculate and modify the layout.

$(window).resize(function(e) {
    // check dimensions here to decide if layout needs to be adjusted
});

jQuery mobile supports the orientationchange event like this which also gives you e.orientation as "portrait" or "landscape":

$(window).on( "orientationchange", function(e) {
    // check dimensions here to decide if layout needs to be adjusted
});

There are no DOM events for watching a size change on a specific element in the page other than a window object. Instead, you have to watch whatever other events might cause a given element to get resized which might be a resize of the window, an orientation change or some other action in the page that modifies the page (a button press or click on something, for example). Then, when those other events fire and get processed, you can then check the size of your target element and see if it changed.

Here's a jQuery plugin that debounces the resize event so it only tells you about a resize when the size has stopped changing:

(function($) {
    var uniqueCntr = 0;
    $.fn.resized = function (waitTime, fn) {
        if (typeof waitTime === "function") {
            fn = waitTime;
            waitTime = 250;
        }
        var tag = "resizeTimer" + uniqueCntr++;
        this.resize(function () {
            var self = $(this);
            var timer = self.data(tag);
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(function () {
                self.removeData(tag);
                fn.call(self[0]);
            }, waitTime);
            self.data(tag, timer);
        });
    }
})(jQuery);

Working demo: https://jsfiddle.net/jfriend00/k415qunp/

Sample usage:

$(window).resized(function() {
    // put code here to act when window stopped getting resized
});

edited Mar 26 '16 at 19:07

answered Mar 26 '16 at 18:32

jfriend00

683,504
96
985
979

I know I'm sorry about that, I've edited my question just now. Thinking about it I need to fire when the reference element changes its width. – Badger Mar 26 '16 at 18:34
@Badger - There are no events for watching a size change on a specific element in the page. Instead, you have to watch whatever other events might cause a given element to get resized which might be a resize of the window, an orientation change or some other action in the page that modifies the page (a button press or click on something, for example). – jfriend00 Mar 26 '16 at 18:36
Ok, I'm clearly looking for a way to detect whether the window is changing. Using the $(window).resize... should work properly. At the same time I could imagine that the event could be fired many times if, for, example, a browser window is being dragged to a smaller size. Can this have any implications? – Badger Mar 26 '16 at 18:53
@Badger - Yes, `window.resize()` is typically fired many times. There are many ways to work-around this. If it's a problem to process each individual event, ,then the typical way is with a short delay timer so you only actually process the `resize()` event when you haven't seen it change size in the last nnn ms. – jfriend00 Mar 26 '16 at 19:01
@Badger - Here's one way this is done http://stackoverflow.com/questions/16578129/before-after-resize-event/16578162#16578162. This is a more general solution in jQuery plug-in form that is done for scrolling events but could easily be modified for resize http://stackoverflow.com/questions/7392058/more-efficient-way-to-handle-window-scroll-functions-in-jquery/7392655#7392655/ – jfriend00 Mar 26 '16 at 19:01
Great! I'm going to look into this more. For now it is working the way it should thanks to your suggestion. The other suggestions need some examination and might be used for the go-live version of the website. – Badger Mar 26 '16 at 19:02
@Badger - I added a jQuery plugin to my answer that does the timer delay for you. – jfriend00 Mar 26 '16 at 19:08
Wow! Thanks a lot for that, it works like a champ! Great service, thanks for your thorough explanation! – Badger Mar 26 '16 at 20:04

score 0 · Answer 2 · answered Mar 26 '16 at 18:48

0

This page might help you. They talk about JS execution based on breakpoints and doing it with cross-browser support. Basically you'll be using a hidden pseudo element using the "content" property of .myClass:after.

answered Mar 26 '16 at 18:48

Dexter

795
2
13
27

Thanks! I'll have a look at this for the go-live version of the site. – Badger Mar 26 '16 at 19:03

Fire jQuery when breakpoint is reached

2 Answers2