Responsive JS

off.the.walls · 07-08-2015 11:02am #1

This is probably a stupid question.

Lets say I have feature x. On desktop and larger tablets I want feature x to animate. On smaller tablets/phones where the animation wont run as smoothly I don't want it to run.

Is there anyway to write the js file so that it only runs if the screen size is a certain size? Similar to the media query used in CSS.

Just something that occurred to me and I haven't come across anything about it before.

Aimead · 07-08-2015 11:14am

Jquery's $(window).width() should work.

off.the.walls · 07-08-2015 11:16am

Aimead wrote: »

Jquery's $(window).width() should work.

Why is it always so simple? Thank you very much!

smcelhinney · 08-08-2015 11:16pm

Aimead wrote: »

Jquery's $(window).width() should work.

Or use Window.matchMedia() if you already know about media queries. Check the browser support though, depending on your requirements you might need a polyfill

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

Talisman · 09-08-2015 2:08am

The cssua.js library applies User-Agent CSS classes to the <html> tag. Mobile devices get a ua-mobile class, there's also a ua-desktop class.

It might be a cleaner solution if you don't want the animation on mobile devices regardless of the screen width.

zig · 09-08-2015 9:35am

^ This solution looks better as it would handle orientation issues and large mobile screens etc(in terms of screensize changing).

Also how complex is your animation? Would it be possible to use CSS animation which is much faster, cleaner, simpler and more controllable in terms of responsiveness.

Aimead · 10-08-2015 10:49am

zig wrote: »

Would it be possible to use CSS animation which is much faster, cleaner, simpler and more controllable in terms of responsiveness.

I don’t know the OP’s situation, but from my own experience the answer is often ‘no’.

Consider the very ‘simple’ (at least in theory) case of equal height columns. There are plenty of ways to do this using CSS, but almost every method has some sort of drawback. Using the ‘flexbox’ method is the simplest – it, unfortunately, doesn’t work across all browsers (and in older versions of one particular browser you can almost certainly guess it is a total non-starter). A very small bit of JS to force the column heights to be equal just works and is simple to implement. More importantly it works consistently across a greater range of browsers than any CSS solution I’ve yet seen.

When it comes to animations I’ve found that, in general, the situation tends to be even worse. It should be noted that there should be very little JS on any page to begin with. A very small bit of JS (such as the equal height trick) isn’t a problem provided it isn’t been added to a page that already has a feckload of JS. It just makes me cringe when I see people using a ‘bootstrap’ theme on something like Wordpress because you just know a sizeable stack of the page’s JS isn’t needed.

From a standards perspective, I agree that everything possible in CSS should be done in CSS. Unfortunately the practical reality gets in the way and you need to the usual shower of workarounds.

Just my €0.02.

Responsive JS

Comments