Use matchmedia for questions related to programmatic discovery of API support for various media features in the runtime environment of a web browser.
References
Questions tagged [matchmedia]
91 questions
0
votes
2 answers
With Chai Test: Adding react-slick throws error - matchMedia not present
After adding the react-slick slider to my webpack project, my chai test began to fail with
C:\project\proj\js\node_modules\enquire.js\dist\enquire.js:226
throw new Error('matchMedia not present, legacy browsers require a polyfill');
…
Stephen Isienyi
- 1,292
- 3
- 17
- 29
0
votes
1 answer
Add password to PDF's automatically
I'm currently using this code to just get an alert in the print dialog box
(function() {
var beforePrint = function() {
alert('Functionality to run before printing.');
};
var afterPrint = function() {
…
wobsoriano
- 12,348
- 24
- 92
- 162
0
votes
1 answer
Is there any reason window.matchMedia('screen') would return false in a web browser?
I am running the following code:
var hasMatchMediaSupport = (typeof window.matchMedia !== 'undefined') ? !!window.matchMedia('screen').matches : false;
Is there any reason why this check would return false? This is occurring in Firefox browsers…
Grzegorz Miąskiewicz
- 33
- 4
0
votes
0 answers
JavaScript: window.matchMedia() Mobile Browser Support
As far as I can tell, with the help of caniuse, window.matchMedia is supported on most popular browsers, with the exception of IE<10 (which are, admittedly not wildly popular these days).
Would any one know whether non-supporting browsers, such as…
Manngo
- 14,066
- 10
- 88
- 110
0
votes
0 answers
Remove dynamically registered events at a later point
I have this code that registers an event to an array of breakpoints:
var breaks = ["(min-width: 800px)","(min-width: 300px)"];
var breakChange = function(mq) {
console.log(mq);
}
for ( i = 0; i < breaks.length; i++ ) {
var mq =…
klinore
- 2,589
- 4
- 19
- 21
0
votes
1 answer
Is there a smarter way to rearrange page elements than using matchMedia for this example?
I have created the following page layout, but it relies heavily on javascript. I've tried thinking of other ways to accomplish this more simply, but cannot come up with any.
Just wondering if anyone has any bright ideas to achieve this layout…
Lance
- 153
- 1
- 1
- 6
0
votes
0 answers
Chrome matchMedia listener firing twice on resize
I have the below function in my code, I'd like to fire off a function when the device window/viewport is less than 768px wide. This function fires on page load (hence the query outside the listener), during testing in Chrome, I find that the…
Stefano
- 586
- 1
- 4
- 11
0
votes
0 answers
Matchmedia partially working?
I've managed to get my matchmedia query partially working ie it works on window load but can't get to work on resize. Im really new to this (hence the crappy question) so take it easy and speak slow. I'm trying to make it fire when ever the screen…
awwhocares
- 3
- 1
0
votes
2 answers
Angular: Orientation change not working properly
I'm working on an angular-app and am trying to implement orientation change with matchmedia. When I first load my page I run a line of code in my controller to check wheter if i'm in landscape or not:
$scope.landscape =…
Maarten Meeusen
- 482
- 1
- 9
- 23
0
votes
1 answer
Adaptive ("image ID + text string") JavaScript for Responsive Images
I've been using the following code for my responsive image replacements:
//HTML:
//JavaScript:
var screencheck = window.matchMedia("(min-width: 32em)");
function…
//JavaScript:
var screencheck = window.matchMedia("(min-width: 32em)");
function…
Lee Saxon
- 457
- 3
- 14
0
votes
1 answer
Stop jQuery function using screen width
I am struggling with the following: I want to change the behaviour of my header, depending on the Screen width. It works just fine when going from small to big resolution. But the other way round the "ganzOben" and "inMitte" functions don't stop.…
turboLoop
- 601
- 1
- 4
- 16
0
votes
1 answer
Modernizr mq does not behave like matchMedia
given this code:
mql = window.matchMedia("(max-width: 800px)");
mql.addListener(mqlHandler);
function mqlHandler(mql) {
if(mql.matches) {
alert('OK');
};
and this other code:
if(Modernizr.mq("(max-width: 800px)")) {
alert('OK');
};
the…
angvillar
- 1,074
- 3
- 10
- 25
0
votes
1 answer
Calling matchMedia with empty media query fails with invalid argument in IE
Here's the snippet that fails with "invalid argument" in IE10. Works for Chrome, FF but fails for IE. I am just debugging a js issue and came across this. I dont have any prior knowledge about matchMedia or nor i am a CSS expert. Please excuse my…
airboss
- 1,767
- 3
- 16
- 21
0
votes
1 answer
Polyfill for enquire.js in wordpress
I'm trying to use Enquire.js in my Wordpress install. I'm trying just to push the left column under the central column for small screens.
I got it to work in most browser my the laptop, but it does not work on older Androids browser (2.2), saying it…
RomSocial
- 11
- 4
-1
votes
2 answers
How to detect browser viewport size change using JavaScript's matchMedia method?
How can I detect a change in viewport?
The scripts:
let vwChange = window.matchMedia("(min-width: 360px ) and (max-width: 765px )");
document.addEventListener("scroll", function(vwChange) {
const headerChangek =…
Kiki-ko
- 1
- 5