Load different JS file for mobile and desktop - javascript

So I have two different JS files to load: one for desktop and a different one for mobile. And I have used this code:
<script>
if ( $(window).width() < 739) {
<script type="text/javascript"
src="https://example.com/js-file-for-mobile.js"></script>
}
else {
<script type="text/javascript"
src="https://example.com/js-file-for-desktop.js"></script>
}
</script>
But the only script that loads is the desktop one.

So I found the answer:
<script>
if (screen && screen.width > 900) {
document.write('<script type="text/javascript"
src="https://example.com/desktop.js"><\/script>');
}
</script>
<script>
if (screen && screen.width < 900) {
document.write('<script type="text/javascript"
src="https://example.com/mobile.js"><\/script>');
}
</script>
Verified and working!

var head = document.getElementsByTagName('head')[0];
var js = document.createElement("script");
js.type = "text/javascript";
if (screen.width() < 739)
{
js.src = "js/mobile.js";
}
else
{
js.src = "js/desktop.js";
}
head.appendChild(js);

I think checking screen size to decide if its mobile or desktop browser is a little risky as it may confuse sometime with iPad or small screen desktop.
So, We can navigator to check if its mobile or desktop and den our job accordingly.
//returns true if user is using one of the following mobile browsers
var ismobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)
your e.g:
<script>
if (navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)) {
<script type="text/javascript"
src="https://example.com/js-file-for-mobile.js"></script>
}
else {
<script type="text/javascript"
src="https://example.com/js-file-for-desktop.js"></script>
}
</script>

Related

How to avoid document.write on a media query

I try to avoid using document.write on a media query. Any suggestions?
<script>
if (screen && screen.width > 601) {
document.write('<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""><\/script>');
}
</script>
You can manually create a script element and then append it.
const scripts = document.getElementsByTagName('SCRIPT');
console.log(scripts);
<script>
if (screen && screen.width > 601) {
const script = document.createElement('script');
script.src = "https://unpkg.com/leaflet#1.6.0/dist/leaflet.js";
script.integrity = "sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==";
script.crossOrigin = "";
document.getElementsByTagName('BODY')[0].appendChild(script);
}
</script>
Please let me know if it works for you.

how to script show in below 1000px

I have a script but used in same page. like two times. i got error while working when i working on desktop it's work but when i check on below 1000px then it's get error like:- Duplicate Embedded Players Detected.
I think it's worked when i open desktop then show desktop script and when i open mobile then desktop not show mobile script show. please help me how to do that. :-
this is the script i used:-
<script type="text/javascript" id="vidyard_embed_code_kjashdwejkhsdsheh class="mobile" src="//play.vidyard.com/dskakdehjkwhewhdhshd.js?v=3.1.1&type=lightbox"></script>
I used for this but it's show syntax error:-
<script>
if (jQuery(window).width() < 1000) {
<script type="text/javascript" id="vidyard_embed_code_kjashdwejkhsdsheh class="mobile" src="//play.vidyard.com/dskakdehjkwhewhdhshd.js?v=3.1.1&type=lightbox"></script>
}
</script>
Please tell me how to fix that issue. Thanks alot
if (jQuery(window).width() < 1000) {
<script type="text/javascript" ...snip...></script>
}
This code is Javascript, so you need to construct a script element in Javascript and append it to the document manually.
var headElem = document.getElementsByTagName('head')[0];
var scriptElem = document.createElement("script");
scriptElem.type = "text/javascript";
if (jQuery(window).width() < 1000) {
scriptElem.src = "play.vidyard.com/dskakdehjkwhewhdhshd.js?v=3.1.1&type=lightbox";
scriptElem.class = "mobile";
}
else {
scriptElem.src = "desktop.vidyard.com/.......js";
scriptElem.class = "desktop";
}
headElem.appendChild(scriptElem);

Resize browser and add files online in script

I have an easy script that adds any files depending on the screen extension.
But, this does not work for the browser when the screen changes.
How to upload files in a script changing the size of the browser live?
I know about "resize" in jquery, but it's not working.
{
if (screen.width > 601) document.write ('<script type="text/javascript" src="/js/one.js"></sc' + 'ript>');
else if (screen.width <= 600) document.write ('<script type="text/javascript" src="/js/two.js"></sc' + 'ript>');
if (screen.width < 990) document.write ('<script type="text/javascript" src="/js/three.js"></sc' + 'ript>');
}
Put your this code before </body> tag like this:
<script type="text/javascript" src="/js/one.js" id="script_var"></script>
<script>
$(window).on('resize', function () {
var sw = $(window).width();
if (sw < 900) {
$('#script_var').attr("src", "/js/two.js");
} else if (sw > 900) {
$('#script_var').attr("src", "/js/three.js");
}
});
</script>
You can use onresize function in body element.
<body onresize="myFunction()">
function myFunction() {
var w = window.outerWidth;
//write your code here
}

Check size on screen doesn't work in IE - javascript

This code apparently does not work in internet explorer? Do you know what is wrong?
<script type="text/javascript">
<!--
if (screen.width > 1219) {
document.location = "index.php";
}
//-->
</script>

How to load js/css files in custom popup load

In my project i am displaying a custom pop up page like below by javascript which has a form for user to fill,then I need to load some js files when pop up is loaded.
how to load js files,plz help.
<html>
<head>
<script type='text/javascript' src='files/jsfiles/core.js'></script>
</head>
<body>
<!- I need to call javascript function showUsers() from here->
<input type='button' onclick='showUsers();' value='listUsers'>
</body>
</html>
function loadScript(src) {
var script = document.createElement("script");
script.async = false;
script.src = src;
document.head.appendChild(script);
};
function loadStyle(src) {
var style = document.createElement("link");
style.rel = "stylesheet";
style.href = src;
document.head.appendChild(style);
};
function loadFiles() {
var scriptsArray = ['src1url', 'src2url'.., 'scrnurl'];
var csssArray = ['src1url', 'src2url'.., 'scrnurl'];
for (var i = 0; i < scriptsArray.length; i++) {
loadScript(scriptsArray[i]);
}
for (var i = 0; i < csssArray.length; i++) {
loadStyle(csssArray[i]);
}
};
function yoursubmitFcn(callback) {
// your functionality here;
callback();
}
$(document).ready(function () {
// do your stuff
yoursubmitFcn(loadFiles);
});
Also check: Another short form
You can use this library fancybox
Loading jQuery from CDN
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css"
media="screen" />
html
Sign in
JS
$('.open_pop').fancybox({
});
function openmsg_sent() {
jQuery(".open_pop").trigger("click");
}
For better and consistent UI, you can use a div which you can display with fixed positioning on click of the button.
I believe Alert wont be able to display css properties if am not wrong.
What you can do is, onclick of the button, in the JS, you can put your popup content into a div which is hidden initially and shown on click.
Hope this helps.

Categories