I have made simple website surajcreator.com/indermenschen . But the problem is in mobile device while scrolling page automatically refreshes itself. It has some scripts for background image slide. I don't understand where the problem is. Please help me.
Whoever stumbles upon this question could try to suppress the touchstart and touchend events, like
document.addEventListener('touchstart', function(e) {
console.log('touchstart');
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
});
In my case it was a manual page refresh, triggered by the window resize event, as I wanted to calculate dimensions etc. Turns out the resize event might be triggered by appearing control bars on mobile devices.
Related
In my JS I have an image with an event listener of touchstart and touchend.
touching the image manipulates a part of the HTML. in a way that as long as the user holds the finger on the image the desired manipulation continues to accrue.
The problem I'm facing (at least with android) is that when the user holds the finger on the image for more than 2 seconds, a popup window appears and asks if you'd wish to download the image.
Obviously the pop-up belongs to the mobile operating system - so how I can prevent this from happening?
You can use this event to stop long touch
$(document).on('contextmenu', function (e) {
return false;
});
OR
Javascript has a function to prevent the default action of a browser for the event in question.
event.preventDefault()
Is there way to interrupt iOS scrolling using javascript?
Example 1: user is scrolling content by moving his finger through device screen. When some event happens user continue moving his finger without raising but there is no scrolling anymore.
Example 2: user initiated scrolling but stopped his finger without raising. Some event happens and scrollbar disappears.
Example 3: Momentum scrolling completely stops when some event happens.
The first case could probably be covered using the following piece of code from another question
<script type="text/javascript">
function blockMove() {
event.preventDefault() ;
}
</script>
<body ontouchmove="blockMove()">
However, it will only work on iOS 8+. As for the other two cases I'm not aware of any method to do that.
If you're talking about interrupting the iOS inertia/momentum scrolling, then I might have something for you.
First of all, you need to add fastclick.js. The lib removes the 300ms click delay on mobile devices and enables event capturing during inertia/momentum scrolling.
After including fastclick and attaching it to the body element, my code to interrupt scrolling looks like this:
scrollElement.style.overflow = 'hidden';
setTimeout(function() {
scrollElement.style.overflow = '';
}, 10);
The trick is to set overflow: hidden, which stops the inertia/momentum scrolling. Please see my fiddle for a full implementation of stop scrolling during inertia/momentum.
I've looked around but I haven't found an answer to what seems to be a common problem.
I have a basic dropdown menu that is activated on hover (using hoverintent plugin for jQuery). It works fine for desktop browsers but for mobile devices that don't convert hover events to click as iPad does, it doesn't work. Here's the Javascript as it is now:
$('li.threecolumns, li.twocolumns, li.onecolumn').hoverIntent(
function() {
$(this).children('div').fadeToggle(fadeInSpeed);
},
function() {
$(this).children('div').fadeToggle(fadeOutSpeed);
});
My question is: what is the cleanest and least problematic way to use clicks for mobile devices and hover for desktops for a dropdown menu? I had a couple ideas but not sure which:
Attach onclick event and disable hover every time there is a click.
Detect the ability to hover (not sure how this is done) and use a click handler if it's available.
At least iOS automatically interferes with the hover event when there is an event handler so you have to tap once for the hover event and a second time for any click event.
Detection for hove is trivial. Check if the client supports touch. If there is touch, there is no hover.
if ("ontouchstart" in document) {
// touch only code
} else {
// "desktop" code
}
By default iOs and some Androids implement a tap for hover event. It's handy, however, you need to make sure your top-level links lead to a valid anchor. The days of unclickable parent placers are gone and if that link leads only to a page with all the children listed as links, so be it. But make it go somewhere.
I wonder how I do that the scroll PhoneGap does not have this
in my application when I drag the mouse on the application, it will go
up or down, as I do Ileave it fixed? I posted pictures of what is
happening, thanks!
http://postimage.org/image/pa2kyvvwb/
http://postimage.org/image/gf8cnrjsx/
You can use this script, but then you'll have to handle scrolling yourself if you page is bigger than the screen:
//Prevent dragging of canvas on iOS
$(document.body).bind('touchmove', function(event) {
event.preventDefault();
});
This seems to be on every apple device the same. This is not an PhoneGap feature. When draging a website on my mac mini the same happens. So you'll have to do it programmatically in objectiv-c. Maybe this works
CGSize scrollableSize = CGSizeMake(320, myScrollableWidth);
[myScrollView setContentSize:scrollableSize];
I'm programming a Webpage/-Application for the iPhone. I need to scroll to a specific position after page reload, no matter where I scrolled to while using the page before.
The script I use works fine in firefox but not in mobileSafari. In contrast to firefox, mobileSafari seems to save the position I scrolled to previously and jumps there after reload, ignoring my scrollTo triggered on reload.
This is the code I use:
function scroller(){scrollTo(1000,1000);}
window.addEventListener("load",scroller, false);
It works with click-events that I trigger manually. If I click a button to trigger the scroll function than the scrolling is done.
I tried to trigger the click via a synthetic event javascript, but this does not work either.
Is there any way the scrolling can be archived on reload and/or other not explicitly user triggered events?
I did not find a solution for the actual problem which seems to be a bug. But I found a workaround. This is not to trigger the scrolling directly via an onload event but to use a setTimeout()
init(){
setTimeout(scrollTo(0, 1000), 10)
//more code
}
//more code
window.onload=init;
What about the iscroll prototype !?