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 do I overlay text on an image who's size is to be set?

    How to change nested divs within a named div to display as display:inline using CSS or jQuery selectors?

    CSS: How to shadow a field like this? [closed]

    How to include several nested CSS classes into rails .erb file?

    HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?

    How to style the arrow that opens submenus in jQuery mmenu?

    How to display .toggle or .Animate to all connected browser sessions using Meteor

    How to override all of the CSS for a specific element?

    How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

    How to select the specific position element in the certain class in CSS

    How to make CSS zig-zag borders? [duplicate]

    How can I fill with the color and make it square using CSS?

    how to make background full-size [closed]

    How can I expand this picture to cover the width of my page?

    How can I get css pseudo element :checked to work in IE7 + IE8?

    How to make this grey kind of background with css?

    How can I create left & right side fixed width elements with a center that fills the remainder?

    Use ::after selector to show line number but also display a element next to it when hovering over the containing table td cell

    How to convert bullet points into horizontal list?

    how to position an element right below an “absolute” div?

    Bootstrap with custom css how to align text vertically?

    how to use CSS opacity to let background bleed through in IE8?

    How can I change the CSS values of multiple elements when my sticky menu becomes fixed?

    How to get Floating DIVs inside fixed-width DIV to continue horizontally?

    How work with degree or start and stop in linear-gradient CSS3

    How to draw diagonal lines with css [duplicate]

    How do I align text to the middle of an element with CSS in Twitter Bootstrap?

    How to activate jQuery function with img instead of button?

    How to automatically resize the wrapper div using CSS

    How to Have the Div Aligned to the Middle, and That Relative to the Parent Div?