I am making mobile web app in Html, css, javascript, jquery .
I am initializing iScroll on page .
iScroll is working fine .
Page contains textbox . It becomes not editable after iScroll intialization.
even z-index isn't useful here.
Yes, There is alternative ....
https://github.com/neave/touch-scroll
download example and put your text box and just try ...
My edited example is here http://www.mediafire.com/?uzb5wa0m5hd3dgq
Touch to scroll and you can edit text also ....
I have made my text box working in an iscroll enabled div
Just below the form elements add this javascript
var selectField = document.getElementById('input_field');
selectField.addEventListener('touchstart' /*'mousedown'*/, function(e) {
e.stopPropagation();
}, false);
This works for me in iphone 5.1
If you have a dom element listening to events like ontouchstart, the event first triggers on the element and then ultimately bubbles up to the DOM, where the browser picks it up and does it's browser related work - scrolling, checkboxes, etc.
On the other hand, iScroll prevents this event from bubbling up. The reason iScroll does this is to prevent the browser's default scrolling from kicking in.
The short answer: It's not possible to put a textbox inside iScroll.
Related
I have a hopefully rather simple Javascript question for you. I have a scrollable, static page which can show/hide a full frame overlay (hiding the whole page) using z-index. When the overlay is shown I create a new event listener to "keydown" in which I for example check for "ArrowDown". When the overlay is hidden, the listener is unsubscribed.
This works beautifully, except that the page below the overlay keeps scrolling up and down as it normally would. I thought I could stop that by using
event.stopPropagation()
which, however, does not help. How can I approach this?
Event.stopPropagation() Prevents the event from bubbling up the DOM, but does not stop the browsers default behaviour.
event.preventDefault();
this should work as it stops the browsers default behaviour.
I'm using Bootstrap select that converts native selects to twitter bootstrap dropdown lists.
I have the problem that the change event is not triggered on iOS or Android devices in normal browsers on the pc is it working. If I'm using the native element support of the library the change event is triggered on these devices.
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
var submitSearchForm = function() {
$(this).parents('form').submit();
};
$('.selectpicker').on('blur change', submitSearchForm);
Anyone an idea?
Tested (ios-safari and chrome, android chrome, desktop chrome & FF) and it worked fine for me.
jsfiddle: Demo with the plugin and latest Bootstrap
The problem is not with the plugin and it might be with some additional code.
Make some tiny changes for testing and debuging:
Remove blur event - it will submit your form when you click the select box, for some unknown reason the plugin focus and immediately blur the select-box when clicking the select-box.
Make sure you are firing your js on DOM-ready - use $(function(){ }); or put your script before the closing BODY tag.
Change the selector - by default the plugin recognizes the .selectpicker and just for testing lets make sure it doesn't add some unwanted events that may cause unwanted behavior.
Use the chrome devtools with the extension jQuery debuger installed. select the select box with the inspector -> go to "jQuery events" tab and make sure the "change" event is attached and only him, another "change" event may cause the problem.
Make sure there is no ~"submit" event attached to the form - it may stop the form from submitting.
Make sure the action attribute of the form tag is set correctly or not defined at all. Be sure the select box is a child of the form and that the form is closed properly.
Obviously the problem is caused by your additional code that we can't see - if those tests won't work for you add your code or a demo that reproduce the problem you have and we will be more capable to help you.
Ok, it's probably because of the rendering of the bootstrap select in the page. This should work
$(document).on('change','.selectpicker',submitSearchForm)
or, in alternative
$("body").on('change','.selectpicker',submitSearchForm)
I'm using the idangerous "Swiper" slider. One of my slides has a textarea in it that is causing issues. Everything is OK on the desktop, but on mobile when entering text in the textarea, Swiper seems to reinitialize and return to the first slide.
As this happens on mobile only, I am guessing it is related to one of the touch events firing in the text area.
As suggested in another post I have applied:
$('textarea#text_area_name').on('touchstart mousedown', function(e){
e.stopPropagation()
})
This didn't solve the problem, so I extended it to include all touch events. And then all parents (until the swiper wrapper). Still with no success.
I have tried using alerts to show which touch events are firing. But I can't see the event that is fired immediately before the before swiper resets.
Does anyone have any experience of using a textarea within the idangerous swiper slider? Or any ideas on what event may be causing the issue and how to prevent it?
Sometimes when you write the question down the answer becomes clearer...
I was reinitializing Swiper on window.resize to manage the dynamic sizing. The resize event was getting triggered by the textarea on mobile devices. Maybe this is due to the soft keyboard popping up. Anyway, removing the reinitialize on resize solved the problem.
We are developing a site with fluid layout (so it works on mobile too), that adjusts itself when resizing the window.
Everything is ok but an area when we use fancybox to zoom the images.
What I want it to disable fancybox when I call our "mobile ajusts" function (triggered by window.resize already) on our gallery, and re-enable it again when when going back to the "desktop" version.
I've tried a lot of things like preventDefault on 'click', using the $('.case-gallery a').fancybox($.fancybox.cancel) and stuff like that, but it seems that as fancybox is already stored in the DOM element, I'm not being able to disable it and enable it again on the fly - and my knowledge of JS is not really advanced.
Any help?
try this to listen to fancybox onStart event and then use $.fancybox.cancel() (don't forget (). It's a function).
I have the same problem, and here is my current working thought:
jQuery check if event exists on element
use this answer to check a variable property to the DOM... like check if DOM.style.whatever > 10. just my working thought. I have a site that has a carousel of products in DIVs, and i want the not-displayed products to not be clickable based on their DIVs opacity. I'll repost in a day if i figure it out.
Background: I am creating a table reminiscent of whenisgood.net, in that it has click-n-drag toggling for table elements. I want to call different types of toggling code when the left, middle, and right mouse buttons activate a mousedown event.
By using JQuery, I'm off to a good start.
$(".togglable").bind("contextmenu", function() {return false;});
$(".togglable").bind("mousedown", function(e){
e.preventDefault();
toggle(this, e);
});
In the toggle() function I can use e.which to determine what button was clicked.
The punchline: I used e.preventDefault() hoping that it would stop the middle click default behavior of scrolling. It didn't. What can I do to stop the scroll action from activating?
See also "Triggering onclick event using middle click"
Middle-click can be disabled with Javascript, but only in IE, WebKit, and Konquerer. Firefox requires a config file edit. It's 2017 and firefox 50 supports this.
This is an old question...but if I'm understanding it properly, you want to disable scrolling via the middle mouse button click.
Nowadays, you can do this with a single line of vanilla JS:
document.body.onmousedown = function(e) { if (e.button === 1) return false; }
Currently, my solution is this: (more jquery!)
$(".togglable").wrap(
"<a href='javascript:void(0);'
onclick='return false;'></a>"
);
By wrapping it in a link (via jquery wrap), browsers think it's a link and don't scroll on middle click, even if you drag your mouse around. With this setup, and my situation, there are a couple (minor) gotchas.
Firefox will open a new tab when you middle click, but only if you don't drag. Opera will open a new tab when you middle click, drag or not. That's why I used href='javascript:void(0);' instead of just href='#'--so that the client's browser wouldn't load a whole page, just a blank page with a strange url.
But this solution works like a charm on Chrome and Safari. It works well with IE8, except that now when I left-click-n-drag, it changes the pointer to a "can't do that" symbol, since it thinks I want to drag the link somewhere. Untested on older versions of IE.
It is a bit old thread already, but I've tried hard to circumvent this in Firefox (I'm still using 3.6) and I'll share my findings, maybe someone will find it helpful.
Check that if you create an empty HTML file (or a small document with couple of paragraphs) and load it in Firefox, middle click scrollbar does not appear. This is because <body>'s width and height are smaller than window size. If you put a lot of <br>'s, this is not the case and scrollbar appears on middle click.
Google managed to prevent middle click scroller to appear in Google Maps in Firefox by making sure (through JS) that <body> size is always less than window size, plus additionally putting
<body style="overflow:hidden;">.
This is hardly achievable in general case, but sometimes might be useful.