Change href depending on viewport size (without jquery) - javascript

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
}

Related

iOS 8 glitch effecting window resize

I've got some very simple code:
$(function() {
$(window).resize(function () {
if ($(window).width() < 500) {
$("#foo").show(); $("#foo2").hide();
} else if ($(window).width() > 501) {
$("#foo2").show(); $("#foo").hide();
}
}).resize();
});
All was working fine on desktop (all major browsers) and mobile (as many as I could test), till iOS 8 came out. Now when a users scrolls in Safari the javascript falls back to 'else if', creating 'foo2' and hiding 'foo' despite the browser not resizing. This is for a menu, as such the menu closes if the user scrolls which shouldn't be happening.
If I remove the window resize function all works as it should, however the menu doesn't update in real time if the user resizes the browser window.
Is there an alternative to window resize I can use to achieve the same effect?
...so, considering I get the problem as you describe it, you can avoid javascript and do it using pure css and media queries:
#media (max-width:500px) {
#foo {
display:block;
}
#foo2 {
display:none;
}
}
#media (min-width:501px) {
#foo2 {
display:block;
}
#foo {
display:none;
}
}
edit: ..this will definately have nothing to do with scrolling and will certainly be faster and cleaner
This might be a little late, but I'd store the width of the window on load and then check against that on the resize to ensure an actual resize took place horizontally. That would ensure that the code only fired when the browser changed size on the x axis.
var windowWidth = $(window).width();
$(window).resize(function(){
if (windowWidth !== $(window).width())
{
windowWidth = $(window).width();
// rest of your code goes here
}
});
Remember that the resize event could fire quite a lot while someone is resizing, so you may want to limit the whole thing using setInterval, but that's a separate discussion.

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
};
)};

Call or Uncall function after resize or orientation changee

I'm working on a mobile web project that goes between a two column or single column view based on screen size. For some device sizes, changing from portrait to landscape switches you between the single and double column. Across the bottom of the page there are three feature images that are side by side for two column view, but we want to turn into a content slider in single column.
My issue:
The javascript conditional I have calls the function when the width of the screen is below a certain width. However if you change the orientation/size of the screen, it doesn't recall the function or re-evaluate the screen width.
What I have:
if( $(window).width() < 570) {
$(window).load(function() {
$('.flexslider').flexslider();
});
}
What is the best way to watch for resize and call/recall the function after the resize event?
Use jQuery resize event on window. jsfiddle
$(window).resize(function(){
//your code
});
To follow on from what Shusl said, you need to create the functions within $(window).resize();
What I would do is create the function and be sure to trigger it too. So it would be something like -
$(window)resize(function() {
winWidth = $(window).width();
winHeight = $(window).height();
if (winWidth < 570) {
$(window).load(function() { $('.flexslider').flexslider(); });
}
else {
// do something else
}
}).trigger("resize");

Listen for browser width for responsive web design?

I'm trying to make my site mobile friendly.
I want to know the browser window size so that I do something when it's narrower than 728px and something else when it's bigger.
This must take into account resizing the window on the PC as well as changing from portrait to landscape mode in a phone.
How can this be done?
As m90 suggest, if the only thing you want to do is modify the style, then you should have a look at media queries. However, if you want to do more than just modify the style, then you have to rely on JavaScript.
Plain JavaScript
The problem is that it isn't entirely straight forward to get the width of the window, it varies between browsers. So you would have to create a function, something like this (untested):
var width = 0;
function updateWindowSize() {
if (document.body && document.body.offsetWidth) {
width = document.body.offsetWidth;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {
width = document.documentElement.offsetWidth;
}
if (window.innerWidth) {
width = window.innerWidth;
}
}
Then you could listen for for the window onresize event, and call the function to get the new window size everytime the window changes.
window.onresize = function(event) {
updateWindowSize();
}
jQuery
If you use jQuery, then this can be done a bit shorter, as jQuery takes care of the cross-browser-support for you behind the scenes:
var width;
$(window).resize(function() {
width = $(window).width();
});
As a warning, IE8 and lower don't support media queries or CSS3. If you don't care about IE8, go for it. Respond.js, Modernizr and others can help to support IE6-8, but it's far from perfect.

Categories

Resources