Questions tagged [enquire.js]

A lightweight, pure JavaScript library for responding to CSS media queries.

Enquire.js is a lightweight, pure JavaScript library for responding to CSS media queries.

  • Respond to media queries being matched (and even unmatched!)
  • Respond to browser events with aplomb
  • And if you want to get really fancy, run one-time setup routines

Use Cases:

  • Responsive Design
  • Mobile-first Design
70 questions
10
votes
2 answers

How to Switch Between two Jquery Based Layouts (when using desktop and mobile)

I want to create a responsive website. If the browser is mobile sized, the content should be displayed with an iPhone Style List View If the browser is desktop sized, the content should be displayed with tabs: What is the best way of doing this? I…
big_smile
  • 1,487
  • 4
  • 26
  • 59
8
votes
1 answer

enquire.js legacy support

I'm trying to figure out what the best way to get enquire.js to work on legacy browsers (ie 6-9). On enquire's site, it says to use modernizr to check for matchMedia support, then load a polyfill if it's not supported. Modernizr.load([ //first…
Dan
  • 363
  • 1
  • 5
  • 15
5
votes
2 answers

How to handle window object on nodejs for server-side rendering of reactjs application

I am trying to implement server-side rendering for my reactjs application. I am using webpack to build reactjs application, enhanced-resolve to handle importing of jsx files in nodejs. My application depends on third party libraries like…
kiran
  • 1,246
  • 1
  • 10
  • 16
5
votes
1 answer

Destroying a function when exiting a matched breakpoint with enquire.js

This is probably basic to most reading, but I can't seem to figure it out. I have a little test function that I want to execute if under a certain width. When the screen rotates or gets resized above that width, I want the function to cease to…
humanaut
  • 3,045
  • 2
  • 14
  • 12
4
votes
3 answers

Enquire.js + Media.match + Respond.js

I'm trying to get Enquire.js working for legacy browsers. I'm using the Deep support method from the docs: Modernizr.load([ { test: window.matchMedia, nope: "media.match.min.js" }, "enquire-2.0.0.min.js", …
Tim Gieseking
  • 161
  • 2
  • 10
3
votes
2 answers

Enquire.js does not match initially, only on resize

I'm doing media queries with Enquire.js and Vue.js. It all pretty much works when I resize the browser's window manually. However, I get no match on document load, an odd behavior that is most obvious when switching Chrome's toggle device mode on or…
nunop
  • 2,036
  • 2
  • 20
  • 36
3
votes
2 answers

Move element back to original position

I am using the enquire.js plugin to parse media queries stored as data-attributes which move the elements position in the DOM based on the browser width. So I have wrote the following which works fine when you manually specify the unmatch, the…
John Magnolia
  • 16,769
  • 36
  • 159
  • 270
3
votes
1 answer

better understanding of jquery with enquire.js

I'm currently trying to improve my overall understanding of jQuery and have a problem that I think will help me achieve that. I'm looking into enquire.js to enhance a responsive site. Here's the (simplified) html for a small section detailing the…
Mr Jonny Wood
  • 3,806
  • 5
  • 30
  • 42
2
votes
1 answer

Using Enquire.js with Vue.js to query about the browser's size

I'm using Enquire.js with Vue.js to query the browser's size and update two data properties accordingly. So, if I do this: ready: function() { // Listen for changes in the browser's size window.addEventListener("resize", …
nunop
  • 2,036
  • 2
  • 20
  • 36
2
votes
2 answers

Enquire.js not working on page load, only works when screen <= 480px

So I am using Enquire.js to add and remove bootstrap's pre-defined css classes for my website. Here is what I have: Some bootstrap HTML thumbnails:
user3574492
  • 6,225
  • 9
  • 52
  • 105
2
votes
2 answers

Enquire.js - unmatch event on load

See this fiddle. enquire.register("screen and (max-width: 640px)", { match: function () { $("body").css("background","red"); }, unmatch: function () { $("body").css("background","blue"); } }); when the browser window…
Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239
2
votes
1 answer

Difference between matchmedia and enquire js

First of all, I would like to highlight that I am quite a newbie in javascript programming and am trying to learn as much as I can from here. Reading the enquire js api, documentations as well as the sourcecode. I would like to know what is the…
Lionel Koh
  • 199
  • 1
  • 1
  • 13
2
votes
0 answers

Orientation change issue in iOS7 iPad with enquire.js

This is only occurring on iPad iOS7. Works perfectly on iOS6 When I open the page on Portrait, topProducts.produtSliderEnable(); and topProducts.tabletThreeItems(); functions had been called. But When I open the page on Landscape, then I change to…
Dimitri Kouvdis
  • 121
  • 1
  • 1
  • 9
2
votes
1 answer

Turning scripts off and on based on Media Queries?

I am using a widget in my layout and I have it now so when a certain breakpoint is hit it will not display that larger widget and then goes to the smaller one. The larger widget does hide and the smaller one shows up but the text that is associated…
2
votes
1 answer

Google map not showing when in a hidden div

I know this is a common issue reported on this site and elsewhere e.g. http://blog.codebusters.pl/en/entry/google-maps-in-hidden-div http://dougmolineux.com/wp/?p=242 But I can't get my issue solved. So I've got a responsive site built Mobile…
1
2 3 4 5