Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Отловить событие resize для одного значения (https://javascript.ru/forum/events/74643-otlovit-sobytie-resize-dlya-odnogo-znacheniya.html)

kvizor34 26.07.2018 13:00

Отловить событие resize для одного значения
 
Здравствуйте уважаемый форумчане!
Задача состоит в том чтобы выполнить некую функцию тогда и только тогда когда событие window.resize прошло порог в 1440px (туда или обратно). Логично было написать такую штуку:
$(window).resize(function () {
        if($(window).width()===1440){
            //my actions
        }
    })

Но, как оказалось, ресайз может оказаться весьма резким, и нужное мне значение просто будет пропущено.

З.Ы.
Я знаю что этот пост будут читать "особо умные" пользователи, которым непременно расскажи "всю суть задачи, и вообще я не понимаю зачем такое реализовывать", поэтому немного объясню.
Есть самописная карусель, которая в адаптивной версии сайта требует перезагрузки страницы, для того чтобы загрузиться ещё раз, с новыми значениями, и адекватно работать дальше. Точно так-же при переходе из "адаптивной" версии в "десктопную" нужна перезагрузка страницы. Порог "адаптива" состовляет как раз 1440px. И я хочу при его прохождении обновлять дом-узел с каруселькой.

Dilettante_Pro 26.07.2018 13:46

<div id="result"></div>
<div id="current"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var oldDelta = $(window).width() - 1440, oldSign = oldDelta / (Math.abs(oldDelta)|| 1), newDelta, newSign;
$(window).resize(function () {
        newDelta = $(window).width() - 1440, newSign = newDelta / (Math.abs(newDelta)||1);
        current.textContent = newDelta;
        if(oldSign != newSign){
            result.innerHTML += ((oldSign < 0)?"Bigger":"Less") + "<br>";
            oldSign = newSign;
        }
    })
</script>

SuperZen 26.07.2018 13:57

@mediaquery проще ) https://www.w3schools.com/css/tryit....eries_fontsize

тогда обе разметки должны быть на странице, просто при одном размере показываем одну, при другом другую. или смиксовать что-то среднее )

j0hnik 26.07.2018 14:05

Вы чего ребята ? есть событие для этого
window.matchMedia('(min-width: 1440px)').addListener(e=>console.log('отметка пройдена'));

kvizor34 26.07.2018 14:28

Цитата:

Сообщение от Dilettante_Pro (Сообщение 491062)
<div id="result"></div>
<div id="current"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var oldDelta = $(window).width() - 1440, oldSign = oldDelta / (Math.abs(oldDelta)|| 1), newDelta, newSign;
$(window).resize(function () {
        newDelta = $(window).width() - 1440, newSign = newDelta / (Math.abs(newDelta)||1);
        current.textContent = newDelta;
        if(oldSign != newSign){
            result.innerHTML += ((oldSign < 0)?"Bigger":"Less") + "<br>";
            oldSign = newSign;
        }
    })
</script>

Сложный вариант, но попробую если остальные не подойдут, спасибо.

Цитата:

Сообщение от SuperZen (Сообщение 491067)
@mediaquery проще ) https://www.w3schools.com/css/tryit....eries_fontsize

тогда обе разметки должны быть на странице, просто при одном размере показываем одну, при другом другую. или смиксовать что-то среднее )

Два одинаковых слайдера на странице, как вариант, но я не буду так засирать DOM.

Цитата:

Сообщение от j0hnik (Сообщение 491069)
Вы чего ребята ? есть событие для этого
window.matchMedia('(min-width: 1440px)').addListener(e=>console.log('отметка пройдена'));

Вот это варик) сейчас испробую, спасибо.

j0hnik 26.07.2018 14:31

только вот так укажите
max-width: 1440px

SuperZen 26.07.2018 14:49

Цитата:

Сообщение от kvizor34 (Сообщение 491075)
Сложный вариант, но попробую если остальные не подойдут, спасибо.


Два одинаковых слайдера на странице, как вариант, но я не буду так засирать DOM.


Вот это варик) сейчас испробую, спасибо.

а делать перезагрузку страницы, это выход...)

можно одни и те же блоки использовать...

kvizor34 26.07.2018 14:53

Цитата:

Сообщение от j0hnik (Сообщение 491076)
только вот так укажите
max-width: 1440px

Спасибо Джоник!) ты меня уже 4й раз выручаешь))
Вопрос решён. Тема закрыта.


Часовой пояс GMT +3, время: 22:24.