I have been trying to solve this weird problem with scrolling in my website. The scrolling works fine when viewed on a Desktop Computer. However, it doesn't work in mobile phones. Do, I need to use some javascript to solve this issue?Or, can it be done just with CSS.
Here is my CSS snippet :
#popup-div{
height: 100%;
overflow:scroll;
}
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
function touchScroll(id){
if(isTouchDevice()){ //if touch events exist...
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollTop+event.touches[0].pageY;
event.preventDefault();
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollTop=scrollStartPos-event.touches[0].pageY;
event.preventDefault();
},false);
}
}
//On page load
touchScroll('popup-div');
Chris has shown a best working example
http://chrismbarr.github.io/TouchScroll/
Related
First of all: I know there are some topics about this already, but none of them seem to help me.
I tried all methods I could find to disable scrolling on one of my pages, but none of them work and so I come to seek help here.
What I tried:
Creating a css class which hides overflow (same with attr.noScroll)
setScrollDisabled
set a div as ion-fixed
ion-content no-bounce
::-webkit-scrollbar
overflow-scroll="false"
This is what my page looks like ...
It has this white bar on the bottom of the screen when I scroll down
I only added a background picture whose width I set to 100% and height:auto (height: 100% produces the same white bar)
For reference, here is my code if it helps
<ion-content>
<img class="bgc" src="assets/background.png">
</ion-content>
The scroll event cannot be canceled. But you can do it by canceling these interaction events:
Mouse & Touch scroll and Buttons associated with scrolling.
http://output.jsbin.com/xatidu/4/ <-- Working version
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
if (window.addEventListener) // older FF
window.addEventListener('DOMMouseScroll', preventDefault, false);
window.onwheel = preventDefault; // modern standard
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
window.ontouchmove = preventDefault; // mobile
document.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll() {
if (window.removeEventListener)
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.ontouchmove = null;
document.onkeydown = null;
}
To fix it, you should understand what's causing it, so you probably want to read this.
In some special cases, you might be able to hide that white space by disabling scrolling, but that's really not how you should approach this issue.
Instead, you should just remove the white space. You can do it by applying
display: block;
... or ...
float: left;
width: 100%;
height: auto;
to your <img> element.
As an alternative, you can change your markup to:
<ion-content>
<img class="bgc" src="assets/background.png"
/></ion-content>
I have a pretty annoying issue that (according to several sources, here is one) was already solved with iOS 8.
I am using $(window).scroll(function({ /*do stuff*/ }) to check if an element is on the screen and if that is the case something else happens. Pretty simple stuff. But it seems like that iOS devices "render" the stuff that the jQuery does only after the scroll has finished.
Here is a snippet of the code:
if($(window).width() < 601) {
$(".revealer-box").show();
$(window).scroll(function() {
if( isOnScreen(".revealer-box") ) {
if(flagCallG) {
$(".some-element").css("display", "flex");
$(".some-element").css("display", "-webkit-flex");
/* other unimportant stuff*/
flagCallG = false;
} else {
$(".some-element").css("display", "flex");
$(".some-element").css("display", "-webkit-flex");
}
} else {
$(".some-element").css("display", "none"); }
});
}
I use the iOS simulator on the Mac and also tried it on a real device. You scroll down and after you lift your finger the changes get visible.
i have a big problem with the hover event on mobile phone like iphone, and you have tap two time to go to some link i find a code on internet to disable hover the code:
$(document).ready(function() {
$('a').on('click touchend', function(e) {
var el = $(this);
var link = el.attr('href');
window.location = link;
});
});
that code is work fine but is come with another problem, the problem is any link with target="_blank" This has its flaws. If you click a link with target="_blank" it will open in the same window AND in a new window.
any one can give me a perfect solution to disable hover effect from iphone or any mobile device,
thank you
You can try this:
$(document).ready(function() {
$('a').on('click touchend', function(e) {
var el = $(this);
var link = el.attr('href');
if (el.attr('target') == '_blank') {
window.open(link);
} else {
window.location = link;
}
return false;
});
});
I want to know how to disable right click on images using jQuery.
I know only this:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(document).bind("contextmenu",function(e) {
return false;
});
});
</script>
This works:
$('img').bind('contextmenu', function(e) {
return false;
});
Or for newer jQuery:
$('#nearestStaticContainer').on('contextmenu', 'img', function(e){
return false;
});
jsFiddle example
what is your purpose of disabling the right click. problem with any technique is that there is always a way to go around them. the console for firefox (firebug) and chrome allow for unbinding of that event. or if you want the image to be protected one could always just take a look at their temporary cache for the images.
If you want to create your own contextual menu the preventDefault is fine. Just pick your battles here. not even a big JavaScript library like tnyMCE works on all browsers... and that is not because it's not possible ;-).
$(document).bind("contextmenu",function(e){
e.preventDefault()
});
Personally I'm more in for an open internet. Native browser behavior should not be hindered by the pages interactions. I am sure that other ways can be found to interact that are not the right click.
For Disable Right Click Option
<script type="text/javascript">
var message="Function Disabled!";
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
</script>
In chrome and firefox the methods above didn't work unless I used 'live' instead of 'bind'.
This worked for me:
$('img').live('contextmenu', function(e){
return false;
});
For modern browsers all you need is this CSS:
img {
pointer-events: none;
}
Older browsers will still allow pointer events on the images, but the CSS above will take care of the vast majority of visitors to your site, and used in conjunction with the contextmenu methods should give you a very solid solution.
The better way of doing this without jQuery:
const images = document.getElementsByTagName('img');
for (let i = 0; i < images.length; i++) {
images[i].addEventListener('contextmenu', event => event.preventDefault());
}
Would it be possible to leave the ability to right click and download just when done a separate watermark is placed on the image. Of course this won't prevent screen shots but thought it may be a good middle ground.
You could try this :
var message="Sorry, right-click has been disabled";
function clickIE() {
if (document.all) {
(message);
return false;
}
}
function clickNS(e) {
if (document.layers || (document.getElementById && !document.all)) {
if (e.which == 2||e.which == 3) {
(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = clickNS;
} else {
document.onmouseup = clickNS;
document.oncontextmenu = clickIE;
}
document.oncontextmenu = new Function("return false")
Checkout a demo here
A very simple way is to add the image as a background to a DIV then load an empty transparent gif set to the same size as the DIV in the foreground. that keeps the less determined out. They cant get the background without viewing the code and copying the URL and right clicking just downloads the transparent gif.
This should work
$(function(){
$('body').on('contextmenu', 'img', function(e){
return false;
});
});
Is there any way to completely disable web page scrolling in an iPhone web app? I've tried numerous things posted on google, but none seem to work.
Here's my current header setup:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
doesn't seem to work.
Change to the touchstart event instead of touchmove. Under One Finger Events it says that no events are sent during a pan, so touchmove may be too late.
I added the listener to document, not body.
Example:
document.ontouchstart = function(e){
e.preventDefault();
}
document.addEventListener('touchstart', function (e) {
e.preventDefault();
});
Do not use the ontouchmove property to register the event handler as you are running at risk of overwriting an existing event handler(s). Use addEventListener instead (see the note about IE on the MDN page).
Beware that preventing default for the touchstart event on the window or document will disable scrolling of the descending areas.
To prevent the scrolling of the document but leave all the other events intact prevent default for the first touchmove event following touchstart:
var firstMove;
window.addEventListener('touchstart', function (e) {
firstMove = true;
});
window.addEventListener('touchmove', function (e) {
if (firstMove) {
e.preventDefault();
firstMove = false;
}
});
The reason this works is that mobile Safari is using the first move to determine if body of the document is being scrolled. I have realised this while devising a more sophisticated solution.
In case this would ever stop working, the more sophisticated solution is to inspect the touchTarget element and its parents and make a map of directions that can be scrolled to. Then use the first touchmove event to detect the scroll direction and see if it is going to scroll the document or the target element (or either of the target element parents):
var touchTarget,
touchScreenX,
touchScreenY,
conditionParentUntilTrue,
disableScroll,
scrollMap;
conditionParentUntilTrue = function (element, condition) {
var outcome;
if (element === document.body) {
return false;
}
outcome = condition(element);
if (outcome) {
return true;
} else {
return conditionParentUntilTrue(element.parentNode, condition);
}
};
window.addEventListener('touchstart', function (e) {
touchTarget = e.targetTouches[0].target;
// a boolean map indicating if the element (or either of element parents, excluding the document.body) can be scrolled to the X direction.
scrollMap = {}
scrollMap.left = conditionParentUntilTrue(touchTarget, function (element) {
return element.scrollLeft > 0;
});
scrollMap.top = conditionParentUntilTrue(touchTarget, function (element) {
return element.scrollTop > 0;
});
scrollMap.right = conditionParentUntilTrue(touchTarget, function (element) {
return element.scrollWidth > element.clientWidth &&
element.scrollWidth - element.clientWidth > element.scrollLeft;
});
scrollMap.bottom =conditionParentUntilTrue(touchTarget, function (element) {
return element.scrollHeight > element.clientHeight &&
element.scrollHeight - element.clientHeight > element.scrollTop;
});
touchScreenX = e.targetTouches[0].screenX;
touchScreenY = e.targetTouches[0].screenY;
disableScroll = false;
});
window.addEventListener('touchmove', function (e) {
var moveScreenX,
moveScreenY;
if (disableScroll) {
e.preventDefault();
return;
}
moveScreenX = e.targetTouches[0].screenX;
moveScreenY = e.targetTouches[0].screenY;
if (
moveScreenX > touchScreenX && scrollMap.left ||
moveScreenY < touchScreenY && scrollMap.bottom ||
moveScreenX < touchScreenX && scrollMap.right ||
moveScreenY > touchScreenY && scrollMap.top
) {
// You are scrolling either the element or its parent.
// This will not affect document.body scroll.
} else {
// This will affect document.body scroll.
e.preventDefault();
disableScroll = true;
}
});
The reason this works is that mobile Safari is using the first touch move to determine if the document body is being scrolled or the element (or either of the target element parents) and sticks to this decision.
If you are using jquery 1.7+, this works well:
$("donotscrollme").on("touchmove", false);
This should work. No more gray areas at the top or bottom:)
<script type="text/javascript">
function blockMove() {
event.preventDefault() ;
}
</script>
<body ontouchmove="blockMove()">
But this also disables any scrollable areas. If you want to keep your scrollable areas and still remove the rubber band effect at the top and bottom, see here: https://github.com/joelambert/ScrollFix.
Disable:
document.ontouchstart = function(e){ e.preventDefault(); }
Enable:
document.ontouchstart = function(e){ return true; }
'self.webView.scrollView.bounces = NO;'
Just add this one line in the 'viewDidLoad' of the mainViewController.m file of your application. you can open it in the Xcode and add it .
This should make the page without any rubberband bounces still enabling the scroll in the app view.
The page has to be launched from the Home screen for the meta tag to work.
document.ontouchmove = function(e){
e.preventDefault();
}
is actually the best choice i found out it allows you to still be able to tap on input fields as well as drag things using jQuery UI draggable but it stops the page from scrolling.
I tried above answers and particularly Gajus's but none works. Finally I found the answer below to solve the problem such that only the main body doesn't scroll but other scrolling sections inside my web app all work fine.
Simply set position fixed for your body:
body {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}