Enquire.js on resize

Question

I am using enquire.js because it was advised in this topic.

I cannot use media queries because:

• media queries also count the scrollbar to the windows size, whereas jQuery's $(window).width() doesn't
• I need to set an element to window width, which I cannot with CSS

But because I am using media queries for other stuff and scrollbar widths differ across platforms I needed to find a JS library that allowed me to use JS and that simulated media queries. Enquire.js does this beautifully. I have one problem with this though.

1. Test case 1 (fiddle)

In both cases, scale the width of the window back to less than 480 pixels. (On my website you'll need to refresh the page; ads only resize after a refresh). You might notice what I want to do: when the window is smaller than 480px the thumbnail (image) has to be placed to the left (with as value the padding value of its parent) and it has to get the width of the window.

So far that works great in enquire.js. The problem arises when resizing the window. The size of the image doesn't change if the viewport gets smaller, which it should. Ofcourse, this is quite logical: there is no change from match to unmatch or otherwise and so the function isn't called again. Unfortunately, that's exactly what I need. I need that function to be called again on every resize.

I thought there used to be something like .listen() on this plugin, but it doesn't seem to work anymore.

Any help?

Answer 1

I know this is an older question, but just in case it might help you or anyone else: You could try https://github.com/chasingmaxwell/onresize.js. I wrote it for this exact purpose. No media query support, but it will call your function on every resize.