I have a button that is fixed on my page and when you start to scroll it appears. I noticed on ipad safari I have to click this button twice to fire the click event once.
After searching around I found this sure enough when I commented out my "display:none" on the button it works.
How can I achieve having it hidden and then changing it to "display:block" without getting this double click issue?
You can use css position instead to place it off screen:
.hide {
position: absolute;
left: -999em;
}
You could also try the visibility property
.hide {
visibility: hidden;
}
w3c example
Related
We're having trouble with Adsense ads disrupting scroll behavior for the content of a page, on mobile specifically. When you tap (and hold) your finger on an ad, it does not actually scroll up or down the page, but rather simply moves the screen up and cuts everything else above it off. If you tap (and hold) and drag on anything that's NOT an ad, the page scrolls just fine.
I've linked to a video of the issue below.
Video of scroll behavior issue
Here's the markup in JSX (we're using React):
<div className="resultsAdContainer">
<div className="resultsAd" style={{display: 'inline-block', margin: '25px auto 25px auto'}}>
<ins className="adsbygoogle" style={{display: "block"}} data-ad-client={this.props.dataAdClient} data-ad-slot={this.props.dataAdSlot} data-ad-format="auto"></ins>
</div>
</div>
Here's the CSS selectors:
.resultsAdContainer {
display: flex;
justify-content: center;
}
.resultsAd {
display: inline-block;
width: 100%;
}
I've tried touch-action: none and also tried adding an event listener for touchmove and touchstart and invoking .preventDefault() when an event is fired on the container DIV.
The only thing I've found to work is adding pointer-events: none on the resultsAd class. Trouble is, that also disables clicking the ads, which is obviously a no-go. I've tried adding pointer-events: auto back later on to the iframe tags with Javascript, but that just resets everything back to the same behavior originally described.
Any ideas how to stop this "cutting off" behavior?
I know this is Necromancy but just sharing this for anyone who had this same issue. I decided to use multiplex instead. It actually let me scroll after. I was using it inside a Material UI FullScreen Dialog if that helps.
Basically what I want to achieve is an clickable image with an active state.
When the image is clicked something should happen and while it is pressed (active) it should display another image.
document.getElementById("scrollbox-table-nav-softer").addEventListener("click", tableNavSofterOnClick);
function tableNavSofterOnClick(){
//doStuff..
}
#scrollbox-table-nav-softer{
max-height: 45px;
position: absolute;
left: 15px;
top: 0;
z-index: 1;
}
#scrollbox-table-nav-softer:active{
content: url("https://www.joomlack.fr/images/demos/demo2/on-top-of-earth.jpg");
}
<img src="http://cdn05.branchez-vous.com/wp-content/uploads/2016/09/bge2-800x410.jpg" id="scrollbox-table-nav-softer"/>
The problem is that when the page is loaded the first click on that element does nothing (the onClick method is not called). On the second click it works as intended (image changes when clicked and the onClick method is executed).
What causes the first click to malfunction?
EDIT:
I managed to fix this issue by adding a class to the CSS :active block like so:
#scrollbox-table-nav-softer:active .elementActive{
content: url("../img/button_softer_active.png");
}
I dont know how or why... but it works now as intended. If someone can explain this to me I would appreciate it.
Quick fix:
You need to change image src on onmouseup and onmousedown events:
<img
onmousedown="document.getElementById('scrollbox-table-nav-softer').src='your_image_1.jpg'"
onmouseup="document.getElementById('scrollbox-table-nav-softer').src='your_image.jpg'"
src="your_image.jpg"
id="scrollbox-table-nav-softer"/>
https://jsfiddle.net/xcmqkcba/1/
For some reason scroll doesn't work on Android Devices in Chrome browser only.
You can see the site at Peshkuiarte.com/mobile
I have tried:
$(document).ready(function() {
$('body').css('touch-action', 'auto');
});
I can't seem to figure it out ... Any help would be greatly appreciated
By scroll do you mean dragging the page with your finger on mobile?
You've set -webkit-user-drag: none; as an inline style for body, which might be the cause.
It's a Webkit-specific property:
CSS property: -webkit-user-drag
Description
Specifies that an entire element should be draggable instead of its contents.
Syntax
-webkit-user-drag: auto | element | none;
Values
auto The default dragging behavior is used.
element The entire element is draggable instead of its contents.
none The element cannot be dragged at all.
It's supported by Chrome 1-17 and Safari 3-5.1: http://www.browsersupport.net/CSS/-webkit-user-drag
we had same problem on Chrome 40.0... and we fixed with css only solution. Maybe it is not clean but works for us:
#media screen and (max-width: 1024px) {
html, body {
z-index: 0 !important;
overflow: scroll !important;
}
}
In my case, I have found touch-action: none added on body element.
Removing it enabled scrolling in android chrome.
Summary
The touch-action CSS property specifies whether, and in
what ways, a given region can be manipulated by the user (for
instance, by panning or zooming).
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
Hope it helps people dealing with legacy code :)
e.preventDefault
function handlerSwipe(e){
e.preventDefault();
if(handlerTouch){
if(e.changedTouches[0].clientX>=110)
toggle.checked=true;
else toggle.checked=false;
}
return false;
}
window.addEventListener("touchmove", handlerSwipe, false);
This was the code i used for creating a swipeable navigation drawer because of this scrolling was not working .Just removing the e.preventDefault(); from the above code solved my problem
I am not really sure about the question, you say "scroll" but the accepted answer is talking about "drag". So I am going to give you what I think you are asking (not being able to scroll within an area on a mobile).
The simplest solution is a CSS one rather than a JS one. If you have an area on your page that you need to scroll, for example a code block on a tech blog you can set position relative on the area and have overflow-x set to auto. On the body you will need to have it not move when you touch the screen.
pre {
white-space: pre-wrap;
overflow-y: auto;
position: relative;
}
html,body{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
You can see this solution working on my blog if you look at the code snippet sections and try and scroll on them via chrome mobile.(http://fullstack.life/mapping_arrays.html)
pointer-events
I came across another issue today and I'm going to leave this here for reference. If the element with the overflow-y: scroll; either sets its pointer-events: none; or inherits it, then it won't work either. On this layer, pointer events need to be re-enabled with:
pointer-events: auto;
Here is the fix for this issue that worked for me.
When you call the niceScroll function $("body").niceScroll(); in your javascript class, it appears to add an inline style of: overflow-y: visible on your body element (because it is inline, it overrides any previous overflow: hidden that you may have written in your css file.
Simply add overflow: hidden ! important in the css of your body element.
Also, make sure that your html element has style of
overflow: hidden;
touch-action: none;
I'm building an app with Phonegap and I have a header which I have fixed to the top of viewport.
header {
position: fixed;
top: 0;
width: 100%;
height: 30px;
background-color: red;
z-index: 100;
}
This works as I want except when I tap a input field and the keyboard slides up. Then the positioning is totally discarded. The header is slided higher up outside the visable view. It returns to its place after closing the keyboard again.
I have read that some mobile browser don't care about positioned fixed and absolute to make sure that a possibly small screen don't get covered with a fixed element. Is this true?
Is there a way around this?
I have tried setting the header to absolute when a input is focused. I read about it here, http://dansajin.com/2012/12/07/fix-position-fixed/. However, it doesn't seem to be working for me.
PhoneGap’s implementation of fixed positioning for iOS is poor when it comes to the virtual keyboard. I’ve tried a number of proposed solutions, including the one you linked to, but none of them worked satisfactorily. Disabling KeyboardShrinksView can cause the input field to get hidden under the keyboard.
I ended up going with this workaround, which simply hides the fixed header when the keyboard slides into view and shows it again after the keyboard slides out of view. I await a more complete fix, but this solution has the benefit of being clean and reliable. The 10 ms delay on show() is enough to prevent the header from momentarily flashing in the wrong place while the keyboard is sliding back down. The 20 ms delay on hide() prevents the header from popping up in the wrong place if the user goes directly from one input field to the next.
$(document).on('focus','input, textarea, select',function() {
setTimeout(function() {
$('header').hide();
},20);
});
$(document).on('blur','input, textarea, select',function() {
setTimeout(function() {
$('header').show();
},10);
});
I'm using PhoneGap and jQuery Mobile in my app. my problem is while I navigating from page A to the page B by one click everything is OK, but when I clicking double click on page A
and passing to next screen (page B) that isnt visable to the user at that second... the second click is passed to the page B and page B try to do the action that was pressed in page A.
Any ideas how to disable any clicks on page B and activate it only after event or page loads for 100%?
Not specific to jQuery Mobile, but you can throw up a "click prevention" DIV to intercept any events you would rather not be handled.
Create a DIV with the following styles:
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%;
background-color: transparent;
z-index: 999999;
transform: translateZ(999999px);
display: none;
Then when you need to prevent any interaction with the app, change that div's style from display:none to display:block. Voila, instant click prevention.
Of course, don't forget to remove it from the DOM or switch it back to display:none -- otherwise your user won't be able to interact with the app anymore.
Alternatively, if you can prevent the browser's default when processing the event, that works out pretty well too. Not sure how jQuery Mobile would do that, but it's easy on something like Hammer.js ( Hammer(element, {prevent_default: true}.on("tap", event_handler); ) If possible, this is the way I'd go, since it avoids touching the DOM (which might trigger reflow). But if you can't get it working any other way, the first method should work, even if a bit ugly.