Получить размер элемента в окне изменения размера

Question

У меня есть следующий код

var isSmallScreen = $(".container-inner").width() <= 570; 
$(window).resize(function() { 
isSmallScreen = $(".container-inner").width() <= 570; 
}); 

console.log(isSmallScreen); 

При изменении размера окна я не получаю isSmallScreen.

Я не уверен, что это я sthe способ сделать это, но я хочу, чтобы иметь возможность делать вещи с

if (isSmallScreen) { 
// hide element 
} 

Answer 1

, когда происходит только выполнил resize обрабатывать событие изменения размера, оператор консоли после этого не выполняется, весь код, который имеет дело с параметрами изменения размера должен быть добавлен в функции обратного вызова

Update:
Если вы хотите сделать что-то на основе события изменения размера решение заключается в использовании пользовательских событий

jQuery(function($){ 
    var flag; 
    $(window).resize(function() { 
     var width = $(window).width(); 
     if(width <= 570){ 
      if(flag === true || flag == undefined){ 
       $(window).trigger('smallview', { 
        width: width 
       }); 
       flag = false; 
      } 
     } else { 
      if(flag == false || flag == undefined){ 
       $(window).trigger('normalview', { 
        width: width 
       }); 
       flag = true; 
      } 
     } 
    }).resize(); 
}) 

затем

jQuery(function ($) { 
    $(window).on('smallview normalview', function (e) { 
     if (e.type == 'smallview') { 
      console.log('smallview', 'do something') 
     } else { 
      console.log('normalview', 'do something') 
     } 
    }); 
}) 

Демо: Fiddle

Answer 2

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

function isSmallScreen() { 
    return $(".container-inner").width() <= 570; 
} 

function smallScreen() { 
    // do stuff here because the screen is small 
} 

$(window).resize(function() { 
    if (isSmallScreen()) { 
     console.log("isSmallScreen"); 
     smallScreen(); 
    } 
}).resize(); 

Answer 3

вы можете использовать window.resize()

как этот

$(window).resize(function() { 
var isScreenSmaller; 
if($(".container-inner").width() <= 570){ 
    isScreenSmaller = true; 
} 
else 
{ 
isScreenSmaller = false; 
} 
alert(isScreenSmaller); 
}).resize(); 

Answer 4

вы должны использовать этот код я я довольно уверен, что Demo here

$(window).resize(function() { 
var isSmallScreen = $(".container-inner").css("width") <= 570; 
console.log(isSmallScreen); 
})