JS – window.matchMedia – @media query?

16. 7. 2020 02:23:31

Ahoj,

potřeboval bych radu. Neumím JS, ale potřeboval jsem script, který mi zkontroluje height různých elementů a nastaví všem height toho nejvyššího elementu.

Našel jsem (a funguje v pohodě)

https://brm.io/jquery-match-height/

https://jsfiddle.net/1d6eohp3/

https://cdn.rawgit.com/liabru/jquery-match-height/master/dist/jquery.matchHeight-min.js

Ale potřebuji, aby script fungoval pouze pro 992px (včetně) a vyšší window sizes. S CSS a @media query nemám problém, ale netuším jak se to používá ve scriptech. Našel jsem, že to lze řešit pomocí window.matchMedia, ale nevím jak a kam to přesně zapsat do toho scriptu.

Dokázal by někdo poradit?

16. 7. 2020 02:23:31

https://webtrh.cz/diskuse/js-window-matchmedia-media-query/#reply1457569

Pavel Mareš

(19 hodnocení)

16. 7. 2020 06:21:50

No já mám tohle řešení (vykopírováno z jiného projektu) - https://jsfiddle.net/pamare/dgxfq9sy/2/.

16. 7. 2020 06:21:50

https://webtrh.cz/diskuse/js-window-matchmedia-media-query/#reply1457568

Miroslav Foltyn

(3 hodnocení)

16. 7. 2020 09:09:18

Tady je jednoduchý přiklad (prakticky to samé co lze najít v dokumentaci na MDN):

JS Bin - Collaborative JavaScript Debugging

Můžete si registrovat vlastní callback pro změnu stavu media query a dál si pořešit co potřebujete. Nejspíše budete chtít v případě, že se query matchne, provést jednu operaci, a v případě že se nematchne, vzít předchozí operaci zpátky / reverzovat její následky?

16. 7. 2020 09:09:18

https://webtrh.cz/diskuse/js-window-matchmedia-media-query/#reply1457567

Pavel Mareš

(19 hodnocení)

16. 7. 2020 10:31:52

No tady je ale otázka přetékání. Jasně, má to být nad 992, čili počítám, že tam prvky budou vedle sebe a tím pádem dostatečně místa. Ale zase, pak se něco změní, přepíše a při změně velikosti okna a kontejneru nad 992px to pak přeteče a musíš měnit podmínky.

Což u toho mého se hlídá a tohle se nestane. A u rozšiřování / zmenšování okna se nepočítá, že se ten script bude načítat často, čili i z pohledu výkonu je to ok.

16. 7. 2020 10:31:52

https://webtrh.cz/diskuse/js-window-matchmedia-media-query/#reply1457566

Miroslav Foltyn

(3 hodnocení)

16. 7. 2020 10:46:13

Nechápu co se snažíte říct, můj přiklad jenom ukazoval použití matchMedia - předpokládám že si tam streetcz doiplementuje nějakou knihovnu. Nic víc - porovnávat to s příklad vaším, který řeší detekci změny okna přes naslouchání na resize event (kde bych navíc doporučil debouncnout event handler), a potom si nějak pořeší výšky nějakých elementů (což jsem nějak hluboce neluštil, kvůli divnému formátování), je jak porovnávat jablka a hrušky.

16. 7. 2020 10:46:13

https://webtrh.cz/diskuse/js-window-matchmedia-media-query/#reply1457565

Tomáš Marek

(23 hodnocení)

16. 7. 2020 11:14:02

Napsal Doctore97;1590628
No já mám tohle řešení (vykopírováno z jiného projektu) - https://jsfiddle.net/pamare/dgxfq9sy/2/.

Díky Ti moc Doctore, funguje to přesně jak jsem chtěl. Možná jsem to popsal špatně, ale potřeboval jsem 992px (včetně) a vyšší window sizes, takže jsem musel jen změnit na

a dát tam 991, protože i když tam je rovná se, tak mi to nebralo těch 992px. Nevím proč, ale jak říkám nevyznám se v té logice.

---------- Příspěvek doplněn 16.07.2020 v 11:16 ----------

Napsal Miroslav Foltýn;1590646
Tady je jednoduchý přiklad (prakticky to samé co lze najít v dokumentaci na MDN):

JS Bin - Collaborative JavaScript Debugging

Můžete si registrovat vlastní callback pro změnu stavu media query a dál si pořešit co potřebujete. Nejspíše budete chtít v případě, že se query matchne, provést jednu operaci, a v případě že se nematchne, vzít předchozí operaci zpátky / reverzovat její následky?

Určitě bude taky fungovat, už jsem viděl ten zápias s ('(min-width: 992px)'), ale potřeboval jsem copy n paste solution, protože se v tom nevyznám a nevím jestli bych to dokázal implementovat.

16. 7. 2020 11:14:02

https://webtrh.cz/diskuse/js-window-matchmedia-media-query/#reply1457564

Pavel Mareš

(19 hodnocení)

16. 7. 2020 15:35:36

Napsal Miroslav Foltýn;1590658
Nechápu co se snažíte říct, můj přiklad jenom ukazoval použití matchMedia - předpokládám že si tam streetcz doiplementuje nějakou knihovnu. Nic víc - porovnávat to s příklad vaším, který řeší detekci změny okna přes naslouchání na resize event (kde bych navíc doporučil debouncnout event handler), a potom si nějak pořeší výšky nějakých elementů (což jsem nějak hluboce neluštil, kvůli divnému formátování), je jak porovnávat jablka a hrušky.

Nemyslel jsem to jako porovnání, ale jako poznámku pro to, co @streetcz potřeboval (dle mého) ... kompletní řešení s resize atd (jak píše sám).