Ответственный jquery не работает правильно

Question

Я работаю над новым отзывчивым веб-сайтом, html и css выполняется, но JavaScript/Jquery нет. Проблема в том, что чувствительная часть jquery работает некорректно.

$(document).ready(function() { 
if ($(window).width > 1023) { 
    $('#wrapper').hide(); 
} 
else { 
    $('#wrapper').show(); 
    $('#footer').hide(); 
} 
}); 

Проблема заключается в том, что в каком-то смысле JQuery не определяет ширину, а JavaScript включен и Jquery и Jquery UI включены.

Answer 1

Вы должны использовать resize событие

Пример

//Use resize event 
$(window).resize(function() { 
    if ($(window).width() > 1023) { //Type width() is a function 
     $('#wrapper').hide(); 
    } 
    else { 
     $('#wrapper').show(); 
     $('#footer').hide(); 
    } 
}); 

$(document).ready(function() { 
    $(window).resize(); //Trigger resize event on page load 
}); 

Answer 2

Использовать медиа-запрос, чем javacript, очень просто и полезно.

$(document).ready(function() { 
if (window.innerWidth > 1023) { 
    $('#wrapper').hide(); 
} else { 
    $('#wrapper').show(); 
    $('#footer').hide(); 
} 
}); 

Answer 3

width не является свойством, это функция, которая возвращает число. Вы должны использовать его как это:

$(document).ready(function() { 

    if ($(window).width() > 1023) { 
     $('#wrapper').hide(); 
    } 
    else { 
     $('#wrapper').show(); 
     $('#footer').hide(); 
    } 

});