У меня есть следующий код
var isSmallScreen = $(".container-inner").width() <= 570;
$(window).resize(function() {
isSmallScreen = $(".container-inner").width() <= 570;
});
console.log(isSmallScreen);
Когда я изменяю размер окна, я не получаю isSmallScreen.
Я не уверен, что это способ сделать это, но я хочу, чтобы иметь возможность делать вещи с
if (isSmallScreen) {
// hide element
}
когда возникает событие изменения размера, выполняется только resize
, после этого консольный оператор не выполняется, весь код, который имеет дело с параметрами изменения размера, должен быть добавлен в обратном вызове
Обновить:
Если вы хотите что-то сделать на основе события изменения размера, решение должно использовать пользовательские события
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')
}
});
})
Демо: скрипка
Только небольшое изменение от других предложений здесь. Вы можете переместить 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();
вы должны использовать этот код, я очень уверен в этом. Демо здесь
$(window).resize(function() {
var isSmallScreen = $(".container-inner").css("width") <= 570;
console.log(isSmallScreen);
})
вы можете использовать window.resize()
как это
$(window).resize(function() {
var isScreenSmaller;
if($(".container-inner").width() <= 570){
isScreenSmaller = true;
}
else
{
isScreenSmaller = false;
}
alert(isScreenSmaller);
}).resize();