Div без изменения размера на странице load/refresh

Question

У меня есть 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(); 
    } 
}); 

Спасибо!

Answer 1

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

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

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

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