Load different javascripts for different screen sizes

Question

I have 2 js codes, Code A and Code B , I want the code A to be used only when the max width of the screen is 800px.

And the Code B to be used when max width is 400, but Code A to be disabled. Is there any way to switch between them according on the screen size if the device?

Code A:

jQuery(document).ready(function($) {$("#touchcarousel-1").touchCarousel({"pagingNavControls":true,});});

Code B:

jQuery(document).ready(function($) {$("#touchcarousel-1").touchCarousel({"pagingNavControls":false,});});

Any help would be highly appreciated !

Easiest solution: `window.screen.width > 400 ? codeB() : codeA()` — p.s.w.g, Feb 26 '14 at 22:43
See here: https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/ — Kai Qing, Feb 26 '14 at 22:44
Additionally, if your code is longer using jquery.getScript() conditionally might be useful. — Michał, Feb 26 '14 at 22:45
Can you explain what you want to achieve? ~~Sometimes~~ Most times it's better to write code that works (although behaves differently) in all situations. — Jonathan, Feb 26 '14 at 22:49
Thanks Guys, I have added the codes.they are the same except in one value " false/true" — user3358086, Feb 27 '14 at 11:11

score 1 · Answer 1 · answered Feb 26 '14 at 22:45

1

You can use $(window).width(); to get the width and then just incorporate that into an if statement...

if ($(window).width() > 800) {
  // code for large viewports
} else if ($(window).width() < 400) {
  // code for small viewports
}

Combo this with jQuery.getScript() as others have suggested and it should be pretty painless...

answered Feb 26 '14 at 22:45

Dryden Long

10,072
2
35
47

Thank You Dryden for your help. I'll try it out. I have added the codes above. – user3358086 Feb 27 '14 at 11:12
I wasn't lucky :( could you please tell me how I combo it wih jQueyr.getScript. I really appreciate your help. I worked on it day and night but no hope. I added the js codes above if you can take a look please. – user3358086 Mar 01 '14 at 01:07

score 1 · Answer 2 · edited May 23 '17 at 10:31

1

If you're code resides in two different files, you could use Modernizr/Yepnope to load the scrips.

Modernizr.load([
{
    test: Modernizr.mq('all and (max-width: 800px)'),
    yep: '/js/CodeA.js',
    nope: '/js/CodeB.js'
}

Yepnope & Modernizr screen.width Conditions

edited May 23 '17 at 10:31

Community

1
1

answered Feb 26 '14 at 22:48

Steven Lambert

5,571
2
29
46

score 0 · Answer 3 · edited May 23 '17 at 11:57

0

using the condition of user p.s.w.g you can load scripts with query e.g. http://devdocs.io/jquery/jquery.getscript

$.getScript("script.js", function(){
    // do stuff
});

loooong explanation can be found at How do I include a JavaScript file in another JavaScript file?

edited May 23 '17 at 11:57

Community

1
1

answered Feb 26 '14 at 22:46

dsuess

5,219
2
22
22

Load different javascripts for different screen sizes

3 Answers3