We Keep Coding

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.

Load different JS file for mobile and desktop

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>

Change img src with another img attribute on Responsive

I created a attribute for img tag as in the example code like data-tablet, data-mobil
<div class="myDiv">
<img src="img-1.jpg" data-tablet="img-2.jpg" data-mobil="img-3.jpg">
</div>
and I want if my screen change for tablet my img src change with data-tablet or my screen is for mobil my src must change with data-mobil
MY JS
$(document).ready(function(){
$(window).resize(function(){
var tabletSrc = $(".main-carousel img").attr("data-tablet");
var mobilSrc = $(".main-carousel img").attr("data-mobil");
if($(window).width() <=768){
$('img').attr('src',tabletSrc);
}
if($(window).width() <=480 ) {
$('img').attr('src',mobilSrc);
}
});
});
click to see my works
question is how can I do that I want if u click you gonna see nothing work
note: I don't want to use srcset or css

Please see this CodePen for a working version.
There were some issues with your code:
Both the case for mobile and tablet was executed in the mobile case.
$(".main-carousel img") is a collection of images. Instead of that, you probably want to operate on a single image. This can be done with the help of .each().
Here is the relevant code:
$(window).resize(function() {
if ($(window).width() <= 480) {
$('img').each(function() {
$(this).attr('src', $(this).attr('data-mobil'));
});
} else if ($(window).width() <= 768) {
$('img').each(function() {
$(this).attr('src', $(this).attr('data-tablet'));
});
}
});

Use srcset instead of js based validations for device dimensions.
<img src="images/space-needle.jpg"
srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,
images/space-needle-hd.jpg 600w">
So, now the browser will automatically device which image to download and show depending on the browser dimensions.
Check out more
https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/

You can try this for you carousel multiple images
function makeResize(){
var imageSrc = $(".myDiv img");
if($(window).width() <=768 && $(window).width()>480){
$(imageSrc).each(function(key,value){
$(value).attr('src',$(value).data('tablet'));
});
}else if($(window).width() <=480 ) {
$(imageSrc).each(function(key,value){
$(value).attr('src',$(value).data('mobile'));
});
}else{
$(imageSrc).each(function(key,value){
$(value).attr('src',$(value).data('default'));
});
}
}
$(document).ready(function(){
$(window).resize(function(){
makeResize();
});
makeResize();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">
<img src="org1.jpg" data-default="org1.jpg" data-tablet="tablet1.png" data-mobile="mobile1.jpg">
<img src="org2.jpg" data-default="org2.jpg" data-tablet="tablet2.png" data-mobile="mobile2.jpg">
<img src="org3.jpg" data-default="org3.jpg" data-tablet="tablet3.png" data-mobile="mobile3.jpg">
</div>
Note Copy and add proper image source then try. Above code will work for multiple images.

You are using wrong class name. Your div has class "myDiv" and you are selecting by "main-carousel"
$(document).ready(function(){
$(window).resize(function(){
var tabletSrc = $(".myDiv img").attr("data-tablet");
var mobilSrc = $(".myDiv img").attr("data-mobil");
if($(window).width() <=768){
$('img').attr('src',tabletSrc);
}
if($(window).width() <=480 ) {
$('img').attr('src',mobilSrc);
}
});
});
Here is codepen

Keep the short width first. Your validation always goes for tablet first. since 480 < 768
Change your conditions like this.
$(window).resize(function(){
var tabletSrc = $(".someDiv img").attr("data-tablet");
var mobilSrc = $(".someDiv img").attr("data-mobil");
var imgSrc = "defaultImageSrc" //src for default image
var windowWidth = $(window).width();
if(windowWidth <= 480 ) { //first small width
imgSrc = mobilSrc;
}else if(windowWidth <= 768){ //next larger one
imgSrc = tabletSrc;
} //if else default will there for you which is initialised there.
});

Try this:
$(window).resize(function(){
var realImg = $(".main-carousel img").attr();
var tabletSrc = $(".main-carousel img").data("tablet"); //use .data instead of attr
var mobilSrc = $(".main-carousel img").data("mobil");
if($(this).width() <= 768){
$('img').attr('src',tabletSrc);
}
else if($(this).width() <= 480 ) { // use else if instead of if
$('img').attr('src',mobilSrc);
}
else{
$('img').attr('src',realImg);
}
});

Applying CSS based on scroll(function()

I've written a script that increases the nav menu top-margin when my website is loaded as a web app on an iPad, however I'd like to add a third condition: after the user scrolls down.
My current script:
<script type='text/javascript'>
jQuery("div").ready(function(){
if (("standalone" in window.navigator) && window.navigator.standalone) {
var array = window.navigator.userAgent.match("iPad"); if(array!=null && array.length == 1)
jQuery(".menu-secondary-wrap").css("marginTop", "20px");
};
});
</script>
I'd like to add:
jQuery(document).scroll(function(){
if(jQuery(this).scrollTop() > 175){
I'm just not sure how to do this - I can't seem to get the syntax right.
Any help would be really appreciated!

Add this script before the closing head tag
window.onscroll = function (e) {
var scrollTopVal = window.pageYOffset || document.body.scrollTop;
if(parseInt(scrollTopVal,10) > 175){
//Your Stuff Here
}
}
No need for jQuery. DEMO

How to detect window resize and then change the javascript file being added to the header?

I have this jQuery to detect the screen size and then append a file to the header based on the sceen size.
var scriptSrc = '';
var widowWidth = $(window).width();
if(widowWidth >= 1024)
scriptSrc = '/js/desktop.js';
if((widowWidth <= 1023) && (widowWidth >= 768))
scriptSrc = '/js/tablet.js';
else if(widowWidth <= 767)
scriptSrc = '/js/mobile.js';
var script = document.createElement('script');
script.src = scriptSrc;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
I have tried to use $(window).resize() with it but I have been unable to remove the file that was originally added before the resize is triggered.
I have a JSFIDDLE for you to change my code on and as you can see it will add the js file based on the screen size but I would like it to change if the screen does too.
Thanks for your time!

Here is what I use:
$(window).bind('resize', function(event) {
//Whatever you want to run here
});
Just set a variable for you window width and height and check what they are at inside of this function.
As for changing your javascript file when the screen is resized with out reloading the whole page... I don't think that is possible. A work around might be to import all the javascript files into one file and just run different functions that overwrite any changes that the last javascript function made.
This obviously uses jQuery though.

Add your code into the callback function for the resize event.
$(window).resize(function(elem){
var scriptSrc = '';
var widowWidth = $(window).width();
if(widowWidth >= 1024)
scriptSrc = '/js/desktop.js';
if((widowWidth <= 1023) && (widowWidth >= 768))
scriptSrc = '/js/tablet.js';
else if(widowWidth <= 767)
scriptSrc = '/js/mobile.js';
var script = document.createElement('script');
script.src = scriptSrc;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
});
The callback function will be called when the window is resized. However, the event will be fired for every pixel that the window changes in size, so be prepared for that

If I understand your question correctly you want to listen to the window resize event
var onsize = function() {
var W = $(window).width();
if(W >= 500) {
test.html('/js/desktop.js');
} else if(W >= 300) {
test.html('/js/tablet.js');
} else { //if(widowWidth <= 767)
test.html('/js/mobile.js');
}
};
I added a div to display the output.
$(window).resize(onsize);
Here's the fiddle http://jsfiddle.net/devm33/aC8Ez/