What's the most reliable way to integrate javascript with media queries? - javascript

I am building a responsive web site using Twitter Bootstrap. I can display/hide/modify/rearrange content using media queries and different CSS for each breakpoint. That works fine. But what about triggering different javascript for each breakpoint? What's the most reliable way to do this?
In this particular case I am using the masonry plugin. I want masonry to layout the items on small, medium or large devices, however on extra small devices I don't want it to. (My own native list layout will be fine).
It seems like the most modern way to do this uses the window.matchMedia() method. This also lets me add a listener so that I can add/remove masonry if the window size changes. The downside is that, according to Mozilla Developer Network, support for matchMedia is not great. I could use a polyfill to get around this, but it sounds a bit complex.
Another way to do it would be to test document.documentElement.clientWidth (or .screenWidth), and synchronize my javascript logic with the breakpoints for the media queries. I would use the window.onresize event to load/unload/re-layout as required.
A third way to do it might be to run some javascript on the resize event, testing the value of an attribute which is controlled by css and a media query. For example, if a particular element is hidden on extra small screens, I could look at the visibility property of that element to determine when I was on an extra small screen.
I am leaning towards the second of these three options, but I'm keen to know if there is a 'generally accepted' method of accomplishing this, and also if there are other options which I have missed.

I would go with window.matchMedia as it is supported by most current browsers (http://caniuse.com/#feat=matchmedia) and for those that do not support it you can use this polyfill: https://github.com/paulirish/matchMedia.js
Using matchMedia might reduce the complexity of your specific viewport/resize logic, as you can reuse the definition of the breakpoints you already use in your css. If you are using SASS you can even define your breakpoints once and share them between you SASS and your JavaScript: http://viget.com/extend/sharing-data-between-sass-and-javascript-with-json
Listening for the resize-event can get quite expensive/slow if you are not throttling/debouncing. If you are sticking to the resize-event have a look at https://github.com/louisremi/jquery-smartresize.
There is a jsPerf comparing the performance of matchMedia to the resize-event: https://jsperf.com/matchmedia-vs-resize/3 For me matchMedia was way faster than the resize (tested in Chrome 41 and Firefox 36)

Check out Awesome Media Queries in JavaScript: enquire.js is a lightweight, pure javascript library (with no dependencies) for programmatically responding to media queries.
http://wicky.nillia.ms/enquire.js/
https://github.com/WickyNilliams/enquire.js/

Related

OpenLayers - Detect Switch between full screen, regular screen

I have been searching but have not come to an answer.
Is there a way to detect the event which OpenLayers enters FullScreen/exits FullScreen? In short, i need to toggle classes of some divs. I tried adding events to the buttons, but then it doesn't work if they press escape instead.
Thanks.
The comment suggesting using 'screenfull' is a good option for now. screenfull is just a wrapper that smooths out the cross browser implementation issues of the fairly new 'Fullscreen API'. Until the browsers have fully implemented the standards for these events, that little wrapper is a good way forward.
If you are just wanting to style things differently, there is a CSS pseudo selector for that - :fullscreen. No JavaScript required! You can read the documentation for it on MDN and there is also a great example. Take special note of the need for the vendor prefixes and the fact that some browsers say full-screen rather than the standard fullscreen. The various mix of selectors you'll need seem to currently be:
:-moz-full-screen - Gecko based browsers
:-ms-fullscreen - IE/Edge
:-webkit-full-screen - WebKit based browsers
:fullscreen - Standards compliant browsers

Dynamically edit img src based on device orientation with JS or JQuery

I am working with an iOS magazine framework (PugPig) which loads HTML documents into a WebKit powered view (a chromeless version of Mobile Safari).
I would like each 'page' to load either a portrait or landscape version of an <img/> depending on the orientation of the device. For various reasons it has to be an <img/> rather than a CSS background image, so media queries won't work. Because I am loading HTML from the local device, no web server stuff can be used either.
So I am guessing that JS is the way to go, but it would need to detect orientation change (or at least screen width) on the fly, without a page refresh, and I don't know if this is possible.
Not hugely familiar with JS hence no sample code (all my attempts so far are car crashes). Sorry.
Any help much appreciated.
Did you try jQuery mobile's orientationchange events?
I've never done this, but it seems you could go this way.
OK, found a solution using CSS Media Queries after all, by setting the display property of the img. Bit of a fudge, but fine for now.
Basically I created two divs, one with a 'landscape' id and another with 'portrait', positioned absolutely on top of each other. Then used #media queries to show/hide the relevant div with the display: property. Very clumsy, not at all suitable for the web but okay for an iPad app loading data straight from memory. And this was before "responsive images" became a thing.

Issue with detecting viewport resizing

I'm working on a project that requires that the vertical borders, which are currently calculated based on page size or the length of the page depending on which one is longer, but there is a slight issue.
I am using Firefox and for example if my noscript plugin kicks in and I for example allowed the script the vertical borders will have a gap at the bottom of the page.
That as an example, is there any way I am able to use javascript to detect a viewport change across multiple browsers?
I found somewhere watch() but was unable to find solid documentation on it and what browsers support this. Is what I am trying to do possible? Is watch() the proper way? If so, can anyone point me to some documentation, if not, what should I be looking at?
window.onresize is the event you're looking for, I think. Here's a link: https://developer.mozilla.org/en/DOM/window.onresize
However, you should be able to get full-height elements using only CSS, and then you won't need any javascript
Maybe you can solve this problem with Media Queries and window.matchMedia
https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/

In what is the pip.io UI built?

Can anyone tell me if the http://pip.io UI is built in AJAX or only JavaScript?
The reason I ask this is that I noticed the UI is scalable in the browser. So with different screen resolutions it displays the same.
Do you mean scalable as in it works with multiple resolutions? The UI is designed with CSS which allows it to do so. The rest of the frontend is built with Mootools, which handles all the fancy animations and api calls.
We set the minimal height and width to accomodate for the design. It is a technical decision because at a smaller resolution, some areas won't be able to render properly. Also since most monitors are at least 1024px wide it shouldn't be an issue with most users.

JavaScript libraries for touch screen devices

I know there are a number of frameworks to help make web applications on Mobile Safari/Webkit look and behave like native applications (eg, jQTouch), but are there any more light-weight libraries that help out at a slightly lower-level?
eg, I might want to add some animations on certain touch events to reproduce an iPhone style swipe.
I don't want to create an iPhone web application as such, just enhance an existing site with a few special touch events.
It's not so difficult to create this stuff by directly using the touch events that the device provides, but some of the iPhone animation styles are quite complex to reproduce. eg, the bounce when you get to the end of a scroll bar, etc... Just wondering if anyone has done the work and wrapped it up into an open source library.
This doesn't answer your question completely, but since you mentioned bounce scrolling specifically, TouchScroll was just released on Tuesday.
I am looking for the same thing, JavaScript frameworks free from IE stuff..
So far
XUI
http://code.google.com/p/xui-js/
SLY
http://github.com/digitarald/sly
Coming Soon
jQuery for touch devices (not jqtouch) http://jquerymobile.com/2010/08/announcing-the-jquery-mobile-project/
http://zeptojs.com/ is all you want.
It's jQuery trimmed for webkit mobile. Excellent library with (brand new) great documentation. Handles ajax, dom selection, touch events. Does not have UI components.
Very lightweight.

Categories