Блог

У меня есть div, который я пытаюсь изменить с помощью jQuery в зависимости от размера окна. Мой код для изменения размера с изменением размера окна отлично работает, но по какой-то причине он не работает при загрузке. Я написал исходный код несколько недель назад, так что он не совсем свеж в моей памяти, но я исправил проблему. По какой-то причине он сейчас не работает. Я изменил несколько вещей, но ничего общего с самим сценарием. Не уверен, почему он сейчас не работает. Решение, которое я придумал раньше, показалось мне немного избыточным, поскольку это были функции для изменения размера элемента, а затем функции для изменения размера элементов при изменении размера страницы. Я довольно новичок в этом, так что, вероятно, это что-то очень фундаментальное, но я не могу в этом разобраться. Я попытался поместить первую часть в функцию $(window).load(), но все, что я сделал, это заставил часть изменения размера при изменении размера окна не работать.

Во всяком случае, вот код:

 var width = $(window).width();
function resizeBig() {
    $("#topbarMainBlockContainer").css("width", "calc(100% - 420px)");
}
function resizeSmall() {
    $("#topbarMainBlockContainer").css("width", "100%");
}
if (width < 700) {
    resizeSmall();
} else {
resizeBig();
}
$(window).resize(function () {
    width = $(window).width();
    if (width < 700) {
        resizeSmall();
    } else {
        resizeBig();
    }
});
  

Спасибо!

Вы пробовали вложить свой код в готовый документ?

 $( document ).ready(function() {
// code goes here
});
  

Или загрузите свой скрипт перед тегом закрытия тела.

Причина в том, что интерпретатор может не найти элемент с идентификатором #topbarMainBlockContainer при выполнении кода, поскольку страница все еще загружена не полностью.