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


    CSS Howto..

    how to make background image stretch vertically

    How to get a tight div when heights differ? [duplicate]

    HTML/CSS/JS: How to force browser to save password from a non-'password' type input?

    How to hide specific lines of css from IE 7 and IE 8

    How can I use bootstrap in css file?

    How do I style a Javascript button using d3?

    How to move a span after an img?

    how to relate to a relative css of master page?

    How can i override the margin: 0; padding: 0; border: 0; css styles from main body css for ul li

    How to clear the bottom of an image like clear left / right

    HTML4 strict: border=“0” is deprecated, how to replace it

    Can't figure out how to change font color, using jQuery (trying to build a simple menu)

    how do i set the text that my json file is printing to screen i want to hide the text

    How to embed video on my first website

    How would I go about applying some sort of dynamic range counter to jQuery and CSS?

    How to extend this navigation bar off the page?

    Glide.js, how to check size of image?

    How to retain rectangular border around button when clicked

    How do I align elements using CSS?

    CSS form with side by side fields…how to align the labels and fields vertically?

    How to change textbox style in css

    How to create login popup on mouseover on a link using css & or javascript.

    How to set control properties in css?

    How to create this image using CSS?

    How to make this page less cluttered with css and html [closed]

    How to make a jquery slider from scratch

    CSS - how to place an error/hint message to the right of the input box

    How to set animation in css?

    How to change the css and html file at the same time

    Responsive portrait images, Hows & Dont's?