Disable overscroll in iOS Safari - javascript

How can I prevent overscroll in Safari iOS?
I would use the touch gesture for navigate on a site but I can't.
I tried this:
$(window).on('touchstart', function(event) {
event.preventDefault();
});
But in this way I disabled all gesture, infact I can't zooming with pinch-in and pinch-out.
Any solutions?
Thanks.

This way will allow scrollable elements while still preventing the overscroll in the browser itself.
//uses document because document will be topmost level in bubbling
$(document).on('touchmove',function(e){
e.preventDefault();
});
//uses body because jquery on events are called off of the element they are
//added to, so bubbling would not work if we used document instead.
$('body').on('touchstart','.scrollable',function(e) {
if (e.currentTarget.scrollTop === 0) {
e.currentTarget.scrollTop = 1;
} else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
e.currentTarget.scrollTop -= 1;
}
});
//prevents preventDefault from being called on document if it sees a scrollable div
$('body').on('touchmove','.scrollable',function(e) {
e.stopPropagation();
});

This Should be the easiest way to accomplish this:
$(function() {
document.addEventListener("touchmove", function(e){ e.preventDefault(); }, false);
});
Hope this helps.
Best.

Related

On Click events fires multiple times whenever the browser is being resized

I have this mobile menu that I'm currently building at the moment and I'm facing an issue with on('click') events. Whenever I try resizing the browser the event fires multiple times. At first load the script and event works fine, but when I start resizing the browser the event fires multiple times.
Below is a sample of the code I'm working on. Is there a way it fires only when once after resizing. I tried a temporary solution but it does not seem to take effect.
(function($){
'use strict';
var mobileMenu = {
init : function() {
$('.region-primary-menu').addClass('primary-mobile-menu');
$('.primary-mobile-menu .menu.-primary > .menu-item').addClass('mobile-menu-item');
$('.primary-mobile-menu .menu.-primary > .mobile-menu-item').on('click', function() {
$(this).toggleClass('active');
console.log('click');
})
},
clear : function() {
$('.primary-mobile-menu, .mobile-menu-item').removeClass('primary-mobile-menu mobile-menu-item');
}
}
$(document).ready(function() {
if ($(window).width() < 1180) {
mobileMenu.init();
}
else {
mobileMenu.clear();
}
});
$(window).on('resize', function(e) {
var resizeTimer;
clearTimeout(resizeTimer);
var resizeTimer = setTimeout(function() {
if ($(window).width() < 1180) {
mobileMenu.init();
}
else {
mobileMenu.clear();
}
}, 100)
});
})(jQuery)
It is because of click event being attached in mobileMenu.init(); function. On resize, a new clickevent is getting attached. You can use jQuery.off
$('.primary-mobile-menu .menu.-primary > .mobile-menu-item').off('click').on('click',
Because in your $(window).on('resize', function (e)... you do this :
if ($(window).width() < 1180) {
mobileMenu.init();
}
And in the mobileMenu.init() function definition you attach an event listener, so whenever you resize the window beneath 1180 size, it's going to attach more event listeners.
$('.primary-mobile-menu .menu.-primary > .mobile-menu-item').on('click' ...
Anyways the other answer tells you how to remove the event listener, which is what you should do to fix it.

How to show toolbar ( and hide current ) when click on the next item?

how to show toolbar (and hide current) when i click on next similar element? in my code, when i click on next similar element, toolbar doesn't disappear, he disappears only if i firsly click on body and then on element, how to remove toolbar without clicking to body to show next toolbar? thx!
http://jsfiddle.net/wwL8fgr1/1/
$(".element").on('mouseup', function(e){
$('[el-button]').click(function(e){
e.preventDefault();
});
var toolbar = $('<div class="dm-popover"></div>');
if ( !$('.dm-popover').hasClass('in') ) {
setTimeout(function(){
toolbar.addClass('in');
},100);
$('body').prepend(toolbar);
}
toolbar.addClass('dm-link-frontend-control-top');
toolbar.css({
left: $(this).offset().left,
top: $(this).offset().top - toolbar.height() - 10
});
setTimeout(function(){
$('body').on('mouseup', function(e){
if($(e.target).closest(toolbar).length == 0){
$('body').unbind('click', arguments.callee);
toolbar.removeClass('in');
toolbar.remove();
}
});
}, 100);
e.stopPropagation();
});
You can try this
$(".element").on('mouseup', function(e){
$('[el-button]').click(function(e){
e.preventDefault();
});
if ( !$('.dm-popover').hasClass('in') )
{
var toolbar = $('<div class="dm-popover"></div>');
setTimeout(function(){
toolbar.addClass('in');
},100);
$('body').prepend(toolbar);
}
else
{
var toolbar = $('.dm-popover');
}
toolbar.addClass('dm-link-frontend-control-top');
toolbar.css({
left: $(this).offset().left,
top: $(this).offset().top - toolbar.height() - 10
});
setTimeout(function(){
$('body').on('mouseup', function(e){
if($(e.target).closest(toolbar).length == 0){
$('body').unbind('click', arguments.callee);
toolbar.removeClass('in');
toolbar.remove();
}
});
}, 100);
e.stopPropagation();
});
See the JSFiddle http://jsfiddle.net/wwL8fgr1/3/
The code responsible for removing the toolbar is here:
$('body').on('mouseup', function(e){
if($(e.target).closest(toolbar).length == 0){
$('body').unbind('click', arguments.callee);
toolbar.removeClass('in');
toolbar.remove();
}
});
Note this registers a mouseup handler on body. That's why you need to click on body to remove the toolbar. You can attach this handler to the second element, if that's what you expect.
EDIT
My guess is that you wanted to achieve something like in this fiddle. Note that is is suitable for 2 elements only, if you need more similar elements, you'd probably need to make a function to generate id's for you instead of storing them in data- attributes.
My opinion:
Your code seems overly complex - you're using timeouts, swapping css, mouseup instead of click, creating div elements on each click, preventing handler's propagation... Try to make it simpler by removing unnecessary stuff.

jQuery .hide() on .blur() not working in iOS web app

I have a web app which hides the bottom toolbar while typing to stop it going on top of the keyboard.
$(document).ready( function() {
$("#open").focus( function() {
$('#bottom').hide();
});
$("#open").blur( function() {
$('#bottom').show();
check();
});
});
$('#open'); is an <input> box.
Instead of hiding, the lower bar stays. The text 'loading' also appears beneath (for some reason). This is especially strange as I can't find it in the DOM when inspecting on my computer.
Link: www.scriptr.net/webapp
Try listening to a different ready event for mobile. Something like this
document.addEventListener("deviceready",onReady,false);
function onReady() {
$("#open").focus( function() {
$('#bottom').hide();
});
$("#open").blur( function() {
$('#bottom').show();
check();
});
}
just put this code on deviceReady function, work for me
document.addEventListener('focusout', function(e) {window.scrollTo(0, 0)});
function isTextInput(node) {
return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}
document.addEventListener('touchstart', function(e) {
if (!isTextInput(e.target) && isTextInput(document.activeElement)) {
document.activeElement.blur();
}
}, false);

Custom Context Menu on everything except "input" in jQuery

I want to add custom context menu with jQuery for the whole body of the page, except the textfields. How can I do that?
I have tried that code:
$('body:not(input)').bind('contextmenu', function(){
/*code*/
});
Check the srcElement before plugin executions. If it's not an input element, do trigger the contextmenu plugin:
$(document).on("contextmenu", function(e) {
if (!$(e.srcElement).is(":input")) { // if it's not an input element...
$(this).triggerTheContextMenuPlugin();
}
});
Use an event listener on the document and check if it was initiated by an input element.
$(document).on("contextmenu", function (e) {
if (e.target.tagName.toUpperCase() === "INPUT") {
console.log("context menu triggered");
}
});
Demo here
Inspired by Salman's solution.
You can stop the event propagation in all input elements, with the e.stopPropagation() function. In doing so, you keep the default behavior of the inputs elements:
$(function() {
$(document).on("contextmenu", function(e) {
alert("Context menu triggered, preventing default");
e.preventDefault();
});
$("input").on("contextmenu", function(e) {
e.stopPropagation();
});
});
JSFiddle Demo

listen for mouse events … except a div's overflow:scroll scrollbar?

Any suggestions for how to listen for mousedown on $(document) except a div's overflow:scroll scrollbar?
I am not sure what element the scrollbar is in order to refer to it...
You can check the target yourself with :
$(document).on('mousedown', function(e) {
console.log(e.target);
});
FIDDLE
The scrollbar is'nt really an element, and click handlers won't work, but it seems mousedown is fired, but will just give you the element the scrollbar belongs to.
To exclude just the scrollbar I'm guessing you will have to figure out it's size, and then check the mouse position on mousedown to see if it's within the scrollbar area.
​
<div class='scrollHolder' style='overflow:scroll;'>
<div class='scrollContent'>
</div>
</div>
$(document).on( "mousedown", function( event )
{
var onScrollbar = false;
if (event.target.className == "scrollHolder")
{
var s_c = $(event.target).children(".scrollContent");
if (event.pageX-s_c.offset().left > s_c.innerWidth())
{
onScrollbar = true;
}
}
});

Categories

Resources