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
0
votes
0 answers

how can i fire onload on the following matchMedia

JavaScript code function checkScreen(){ const checkMobile = window.matchMedia('screen and (max-width: 575px)'); const checkTablet = window.matchMedia('screen and (min-width: 576px) and (max-width: 991px)'); const checkDesktop =…
Kiki-ko
  • 1
  • 5
0
votes
1 answer

Disabling jQuery hover effect for menu below 1025px using matchMedia

I run a WordPress site with a custom header. Therefore, I decided to rely on jQuery. I have a menu (#sitenavigation) that appears when I hover over a container it's in (#menuhover). I only want this to work in viewports that are 1025px and wider…
chalcopterus
  • 5
  • 3
0
votes
0 answers

RemoveEventListener doesn't work with MatchMedia

I want to add horizontal scrolling to a page on larger screens. On smaller screens it should be regular, vertical scrolling. Like this website: https://www.studiorhe.com/ function horizontalScroll(elem) { let scrolly = (e) => { …
Erika
  • 231
  • 1
  • 5
  • 13
0
votes
0 answers

jQuery window.matchMedia() and .replaceWith() not working. Is my syntax wrong?

I'm trying to replace gray box PNG with red box SVG, whose width should vary depending on the screen width. This is the working code using .replaceWith() before implementing window.matchMedia() $(document).ready(function(){ …
Alan
  • 93
  • 7
0
votes
0 answers

matchMedia('print') fires twice with true and false

When I add matchMedia listener: matchMedia('print').onchange = (m) => { console.log('print matches', m.matches)} And I open print dialog, I always see two logs: print matches true print matches false After firing callback with value true, there is…
Tomasz
  • 171
  • 9
0
votes
1 answer

Remove class (if present) when screen width is greater than 1024px

On mobile I have 2 panels/draws that are the width of the viewport (side by side). There is a link to toggle which one is in view and when clicked, this slides the panels left/right. However on desktop, this isn't needed as they are both in view. So…
user1406440
  • 1,329
  • 2
  • 24
  • 59
0
votes
0 answers

(window.matchMedia().matches) runs code multiple times on resize

I am using if (window.matchMedia().matches to swap some background images on an element depending on the screen resolution. When l resize the page the new (window.matchMedia().matches runs the code within the matchMedia but also continues to run the…
overcaffeinated
  • 53
  • 5
0
votes
0 answers

Vue 3 global breakpoints

I create a composable function to detect current screen resolution (this function works). If I use this function in a few components, addEventListener add a new handler to the same mediaQuery. How can I manage that mediaQuery already has a…
Daniil Felenyuk
  • 43
  • 5
0
votes
0 answers

ScrollTrigger match media

I have the following match media code, and for some reason, it's being stricken off in JS. Why is it so? enter image description here
Harshavardhan
  • 1
0
votes
1 answer

Update variable inside gsap matchMedia on every resize

I have a basic gsap animation set up with matchMedia. ScrollTrigger.matchMedia({ "(min-width: 700px)": function () { let containerWidth = parseInt(getComputedStyle(document.querySelector(".see-through")).width); let tl =…
Praneet Dixit
  • 1,393
  • 9
  • 25
0
votes
1 answer

Next js window.matchMedia prefers-color-scheme window is not defined

I am using reactjs with nextjs, i am having the following problem. When the page is loaded I have to set a variable which should tell me if user is using dark mode or not. I did the following, but I'm not sure if it's correct. I had to set a value,…
Paul
  • 3,644
  • 9
  • 47
  • 113
0
votes
1 answer

window.matchMedia not works in iframe

I'm detecting device orientation using window.matchMedia. The following code works as intended - every orientation change is logged to console with correct value:
sgnsajgon
  • 664
  • 2
  • 13
  • 56
0
votes
1 answer

Is it possible to pass an argument to a variable initialized using let?

Below is the code snippet used in one of the tutorials I am learning from now. Can someone please help to understand how an argument 'mediastate' can be passed to a variable 'transientListen' in the 'notify' function? function…
esentai
  • 69
  • 1
  • 10
0
votes
1 answer

matchMedia doesnt work unless window is resized

I'm trying to use the window.matchMedia event listener to detect if the user is on a touch device or not. But im just seems to be only activate when the chrome DevTools window is resized, and not actually detect if it is a touch device (for example,…
SpikeThea
  • 340
  • 1
  • 3
  • 13
0
votes
0 answers

toggle event listener not working on javascript matchmedia (within a Class)

Im trying to toggle a click event listener using matchmedia. My goal is to add the eventlistener when the screen size is less than or equal 768px and removeEventListener above 768px. The event listener is removed and added when I write them as…
Nish
  • 81
  • 6
1 2 3
4
5 6 7