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.
Related
in my js code I have pretty simple event listener listening for a click -
element.addeventlistener('click', ()=>{
#do somthing
})
the issue is that when I am scrolling on IOS (iphone) - touching this element to start the scroll, triggers the event listener.
Is there a way to prevent a event listener on iphone, unless no scrolling is to follow?
i.e. do something if clicked but scrolling doesn't follow
alternatively the might be a completely different solution (but I am trying to avoid a library)
thanks
W
ANSWER
After reviewing the answer given below (which does work) as described, this issue was still persisting. This gave me cause to review my CSS on which I found that on IOS mobile (iphone) - the CSS psudo selector :focus is activated when you scroll over an item.
I added a media query to only allow :focus to be used on desktop size devices or above, which solved the issue.
I have a found a possible solution on another question in Stackoverflow: Question
Basically you add a scroll listener to your window. This will then set a global boolean called disable_click_flag to true when scrolling. If the user wasn't scrolling for at least 250ms it will be set to false.
When the boolean is true then the click event isn't able to go trough.
var disable_click_flag = false;
var timeout = null;
window.addEventListener('scroll', () => {
disable_click_flag = true;
if(timeout) clearTimeout(timeout);
timeout = setTimeout(function(){ disable_click_flag = false }, 250);
}
element.addeventlistener('click', () => {
if(disable_click_flag === false{
#do somthing
}
})
I'm not an expert, but I would try:
var prevScroll = pageYOffset;
window.addEventListener("scroll", () => prevScroll = pageYOffset);
window.addEventListener("click", (e) => {
if (pageYOffset !== prevScroll) return;
// your code
});
Please note that this code is not tested, however I think it should work.
I have a function to adjust the page so that it does not scroll regardless of the device, it works at all, however, when you rotate the screen or when you change the device to inspect Google Chrome, the function does not work, only if I do the reload on the page that works, I don't know what I'm doing wrong, that's what I'm calling her
$("document").ready(function() {
changesize();
$(window).resize(function() {
changesize();
});
};
It is a syntax error document ready function closing bracket missing. Please refer below code.
$(document).ready(function() {
changesize();
$(window).resize(function() {
changesize();
});
});
I think this piece of code should fix your problem. It should trigger the resize function as needed when you flip your device. Let me know if it works :
window.addEventListener("orientationchange", function() {
window.dispatchEvent(new Event("resize"));
}, false);
I am trying to trigger an event in a web browser on a desktop
$(window).trigger('resize');
The issue is on mobile it doesn't seem to be triggering. Is there an alternative method for mobile?
I am using tablesaw plugin for grids. When the screen is small in size, the columns will not fit and as such a swipe will be provided to move between them. When I sort them, all the columns gets squeezed and shown on the small screen, but after I trigger the resize event, an event in the plugin will get called that will fix them. On the mobile, this event doesn't exist I guess and I'm not targeting the orientation.
a variation of this (JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?)
this will run on resize and orientchange.
var waitForFinalEvent=function(){var b={};return function(c,d,a){a||(a="THISPAGE");b[a]&&clearTimeout(b[a]);b[a]=setTimeout(c,d)}}();
var fullDateString = new Date();
$(document).ready(function(){
$.resized = function(){
waitForFinalEvent(function(){
//function to run
}, 300, fullDateString.getTime())
}
window.addEventListener("orientationchange", function() {
$.resized();
});
$(window).resize(function () {
$.resized();
});
$.resized();
});
window.dispatchEvent(new Event('resize'));
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 :/
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.