Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Responsive JS

Options
  • 07-08-2015 12:02pm
    #1
    off.the.walls
    Registered Users Posts: 1,298 ✭✭✭


    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.


Comments

  • Options
    #2
    Aimead
    Registered Users Posts: 184 ✭✭Aimead


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


  • Options
    #3
    off.the.walls
    Registered Users Posts: 1,298 ✭✭✭off.the.walls


    Aimead wrote: »
    Jquery's $(window).width() should work.

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


  • Options
    #4
    smcelhinney
    Registered Users Posts: 1,127 ✭✭✭smcelhinney


    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


  • Options
    #5
    Talisman
    Registered Users Posts: 6,005 ✭✭✭Talisman


    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.


  • Options
    #6
    zig
    Registered Users Posts: 1,206 ✭✭✭zig


    ^ 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.


  • Advertisement
  • Options
    #7
    Aimead
    Registered Users Posts: 184 ✭✭Aimead


    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.


Advertisement