How to persist checking the screen width in Javascript

Tags: javascript,jquery,css

Problem :

I have a function that runs on document ready. What it does is depending on if a certain link is showing on the nav bar, it will set the CSS for all the other links to keep the spacing aligned.

The way I have it written, it will only run on the first DOM load and if you resize it, it will look unaligned at a smaller breakpoints.

My question is how do I constantly run this function depending on the size of the window. Even if the user resizes it, it will run the function and set the correct CSS.

Is this possible?

Let me know! Thanks!

 $(document).ready(function () {
    var link = $('#catNav-sale').css('display');
    var winWidth = $(window).width();

    if (SaleLinkCSS == 'block')
    {
        if (winWidth >= 975)
        {
            $('#ID').css('left', '185px');

        }
        else
        {

        }

    }

---

Solution :

You could try any of the following,

Vanilla

window.onresize = function(event) {
    /** Your code here. **/    
};

jQuery

$(window).resize(function() {
    /** Your code here. **/
});

or A CSS option would be to use media queries.

Reading Material

(on)resize

jQuery's resize