1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Responsive Javascript

Discussion in 'XenForo Development Discussions' started by silence, Oct 17, 2013.

  1. silence

    silence Well-Known Member

    Is it possible to only load javascript if the display is NOT responsive? Some things I don't display to mobile users would be awesome to not even load them, to speed up the webpage!
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    Code:
    width = document.documentElement.clientWidth;
    That gets the current width. At the start of your Javascript you could simply:

    Code:
    width = document.documentElement.clientWidth;
    if (width < 750)
    {
        return false;
    }
     
    Adam Howard and silence like this.
  3. silence

    silence Well-Known Member

    Hmmm alright, didn't think it would be that simple lol.
     
  4. Chris D

    Chris D XenForo Developer Staff Member

    It's the same premise used for responsive ads, really.

    Chances are you'll be just grabbing that width variable as the page loads so the only thing to think about is, strictly speaking it isn't entirely responsive as it is all evaluated during load time. You could get more advanced and start binding functions to various change events in the browser to detect the width dynamically and reinstate scripts that previously stopped running but for something like this it probably isn't worth it.
     
    Adam Howard and Mike Creuzer like this.
  5. silence

    silence Well-Known Member

    Yeah I'm just getting serious page-blocking on my mobile device (none on desktop and everything is async) so I want to downsize the unnecessary js for mobile users.
     
  6. Mike Creuzer

    Mike Creuzer Well-Known Member

    I prefer doing something like:

    Code:
    
    if (! $('html').hasClass('Responsive') ) {
    //code when responsive is turned off
    }
    
    
    But there are many ways to do it.

    ETA: Nevermind, I see what you mean now. The way Chris has it is good. But instead, use 800px as thats when XenForo (by default, but this can be changed in Style Properties) starts responsive changes.

    The way I have it is for if responsive is toggled off entirely.
     
    Last edited: Oct 17, 2013
    Adam Howard, Chris D and silence like this.
  7. silence

    silence Well-Known Member

    Wouldn't that be more intensive since it's searching body for the class 'Responsive'?
     
  8. Mike Creuzer

    Mike Creuzer Well-Known Member

    I honestly have no idea. JavaScript loads client-side of course so load times can vary quite drastically. But like I said, I misunderstood your question, my apologies.
     
  9. euantor

    euantor Well-Known Member

    Even better, do as Audentio said using pure JS then only load the scripts if they are required.
     
  10. silence

    silence Well-Known Member

    No you answered it just fine :) Sorry I'm not thinking properly today and my english is suffering.
    Is there a way to benchmark JS since I would love to see if one is better than the other.
     
  11. euantor

    euantor Well-Known Member

    IE has a built in JS profiler, as does firebug I think. Chrome probably does too. Just check the developer tools.
     
  12. Chris D

    Chris D XenForo Developer Staff Member

    Then did I misunderstand your question?

    The solutions that myself and Audentio provided were solutions to two completely different scenarios.

    If you want to detect that someone is using a smaller screen using Javascript then my solution will work.

    If you want to detect when someone is using a style where you have switched the Responsive Design off completely for that style then use Audentio's solution.
     
    Mike Creuzer likes this.
  13. silence

    silence Well-Known Member

    No I got that completely, and you can use both to achieve my question (remove the ! from Audentio's solution), I'm just asking if searching through every class in <body> for 'Responsive' would have lesser performance compared to your solution.
     
  14. Mike Creuzer

    Mike Creuzer Well-Known Member

    You will only need to check once, so you'll want that like this:

    Code:
    $(document).ready(function() {
    // code when document is ready, asap
    });
    
    So you'll do the check. None of the code executed, from what I've read from what you're asking, should need to run multiple checks if I understand you correctly. Because an iPad or tablet will be largest under a screen or desktop device.

    If you want something to happen every time the device width changes size, you can throw your code into this:

    Code:
    $(window).on('resize orientationchange load', function(e) {
    //code will run every time someone resizes browser or changes orientation, and on load, on their device
    });
    
    Also note in my first post, its the html tag that XenForo adds class 'Responsive' to, not the body tag. Forgot single quotes as well :p Tough morning wheres the coffee.
     

Share This Page