1

What I'm trying to do is set a global variable dot type to "mobile" or "desktop" according to the screen size.

var userScreen = {}

if (screen is small){
  userScreen.type === 'mobile'
}
else {
  userScreen.type === 'desktop'
}

Everything is working within the same file but I'm having issues getting the userScreen.type to be available in another JavaScript file.

screen-size.js:

$(document).ready(function(){
  var userScreen = {};

  var resizeTimer;
  $(window).on('resize load', function(e) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      var windowWidth = $(window).width();
      if ($('body').height() < $(document).height()) {
        var windowWidth = windowWidth + 15;
      }
      if (windowWidth < 768){
        userScreen.type = 'mobile';
      }
      else{
        userScreen.type = 'desktop';
      } 
    }, 250);
  });

another-js-file

$(document).ready(function(userScreen){
  console.log(userScreen.type);
});

Console Log "userScreen.type" result:

function( obj ) {
    if ( obj == null ) {
        return obj + "";
    }
    // Support: Android<4.0, iOS<6 (functionish RegExp)
    return typeof obj === "object" || typeof obj === "function" ?
        class2type[ t…

Load order:

  1. screen-size.js
  2. another-js-file.js

Thanks

EDIT

Want to say thank you for everyones responses. Final answer

So I created an IIFE with just setting the window.userScreen object

get-user-screen.js

window.userScreen = {};

function getScreenSize(){
  var windowWidth = $(window).width();
  if ($('body').height() < $(document).height()) {
    var windowWidth = windowWidth + 15;
  }
  if (windowWidth < 768){
    userScreen.type = 'mobile';
  }
  else{
    userScreen.type = 'desktop';
  }
  console.log(userScreen.type);
}

(function(){
  getScreenSize();
}());

That made the variable available globally like I wanted and eliminated the Timeout issue that was brought up. Everything is working as expected.

Thanks again

1
  • 2
    The userScreen is not a global variable. It exists in $(document).ready scope. Commented Feb 27, 2016 at 20:15

3 Answers 3

3

The best way to declare an explicit global is to create it directly on the window object. So for your case, create it like:

window.userScreen = {};

And when you want to access it, you can again do it via window.userScreen. Many might object to this usage because globals do smell however this is a way to obviously communicate to another developer that your global is an intentional global.

I advocate for using a better pattern like CommonJS modules but that does require more setup and knowledge. But if you're curious, it's a great direction to go if you want to keep your code clean and compartmentalized.

1
  • 1
    Trying to get better at compartmentalizing and yes it's very intentional variable. Thanks for explaining and concise answer.
    – wsfuller
    Commented Feb 27, 2016 at 20:26
0

You can declare the variable in your html, before you load any js files, inside a script tag. Like so:

<script type='text/javascript' > 
  var userScreen = {}; 
</script>

Put that before the script tags that load your javascript files, and they should all be able to use that variable. Also, remember not to redeclare that variable again; remove the var userScreen = {}; from inside screen-size.js

1
  • Thanks for the reply, trying to avoid setting anything in the markup
    – wsfuller
    Commented Feb 27, 2016 at 20:27
0

First of all declare it outside the document.ready (as global variable). Secondly, You're getting the userScreen.type before you're setting it (see timeout 250). I'd suggest different approach, from your description i don't see any point in having a timeout. Therefor:

screen-size.js

function getSize(){
  if ($('body').height() < $(document).height()) {
    var windowWidth = windowWidth + 15;
  }
  if (windowWidth < 768){
    return 'mobile';
  }
  else{
    return 'desktop';
  } 
}

another-js-file.js:

$(document).ready(function(){
    console.log(getSize());
});
1
  • Yeah I'm seeing that now, have to set up some type of promise to run when that value becomes available.
    – wsfuller
    Commented Feb 27, 2016 at 20:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.