Develop Reference

window.scrollTo on iPad/iPhone orientation

Upon load, I am positioning the users scroll to the top of the '#gallery-view' element.
This is working correctly on iPad and iPhone. However, if I change the orientation of the device, its not positioning.
I have run tests to check the code is run on orientation change. The 'resize' option is triggering correctly and the 'test' console.log is output.
Here is the code:
jQuery.noConflict();
function winResize() {
if ( jQuery('#gallery-view').length ) {
console.log('test');
window.setTimeout(function() {
window.scrollTo(0, jQuery('#gallery-view').offset().top);
}, 0);
}
}
jQuery(window).on('load', function() {
jQuery(window).resize(winResize);
winResize();
});
Does anyone know of any reason why this wouldn't trigger on orientation change?

Try attaching your winResize handler function to the orientationchange event as well. See the MDN docs.

How to detect window width changes without resizing

I already looked for the .resize() jquery function but the jquery .resize() only triggers when the window is being resized, what i wanted was a trigger that shoots when the width changes for example, instead of changing the browser width the user clicks in the button to maximize and the function fails to trigger, i have a function that fires a function on resize(), is there any function that is like on("windowwidthchanges") ?

You can detect both events and just execute code when it's a width change:
var width = $(window).width();
$(window).resize(function(){
if($(this).width() != width){
width = $(this).width();
console.log(width);
}
});

I've checked Chrome, Firefox and IE11. All 3 browsers trigger the alert when the maximize button is clicked.
$(window).resize(function(){ alert("resized"); });
What, specifically, are you trying to do that this doesn't work for you?

You can move the code to a named function and call it on resize and when clicking the button.
Or, you can trigger the resize when clicking the button:
$("button").on("click", function(){
$(window).trigger("resize");
});
Examples: http://jsfiddle.net/cde7fwrb/
EDIT: I see you were talking about the browser maximise button. Oh well....

$(".abc").click() is not working on window resize

I am using one click function() to render some chart on my project.
The code is as below
$('.abc').click(function() {
checkGraph();
});
But when i resize the window then this click event is not firing. Means my chart us not getting rendered.
I tried some of the things as below but none worked
Approach 1
$(document).on('click','.abc',function(){
checkGraph();
});
Approach 2
var crclick = (function(){
$('.abc').click(function() {
checkGraph();
});
});
crclick();
$(window).resize(function(){
console.log("Window resized New");
crclick();
});
In approach 2, i am getting console output but click function is not working.

The resize and click events are separate. If you want both to call checkGraph, bind them individually to call checkGraph(). If you were binging to events to the same element you could do it in once call.
$('.abc').click(function() {
checkGraph();
});
$(window).resize(function(){
checkGraph();
});
I wouldn't do the .trigger method mentioned in other answers, it's not very clear code, with potential other consequences.

Why would click fire on a resize? You are only assigning the handler.
Later you can click it using $(".abc").click(); or $(".abc").trigger("click");
Be aware you likely want to only click AFTER a resize
https://stackoverflow.com/a/15170104/295783

use on window resize. You are just binding the click on resize.
$(window).resize(function(){
checkGraph();
});

Will $(window).resize() fire on orientation change?

Im using this to run some code when a browser window is resized: $(window).resize(callback)
I also need to run this code when the orientation is changed in phones and tablets. Will the above fire on this event?

Some devices/browsers do, some not. You need to decide your supported browsers and devices.
If you want to be on secure side you should use the resize event and get/check the sizes inside in it; if you know your desired devices go with a simple orientation change:
Easy solution:
// Listen for orientation changes
window.addEventListener("orientationchange", function() {
// Announce the new orientation number
alert(window.orientation);
}, false);
More secure/supported
// Listen for resize changes
window.addEventListener("resize", function() {
// Get screen size (inner/outerWidth, inner/outerHeight)
}, false);
David Walsh wrote a good article about resize and orientation change event.
More about orientation change and sizes here:
http://davidwalsh.name/orientation-change

the answer is imho: no
but:
$(window).on('resize orientationchange', function(){
//do stuff
});
should have you covered
careful, this can trigger twice depending on the browser

My solution:
Generate an event when orientationchange doesn't do it
use a throttle to prevent to much update on resize (lodash library for instance)
window.addEventListener("resize", throttle(function() {
//to do when resize
}, 50), false);
window.addEventListener("orientationchange", function() {
// Generate a resize event if the device doesn't do it
window.dispatchEvent(new Event("resize"));
}, false);

Quirksmode directly tested this question and found that the native resize event fired on orientation change in all browsers other than Opera Mini: https://www.quirksmode.org/dom/events/resize_mobile.html

A simple solution is to pass a value based on the event type..
window.addEventListener('resize', function () {
myFunction('resize');
});
window.addEventListener("orientationchange", function() {
myFunction('orientation');
});
function myFunction(value) {
if (value == 'resize') {
// do something
} else if (value == 'orientation') {
// do something else
}
}

since orientationchange event has been deprecated, it's now possible to use screen.orientation.onchange
Deprecated: Window: orientationchange event
i.e.
const resizeScreen = debounce(async () => {
await animateWithNewDimensions();
}, 50);
window.screen.orientation.onchange = resizeScreen;
https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation#browser_compatibility
Too bad Safari is not supporting this :/

clearInterval() doesnt work on iPad

This is what i do:
var scrolling;
$('#nw_scroll_down').on('mousedown', function(){
scrolling = setInterval(function() {
$('.mod_article').scrollTop( $('.mod_article').scrollTop() + 5 );
},25);
});
$('#nw_scroll_down').on('mouseup', function(){
if (scrolling) {
window.clearInterval(scrolling);
scrolling = false;
}
});
inside a $(document).ready(function(){});
Everything works fine until the line
window.clearInterval(scrolling);
This works fine on PC but not on iPad. Can anyone imagine why it doesnt work on the ipad (chrome browser)?

Instead of mousedown, you should make use of touchstart and touchend events for iPad as detailed in Apple documentation or Mozilla documentation.
Try this:
$('#nw_scroll_down').bind( "touchstart", function(e){
scrolling = setInterval(function() {
$('.mod_article').scrollTop( $('.mod_article').scrollTop() + 5 );
},25);
});
$('#nw_scroll_down').bind('touchend', function(){
if (scrolling) {
window.clearInterval(scrolling);
scrolling = false;
}
});
In order to make it work in both, desktop and touch devices, you can try this:
$('#nw_scroll_down').on("mousedown touchstart", function(e){
.
Update
Another solution given by Apple documentation seems to be to add the inline event onclick="void(0)" to the element in which you have the mousedown event.
A clickable element is a link, form element, image map area, or any other element with mousemove, mousedown, mouseup, or onclick handlers. A scrollable element is any element with appropriate overflow style, text areas, and scrollable iframe elements. Because of these differences, you might need to change some of your elements to clickable elements, as described in “Making Elements Clickable,” to get the desired behavior in iPhone OS.