JSFiddle - React, Tailwind, and code Playground

by r3wt

HTML

<strong> part a</strong>
this should only fire if:
<br/>previous width &lt; 1200 and current width &gt; 1200</br>
<hr>
<strong> part b</strong>
this should only fire if:
<br/>previous width &lt; 960 and current width &gt; 960</br>
<hr>
<strong> part c</strong>
this should only fire if:
<br/>previous width &gt; 1200 and current width &gt; 1200</br>
<hr>

<h4>Results</h4>

<div id="log"></div>

CSS

#log {
    position: relative;
    border: 1px solid #000;
    padding: 10px;
    word-wrap: normal;
    height: 80px;
    overflow-y: scroll: width: 95%;
}

JavaScript

$(function () {
    var pwidth = $(window).width();

    $(window).resize(function () {
        clearTimeout(timeout);
        var cwidth = $(this).width();
        //part a
        if (pwidth < 1200 && cwidth > 1200) {
            $('#log').append('part a fired @ ' + cwidth + '<br/>');
        }

        if (pwidth < 1200) {
            //part b
            if (pwidth < 960 && cwidth > 960) {
                $('#log').append('part b fired @ ' + cwidth + '<br/>');
            }

            //part c
            if (pwidth > 1200 && cwidth < 1200) {
                $('#log').append('part c fired @ ' + cwidth + '<br/>');
            }
        }
        var timeout = setTimeout(function () {
            pwidth = $(window).width()
        }, 200);
    });
});