We Keep Coding

Is there any way to make the site go to another page when the browser window is resized?

I'm using HTML5. In my Javascript file, I have the following code in my Javascript file to redirect mobiles users to the mobile site. However, is there a way to redirect to the mobile site as well when the browser window is resized to 480px or below? I looked everywhere and couldn't find any solutions anywhere.
if( screen.width <= 480 || /webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ) {
window.location = "mobile.html";
}

One thing to note is that screen is the size of a desktop user's monitor, so it may not change. Instead, use jQuery to figure out the width of the browser's window, not the screen:
<script src=https://code.jquery.com/jquery-1.12.4.js></script>
<script type="text/javascript">
window.onresize = function(event) {
if ($(window).width() <= 480) {
console.log('do stuff');
}
}
</script>

I would put my check in a function, run it initially, and assign the function to window.resize property:
function checkWinSize(){
if( window.innerWidth <= 480 || /webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ) {
window.location = "mobile.html";
}
}
checkWinSize(); // intial check
window.onresize = checkWinSize; // check when window is resized
A drawback with window.onresize is that it's a property so it cannot have multiple functions. In case you might do other things window is resized, use addEventListener
window.addEventListener('resize', checkWinSize);

window width only showing when resizing viewport, not on load - jquery

Trying to get viewport width on page load and when resizing browser window. For some reason the width isn't being outputted on page load. Any idea what the issue is and/or how to resolve?
function mobileViewUpdate() {
var viewportWidth = $(window).width();
console.log(viewportWidth);
if (viewportWidth > 776) {
$("area[data-toggle]").click(function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$(".detail-box").hide();
$(".detail-box"+selector).show().addClass('animated fadeIn');
});
}
}
$(window).on('load, resize', mobileViewUpdate);

There is no need of , as separator. Separation by space will work . Please refer this link for more informaton
$(window).on('load resize', mobileViewUpdate);

I guess you are calling this function within a ready function, in that case window has already loaded and so the window load event has already been called.
Attaching the load event handler at that point will never be called.

Why is this difference in calculations? JQuery

i have this site:
link
There is a difference when you call function in document.ready calculation or resize function
There is a white border when the page loads calculation is not correct ...
$( document ).ready(function() {
var windowsize = $(window).outerWidth();
var stanga= jQuery('#secondary').outerWidth();
console.log('stanga:',stanga);
var dreapta= jQuery('.right').outerWidth();
console.log('dreapta:',dreapta);
var contentwh=windowsize-stanga-dreapta;
console.log('total:',contentwh);
$('.navbar-fixed-top').css('width',contentwh);
$('#main-content').css('width',contentwh);
$('.continut').css('width',contentwh);
$(window).on('resize',function(){
var windowsize = $(window).outerWidth();
var stanga= jQuery('#secondary').outerWidth();
console.log('stanga-resize:',stanga);
var dreapta= jQuery('.right').outerWidth();
console.log('dreapta-resize:',dreapta);
var contentwh=windowsize-stanga-dreapta;
console.log('total-resize:',contentwh);
$('.navbar-fixed-top').css('width',contentwh);
$('#main-content').css('width',contentwh);
$('.continut').css('width',contentwh);
}
});
Basically I used the same code and document.ready but also according to resize and unfortunately goes.
I did manual calculation on a 1366 px and ought to get a 669px width (good value) and I am 657px sites.
Does anyone know why this difference appears to 12px?
Thanks in advance!

You must be using Windows as OS aren't you?
The problem is that on load, you have a scrollbar.So when you are making you calculs, some element have a smaller width. Later, the scrollbar dispear and the white gap appear.
Quick fix would be to add overflow:hidden on the body then make your calculs. Afterward, you can remove the overflow hidden.
Note that the problem also appear when you resize the window below a certain height.

-edit
The issue lies with the .right node max-width property disabling this causes the page to load the dimensions correctly however the algorithm with the node resizing is not being run correctly on document ready.
The page loads correctly after re-sizing the page.
My best guess for this next issue is that the OP did not provide enough code to fully diagnose his issue; but, i am positive that the code on ready is not executing correctly.
Run each variable in console and edit your question to provide the answers please.
Onload values:
window: 1903
custom2.js:89
stanga: 260
custom2.js:91
dreapta: 609
custom2.js:93
total: 1034
After resize:
window: 1918
custom2.js:156
stanga-resize: 260
custom2.js:158
dreapta-resize: 614
custom2.js:160
total-resize: 1044
custom2.js:154
window: 1920
custom2.js:156
stanga-resize: 260
custom2.js:158
dreapta-resize: 614
custom2.js:160
total-resize: 1046
Your resize event is being triggered twice, thats a problem of its own, but eventually it resolves the correct values.

You might need to load the background image asynchronus, catch an event when loading is done, and then make calculations. Like so:
$(document).ready(function() {
asyncLoad('.yourElement');
});
$(window).resize(function() {
doCalculations('.yourElement');
});
var asyncLoad = function(elem) {
var imgCSS = elem.css('background-image');
var imgSrc = imgCSS.replace('url(', '').replace(')', '');
$('<img/>').attr('src', imgSrc).load(function() {
$(this).remove();
elem.css('background-image', imgCSS);
doCalculations(elem);
});
});
var doCalculations = function(elem) {
var windowsize = $(window).outerWidth();
var stanga = jQuery('#secondary').outerWidth();
var dreapta = jQuery('.right').outerWidth();
var contentwh = windowsize-stanga-dreapta;
$('.navbar-fixed-top').css('width',contentwh);
$('#main-content').css('width',contentwh);
$('.continut').css('width',contentwh);
}
You might need to change the function to catch an array of images and do something when the last is done loading, but I hope the idea of 'Async loading' is well explained.
As explained HERE the function loads an image, and then it uses the same image as background-image for your element, and the browser is smart enough to not load that image twice.

Why does onresize fire when it shouldn't at low zoom levels in IE8?

I wrote some jquery to resize elements and close all open popups on my page when the browser window is resized:
addEvent({
target: window,
eventListener: 'onresize',
func: function (e) {
resizeElements(); //This resizes loads of stuff
closeAllPopups(); //Closes any open popups
}
});
This works fine at 100% zoom. However, at zoom levels less than 90% onresize keeps getting called, even when the window has not been resized. The effect is that popups won't open- they immediately close.
This only seems to happen on IE8. It works fine for Chrome.
Any ideas why this is happening- Is it simply an IE8 bug? Can anyone suggest a fix or a workaround?

What about checking the window original size and re-size size, then try to call your function?
So, even if you are in 90% view on load, this window size will be original size and only when you resize (under 90% view), your functions will be called?
$(document).ready(function(){
var original_width = $(window).width();
var original_height = $(window).height();
$(window).resize(function() {
var resize_width = $(window).width();
var resize_height = $(window).height();
if(original_width != resize_width && original_height != resize_height){
alert('You resized!');
// resizeElements(); //This resizes loads of stuff
// closeAllPopups(); //Closes any open popups
}
});
});

You could try maybe to debounce it using a timer:
addEvent({
target: window,
eventListener: 'onresize',
func: function (e) {
clearTimeout(window.resizeTimeout);
window.resizeTimeout = setTimeout(function(){
resizeElements(); //This resizes loads of stuff
closeAllPopups(); //Closes any open popups
},50);
}
});
I'm using here global object window to set resizeTimeout variable but better would be to use a local variable.

There is no way to "fix" this bug in the browser itself, so you are just going to have to work-around having a resize event that constantly triggers. So roasted was right about using the time, but you are not looking for a timer. You need to store the time and then ensure that enough time has elapsed before the event is triggered again, like so:
var _interval = 1000;// milliseconds
var _resize = 0;
addEvent({
target: window,
eventListener: 'onresize',
func: function (e) {
if (Date.now() - _resize < _interval)
return;
_resize = Date.now();
resizeElements(); //This resizes loads of stuff
closeAllPopups(); //Closes any open popups
}
});

Disable Browser Window Resize

For starters... I have no sinister intention of subjecting users to popups or anything like that. I simply want to prevent a user from resizing the browser window of a webpage to which they've already navigated (meaning I don't have access to / don't want to use window.open();). I've been researching this for quite a while and can't seem to find a straightforward answer.
I felt like I was on track with something along the lines of:
$(window).resize(function() {
var wWidth = window.width,
wHeight = window.height;
window.resizeBy(wWidth, wHeight);
});
...to no avail. I have to imagine this is possible. Is it? If so, I would definitely appreciate the help.
Thanks

You can first determine a definite size.
var size = [window.width,window.height]; //public variable
Then do this:
$(window).resize(function(){
window.resizeTo(size[0],size[1]);
});
Demo: http://jsfiddle.net/DerekL/xeway917/
Q: Won't this cause an infinite loop of resizing? - user1147171
Nice question. This will not cause an infinite loop of resizing. The W3C specification states that resize event must be dispatched only when a document view has been resized. When the resizeTo function try to execute the second time, the window will have the exact same dimension as it just set, and thus the browser will not fire the resize event because the dimensions have not been changed.

I needed to do this today (for a panel opened by a chrome extension) but I needed to allow the user to change the window height, but prevent them changing the window width
#Derek's solution got me almost there but I had to tweak it to allow height changes and because of that, an endless resizing loop was possible so I needed to prevent that as well. This is my version of Dereck's answer that is working quite well for me:
var couponWindow = {
width: $(window).width(),
height: $(window).height(),
resizing: false
};
var $w=$(window);
$w.resize(function() {
if ($w.width() != couponWindow.width && !couponWindow.resizing) {
couponWindow.resizing = true;
window.resizeTo(couponWindow.width, $w.height());
}
couponWindow.resizing = false;
});

If need some particular element to handle resize in some particular mode, and prevent whole window from resizing use preventDefault
document.getElementById("my_element").addEventListener("wheel", (event) =>
{
if (event.ctrlKey)
event.preventDefault();
});