CODEWITHSUNDEEP
javascripthtmlcssweb
AuGE
AuGE

Reputation: 13

How to use two JavaScript (.js) files on one website?

I created a website for big (Desktop) and small (Mobile) devices. Not only the .css files differ each other but also the .js files in which the animations are saved. My Problem now is, I don't know how to make the browser use the .js file for small devices if the display is small and on the other site the .js file for big devices if the display is big. Is there any possible solution to use only one webspace with two Java Script files automatically choosen by screen size?

Upvotes: 1

Views: 560

Answers (5)

hjrshng
hjrshng

Reputation: 1826

Testing the user agent is more robust than testing the window width. Here's a library than can help you: WURFL.io

Just grab the lib to your page and add:

if (WURFL.is_mobile) {
    //add mobiles scripts
}

Upvotes: 0

Mike W
Mike W

Reputation: 108

You can dynamically load a JavaScript file after checking the window size using:

var file = window.innerWidth < 800 ? 'small.js' : 'big.js'
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', file);

Upvotes: 0

AndrewL64
AndrewL64

Reputation: 16311

Here you go:

if (screen.width > 768) {
    //keep your desktop js here
}

if (screen.width < 769) {
    //keep your mobile js here
}

Upvotes: 0

marmeladze
marmeladze

Reputation: 6564

i am not sure it is good way or not, but you can also use simple javascript to detect the mobile browser

<script>
if( /Android|iPhone|iPad|BlackBerry|IEMobile/i.test(navigator.userAgent) ) {
 // include mobile
} 
else {
//include desktop
}
</script>

Upvotes: 1

Erick
Erick

Reputation: 833

Using JQuery you can do something like this:

if ( $(window).width() > 739) {      
  //Add your javascript for large screens here 
} 
else {
  //Add your javascript for small screens here 
}

This way you only require one JS file.

Upvotes: 2

Related Questions