Stack Overflow
Stack Overflow

Questions tagged [matchmedia]

Use matchmedia for questions related to programmatic discovery of API support for various media features in the runtime environment of a web browser.

References

91 questions
89
votes
3 answers

matchMedia().addListener marked as deprecated, addEventListener equivalent?

I'm making use of matchMedia().addListener to detect dark/light mode theme preference changes in Safari, however in WebStorm using addListener is marked as deprecated but simply says to refer to documentation for what should replace it. I've had a…
Matt Cowley
  • 2,164
  • 2
  • 18
  • 29
16
votes
1 answer

Safari window.matchMedia handler not called

I need to execute doSomethingFunc, when afterPrint happens. My code is working fine on all browsers, except the current Safari-Versions (Safari 10.1 on OSX and the Safari Browser from iOS 10.3). It seems that the event listeners (at least for print)…
m4lt3
  • 465
  • 2
  • 15
12
votes
4 answers

Safari ignores window.matchMedia

I'm using window.matchMedia conditional in order to avoid the inject of a video in mobile devices. CanIUse reports that matchMedia is going to work smoothly since Safari 9 (I'm testing on it), but my code is completely ignored: if (…
Marco
  • 712
  • 1
  • 10
  • 23
7
votes
1 answer

How to combine max-width, min-width in matchMedia query?

I am working with the matchMedia API to determine viewports within javascript, so I can minimize the amount of dom manipulation taking place. Instead of using display: none everywhere I determine if elements are inserted into the DOM or not with a…
Stephan-v
  • 19,255
  • 31
  • 115
  • 201
6
votes
4 answers

Window.matchmedia listener firing twice

I'm trying to write some javascript which will change some values held within a JS config object at certain browser breakpoints. I have stored the window.matchmedia tests within the config object and then I'm looping over this object's keys to add…
James Howell
  • 1,392
  • 5
  • 24
  • 42
5
votes
2 answers

window.matchMedia('print') failing in Firefox and IE

I have a print button that launches the print functionality on any webpage. The button hides as soon as the user clicks on it and shows if the user is done printing or presses close in the print window. It works fine in Chrome but is failing in…
clever_bassi
  • 2,392
  • 2
  • 24
  • 43
5
votes
4 answers

Remove/add css classes on breakpoint with matchmedia.js

I have following code which works fine when the screen size is 770px and below (as determined by breakpoints): var handleMatchMedia = function (mediaQuery) { if (mediaQuery.matches) { $j(".view-all a").removeClass("button"); …
user642523
  • 151
  • 4
  • 16
4
votes
1 answer

Using matchMedia in a useEffect hook is causing infinite renders

I am using window.matchMedia to detect the screen size. I want reload the page when it goes to a small screen. However, my code is causing infinite renders. How can I fix this? export default function App(props) { const small =…
Tauhidurnirob
  • 39
  • 1
  • 4
4
votes
2 answers

How does addListener work with matchmedia API?

What would matchMedia("(min-width: 500px)").addListener(foo); do? That is what does addListener() function do here? Does it execute the function foo() when the viewport width changes?
user31782
  • 7,087
  • 14
  • 68
  • 143
4
votes
2 answers

Switch between Superfish and FlexNav depending on window width

I am trying to use 2 jQuery navigation scripts on one page (Superfish for desktops and FlexNav for mobile). I am currently using matchMedia along with the polyfill by Paul Irish to respond to CSS3 media query state changes within JavaScript. The…
MichaelCorey
  • 41
  • 3
3
votes
2 answers

Fake a window resize, to make all resize-only JavaScript load

Let’s say I had JavaScript that runs when the window is resized, but if you use window.load or document.ready it doesn’t work. (My situation). I’m not looking for window.load or document.ready (jQuery) alone... I’m looking to literally fake a window…
oatmealNUGGY
  • 775
  • 1
  • 6
  • 22
3
votes
1 answer

Javascript: removeChild at certain screen size

I'm trying for hours now to add a wrapper around two divs (aside and .related) at a certain screensize (>60em and <90em). I'm doing this with matchMedia and an eventListener. The wrapper seems to be added at the right spot, but the problem is that…
Vanilla__
  • 63
  • 6
3
votes
1 answer

jQuery append function and resizing

I am attempting my first "progressive enhancement" site and have a question about jQuery append and browser resizing. Basically, I have it set up so that the default site that is loaded is the mobile version and then I have a jQuery function to…
APAD1
  • 13,509
  • 8
  • 43
  • 72
3
votes
1 answer

window.matchMedia not changing even if media queries are present

There's a CSS file with these rules: @media screen and (orientation:portrait) { .foo {} } @media screen and (orientation:landscape) { .foo {} } And then I've got this script, running on orientationchange: function checkOr(){ if…
naorunaoru
  • 31
  • 1
  • 3
2
votes
1 answer

Update `offsetWidth` value on browser resize

I have a horizontal scrolling div with several child items. Depending on the width, child items can get cropped. So you might get 4 and a 1/2 visible items. So I've used Javascript to force a width to evenly distribute the child items. I've used…
user1406440
  • 1,329
  • 2
  • 24
  • 59
1
2 3 4 5 6 7