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

Question

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

0

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

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

console.log(isSmallScreen);

Когда я изменяю размер окна, я не получаю isSmallScreen.

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

if (isSmallScreen) {
// hide element
}

Newcoma 20 сен. 2013, в 14:49

Источник

Теги:

jquery

4 ответа

0

Только небольшое изменение от других предложений здесь. Вы можете переместить 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();

Archer 20 сен. 2013, в 10:22

0

Но я все еще должен поместить весь меньший специфичный для экрана код в этот блок. Я искал что-то, что я мог уволить, когда захочу
Newcoma 20 сен. 2013, в 12:28
0

Это достаточно просто. Я сделал еще одну функцию, которая вызывается, когда окно изменяет размер и становится «слишком маленькой», но вы также можете вызывать ее, когда захотите :)
Archer 20 сен. 2013, в 12:54

0

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

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

Rahul jain 20 сен. 2013, в 09:49

0

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

как это

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

Vinay Pratap Singh 20 сен. 2013, в 09:11

Ещё вопросы

Но я все еще должен поместить весь меньший специфичный для экрана код в этот блок. Я искал что-то, что я мог уволить, когда захочу
Это достаточно просто. Я сделал еще одну функцию, которая вызывается, когда окно изменяет размер и становится «слишком маленькой», но вы также можете вызывать ее, когда захотите :)

Arun P Johny · Accepted Answer · 2013-09-20T10-47-00.000Z

когда возникает событие изменения размера, выполняется только 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')
        }
    });
})

Демо: скрипка