Проблемы с позиционированием на основе ширины браузера

Question

У меня есть фиксированное положение div, которое я хочу иметь в положении слева: 0, когда окно браузера меньше 1200 пикселей, но не имеет левого позиционирования, когда оно больше 1200 пикселей. Я использую этот код

var $window = $(window); 
function checkWidth() { 
    var windowsize = $window.width(); 
    document.write(windowsize); 
    if (windowsize < 1200) { 
     document.getElementById("DBCIbox").style.left = "0"; 
    } else {50 
     document.getElementById("DBCIbox").style.left = "500px"; 
    } 
} 
checkWidth(); 
$(window).resize(checkWidth); 

но он, кажется, ничего не делает. Я устанавливаю left = 500px как просто тест для работы javascript, тогда я буду беспокоиться о том, где я хочу его разместить.

Я сделал некоторые googleing, и из того, что я могу сказать, это должно работать, что мне не хватает?

Если это способ очистить левое позиционирование, я бы тоже хотел это знать.

Answer 1

var $window = $(window); 

Эта линия кэширует этот экземпляр окна. Вам необходимо повторно оценить $(window) каждый раз вы называете этот код, чтобы получить обновленные значения ширины и высоты

Обновленный код ниже

function checkWidth() { 
    var $window = $(window); 
    var windowsize = $window.width(); 
    document.write(windowsize); 
    if (windowsize < 1200) { 
     document.getElementById("DBCIbox").style.left = "0"; 
    } else {50 
     document.getElementById("DBCIbox").style.left = "500px"; 
    } 
} 

checkWidth(); 

$(window).resize(checkWidth); 

Answer 2

@Jnatalzia имел это право, мне нужно было сделать несколько настроек и комментарии не позволил бы мне опубликовать код, но кредит для @Jnatalzia для ответа.

function checkWidth() { 
     var $window = $(window); 
     var windowsize = $window.width(); 
     var position;  
     if (windowsize < 1390) { 
      document.getElementById("DBCIbox").style.marginLeft = 0 + "px"; 
     } else if (windowsize >= 1390) { 
      position = windowsize - 1060; 
     position = position/2; 
     position = position - 175; 
      document.getElementById("DBCIbox").style.marginLeft = position + "px"; 
     } 
    } 

    $("document").ready(function(){ 

     $(window).load(function(){ 
      checkWidth(); 
     }); 

     $(window).resize(function(){ 
      checkWidth(); 
     }); 

    });