Learn12 Learn12 - 1 year ago 128
CSS Question

How to persist checking the screen width in Javascript

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');




Answer Source

You could try any of the following,


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


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

or A CSS option would be to use media queries.

Reading Material


jQuery's resize

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download