Develop Reference

Want to load javascript for mobile devices only

I want to show these 4 buttons in a row in desktop mode
and show carousel like this only for mobile view
The first pic is for mobile view and the second pic is for pc view
Here is the link to my code https://jsfiddle.net/FODraciel/wehc8ryv/4/
I am trying with javascript and tried some steps which were set width technique but it does not work. Any idea of how to do it?
I have tried some steps like this
window.onload=function(){
w = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
var targetWidth = 768;
if ( w >= targetWidth) {
//Add your javascript for screens wider than or equal to 768 here
}
else {
//Add your javascript for screens smaller than 768 here
}
};

Change href depending on viewport size (without jquery)

I want to be able to change a href depending upon window width: on initial page load and window resize (without jquery or other external libraries).
Thank you!
Here is an experiment using an answer to a similar question: doesn't seem to be working for me. https://codepen.io/marcusdeacey/pen/wLLNXb
HTML
<a id="myLink" href="http://highresolutionurl">My Link</a>
JS
if (screen.width < 768) {
document.getElementById('myLink').setAttribute('href', "http://highresolutionurl");
}
else if {
document.getElementById('myLink').setAttribute('href', "http://lowresolutionurl");
}

screen.width doesn't change unless you change the display settings on your computer or mobile device. If you want this link to change dynamically with the width of the window, you need either window.innerWidth or window.outerWidth.
If you want this to change dynamically, you can't just do it once, you need to monitor changes in window size.
var myLink = document.getElementById('myLink');
function setLink() {
if (window.innerWidth < 768) {
myLink.setAttribute('href', "http://highresolutionurl");
}
else {
myLink.setAttribute('href', "http://lowresolutionurl");
}
}
setLink();
window.addEventListener('resize', setLink);

There's a JavaScript variable called screen.width which is pretty self explanatory, it gets the screens width. So for example:
if (screen.height > screen.width) {
//This means your on a mobile device so if you wanted people on mobile to go to mobile support instead of desktop support you could use this method
}
else {
//do something
}
//or you could just
if (screen.width == 1360) {
//Do this for people with only 1360 pixel wide screens
}
else {
//Do this for people without 1360 pixel screens
}

window.screen.width value not changing in iPad browsers when screen orientation changed

I'm trying to get the screen width of user device using window.screen.width. This method is working fine on most of the devices but not on iPad. When the iPad is in portrait mode, the screen width is shown to be 768px and height to be 1024px(using window.screen.height).All good till now. But the width and height remains the same in landscape mode too. In other devices, the "width*height" value switches when orientation changes and all my calculations was based on that concept.

Alternative solution using
window.innerWidth
window.innerHeight
will work perfect if your webview fill you ios ViewController
and will give you correct values even when you change the orientation while application is running..
That screen.availWidth & screen.availHeight give you the correct values only at first run before change the iPad orientation

Instead of using screen.width use the below one:
var body = document.body;
if(body.scrollWidth < 1024){
//code here
}
if(body.scrollWidth < 768){
//code here
}
if(body.scrollWidth == 1024){
//code here
}
if(body.scrollWidth <= 1024){
//code here
}

Multiple scripts for responsive layout with (window).resize

So I am currently working on a one page site with a responsive layout. On smaller screens I am using an animated scroll plugin to navigate between the content divs, but on larger screens I am using a plugin to simply toggle the visibility of these divs.
The issue that I am having is that I need the script to change if the window is resized after the page has been loaded. I thought that $(window).resize would do the trick but it doesn't seem to be working and continues to use the script that was initially loaded rather than executing the proper script. .anchorAnimate and .anchorTog are the plugins that I am using but I do not think that they are the problem here. I can post if necessary.
Code:
$(document).ready(function() {
var w = $(window).width();
if(w <= 767) {
$('a.anchorLink').anchorAnimate();
}
if(w >= 768) {
$('a.anchorLink').anchorTog();
}
$(window).resize(function(){
if(w <= 767) {
$('a.anchorLink').anchorAnimate();
}
if(w >= 768) {
$('a.anchorLink').anchorTog();
}
});
});

in your code, the variable "w" is out of scope for the resize function. "w" will only ever be the window width when the document has reached it's ready state. To fix this, you can redeclare the variable in your resize function so that every time we get a resize, we check the width:
$(window).resize(function(){
var w = $(window).width();
if(w <= 767) {
$('a.anchorLink').anchorAnimate();
}
if(w >= 768) {
$('a.anchorLink').anchorTog();
}
});

Responsive design usually implies CSS, not JavaScript.
In CSS3 you can define the dimensions of the screen-size you want to support using #media.
If you use CSS you can have hardware accelerated animations, which are much smoother than anything you could do in JavaScript.
Google for "responsive design css3" and you'll get many examples.

different javascript/jQuery function by screen orientation on mobile AND browser

Disclaimer: I am not a javascript or jQuery expert.
This is probably an easy problem to solve, as it's just a small fix I can't figure out. I am implementing a site that is horizontal if the browser is in landscape mode, and vertical if in portrait. CSS changes are not an issue as that is easy with media queries. The problem I run into is when I want to only run a specific script when the screen is in landscape mode. Next problem I run into is that I don't just want this to work on mobile, but I also want it to be responsive in a standard browser as well; i.e. detect when the screen width > screen height and run said script. Here is my code so far:
var height = $(window).height();
var width = $(window).width();
if (width > height) {
//run landscape script
} else {
//run portrait script
};
This is working just fine to detect orientation when the page loads, but it doesn't change when the screen is resized since the script is not bound to window.resize. That being said, it is also not working when I bind it to window.resize.
Is there a better way to go about this? Or do I just need to fix up what is already here?

In case somebody else runs into this problem in the future, I'll post what solved my problem.
When I attempted to add the resize event to the function, my code looked like this:
$(window).on('resize', function() {
var height = $(window).height();
var width = $(window).width();
if (width > height) {
//run landscape script
} else {
//run portrait script
};
)};
This worked just fine, but it did not appear that way because the script was only being fired when the browser resized. While this is essential, the script also needs to fire when the page loads. My solution was just to add 'load' to the event:
$(window).on('resize load', function() {
var height = $(window).height();
var width = $(window).width();
if (width > height) {
//run landscape script
} else {
//run portrait script
};
)};