Develop Reference

$(window).resize() executes when scrolling on mobile devices

For example:
HTML
<div><p>A lot of text that goes off the page so you have to scroll down.........</p></div>
JavaScript
$(window).resize(function(){
$("div").append("<p>appended</p>");
});
This works and appends the paragraph as expected on resize, but it is also appended when I scroll down. This means when I get to the end of the original text there is about 20 appended paragraphs.
This is only happening on mobile devices (so far I've checked Chrome, Safari and Firefox), not on desktop browsers.
Is there a way to stop this happening and have the paragraph appended only when the window (that you see) is resized?
Or maybe only have the code within the resize execute every so often?
Thanks.

The problem with mobile devices is that they have the browser toolbars that are hidden when you scroll and this leads to screen change (activates the resize event) and this means that you have to make some validations to your code and detect why was the resize event fired.
One way I have used is by saving the window width and checking if the correct window width is the same or changed. If it changes then it means that the append should happen (in your case).
var dwidth = $(window).width();
$(window).resize(function(){
var wwidth = $(window).width();
if(dwidth!==wwidth){
dwidth = $(window).width();
console.log('Width changed');
}
});

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

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.

JavaScript resize event on scroll - mobile

I'm trying to make a website for mobile. I'm having the "resize" event bounded on window, which should rearrange elements when the mobile device is turning (portrait <-> landscape). On iPhone and Samsung Galaxy SII, the event is triggered when I'm scrolling down the page, and that's not good.
How can I fix this?

Cache the width of the viewport and on resize return false if the width is still the same.
A small jQuery snippet:
var cachedWidth = $(window).width();
$(window).resize(function(){
var newWidth = $(window).width();
if(newWidth !== cachedWidth){
//DO RESIZE HERE
cachedWidth = newWidth;
}
});

Use the onOrientationChange event and the window.orientation property instead.
Also see this answer.
Here link to a test page.

IE and JavaScript: window reload on resize

Reasoning for Script:
Reloads various CSS scripts based on browser detected width and height. Window reload in needed to reload the other JavaScript as browser is resizing.
Problems Occurred:
IE likes to loop continuously.
Compatibility with other scripts:
Chrome, FireFox, Safari work
Script used:
<body onResize="window.location.href = window.location.href;">
Someone please come up with a better solution or suggestion!! This has to work for Safari, IE, and FireFox.
Possibly else if logic based on what type of browser?
SOLUTIONS BELOW (JQUERY): window.resize event firing in Internet Explorer
$(document).ready(function(){
var winWidth = $(window).width(),
winHeight = $(window).height();
$(window).resize(function(){
onResize = function() {
//The method which sets the LEFT css property which triggers
//window.resize again and it was a infinite loop
setWrapperPosition($mainWrapper.parent());
}
//New height and width
var winNewWidth = $(window).width(),
winNewHeight = $(window).height();
// compare the new height and width with old one
if(winWidth!=winNewWidth || winHeight!=winNewHeight)
{
window.clearTimeout(resizeTimeout);
resizeTimeout = window.setTimeout(onResize, 10);
}
//Update the width and height
winWidth = winNewWidth;
winHeight = winNewHeight;
});
});

I'd use:
window.location.reload()
to reload the page.
Also, I'm not sure if onresize is a widely-supported event.
Instead, I'd do it with a timer (source here http://jsfiddle.net/ACpTm/4/)
But I REALLY would not advise anyone to reload the page due to styling. It's a bad practice and the user dislikes it, especially if they have limited bandwidth.
Could you describe why you need to do this? We could provide a more versatile solution instead of this.

You would be way better off if you didn't base your CSS on the browser size.
You could use Javascript/jQuery to resize things in the window onResize event, I had to do this once in the past and it worked ok.