How to run a piece of JS code at a specific screen resolution?

Question

How to perform the initialization of the plugin (JS, jQuery code), with a screen larger than 768px?

This is how the problem was solved, but this only works if you move the screen with the browser, but I need it to act immediately, and not resize the screen (try to explain it to the user =)

window.onresize = function () { if (window.innerHeight >= 768) { // Инициализация var $container = $('#container'); $container.masonry({ columnWidth: 232.5, itemSelector: '.item' }); } };

br3t 3,659 3 eleven 24 · Accepted Answer · 2017-02-16T09:07:20

It is necessary to call the function immediately + hang up its execution on the resize event.

 (checkAndRepaint)(); window.onresize = checkAndRepaint; function checkAndRepaint() { var $container = $('#container'); if (window.innerHeight >= 768) { // Инициализация $container.masonry({ columnWidth: 232.5, itemSelector: '.item' }); } else { // Удаление $container.masonry('destroy'); } };

Kostiantyn Okhotnyk Kostiantyn Okhotnyk 4,928 one 13 38 · Answer 2 · 2017-02-16T09:05:45

Use the standard jquery height function.

 if ($(window).height() >= 768) { // Инициализация var $container = $('#container'); $container.masonry({ columnWidth: 232.5, itemSelector: '.item' }); }

Vadizar vadizar 4,612 2 nineteen 54 · Answer 3 · 2017-02-16T09:06:07

 window.onload = function () { if (window.innerHeight >= 768) { // Инициализация var $container = $('#container'); $container.masonry({ columnWidth: 232.5, itemSelector: '.item' }); } };

vp_arth 18.6k 2 28 58 · Answer 4 · 2017-02-16T10:39:14

 function functionName() { if (window.innerHeight >= 768) { // Инициализация var $container = $('#container'); $container.masonry({ columnWidth: 232.5, itemSelector: '.item' }); } }; window.onload = functionName; // выполнится при загрузке window.onresize = functionName; // выполнится при ресайзе

The function thus assigned will be executed twice when the page is loaded, and will not be executed upon resize.
As if 、 window.onload 、 is responsible for running when loading the station ... one of the options, but it works for me.

How to run a piece of JS code at a specific screen resolution?

4 answers 4

More articles: