I have a web application running on iPad. This application contains a Kendo UI Accordion inside it.
When the content of the page is more than the size of the screen and when I want to scroll, normal page scrolling happens (as expected). But when try to scroll the Kendo Accordion, the page scrolling happens instead of accordion scrolling (unexpected).
I was able partly handle this issue by applying solution given by Chris Barr.
After applying this solution the accordion is getting scrolled instead of the whole page which I wanted.
But the problem is when I click the items on the Accordion, the accordion item doesn't get expanded. How can I get to work this.
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);
}}
Remove event.preventDefault() in touchstart event listener. It will allow you to click on links inside the scrollable area.
Related
I am having the following issue with click/touchstart event on Android (as far as I know only happening on Android),
1. the element triggers a modal window.
2. one of the buttons/links inside this modal gets triggered instantly without giving the user the option to make a choice.
It is of course required for the visitor/user to view the modal content before being redirected to a link to another page from one of those buttons.
I believe this is due to the 'touchstart' event bind to this div, which I am using since click events on divs for touch devices don't work.
I am using jQuery to make this work, and on iOS there doesn't seem to appear any issue.
$(document).on('click touchstart','.mydiv', function(e) {
e.preventDefault();
// open modal
});
Any suggestions please.
Try this:
$(.mydiv).on('touchstart', function(e) {
e.preventDefault();
// open modal
});
cheers
Let's say we have a simple HTML page with div container that has vertical scrollbar. The whole page also contains vertical scrollbar:
I would like to disable the main body scrollbar feature (but it should be visible as it is) and allow user to scroll only the container's content.
I know that the only option to disable scrolling is catching the wheel event and calling preventDefault on it. However it disables all scrollbars.
Is it possible to obtain, which scroll will be affected with the event (container's or global one) and conditionally call the preventDefault method?
The solution below is written in jQuery, but it can be done in plain Javascript equivalent code as well:
$(document).on('DOMMouseScroll mousewheel', context, function(ev) {
//Do some stuff
ev.stopPropagation(); //Prevents ancestors of context of handling the event
});
Working in HTML, CSS and JS (technically Angular, if you think it's significant)
I have a Header menu with dropdown sub-menus and sub-sub-menus when viewed in desktop style.
On a PC the sub-menus appear on hover and clicking on the entry takes you somewhere.
Clicking on the root entry takes you somewhere different - so it has 2 purposes in life: be a link to a location AND be the hover trigger for the dropdown menu.
Not all root elements have a sub-menu.
There's a separate mobile menu, based on width media queries, but Tablets (especially in landscape mode) display in desktop style, and it's giving me gyp!
On tablets (tested in Safari iOS and in Chrome for iPad) the browser does some deep magic!...
For elements that have No dropdown then clicking on them takes you to
the link.
For elements that DO have a dropdown sub-menu, then
the first click has the effect of activating the hover - it doesn't activate the link but does reveal the menu.
The second click then activates the link.
Lovely!
Problem is... the menus don't disappear if you tap off them.
Tapping the page in general does nothing (no click-event raised)
Tapping something on the page that is clickable DOES clear the menu, and also invokes the click action for whatever you clicked.
My first thought was to put a transparent div across the whole rest of the page, above the page but below the menu, and bind a click event that would clear the menu.
But, I can't get the transparent layer AND the underlying page to both be clicked. See here for the problems I hit there.
Putting the click event on body (so that it gets triggered by bubble up) doesn't work (click event just isn't fired.)
I tried adding ngTouch, and that does cause click events to be triggered everywhere, but also breaks the behaviour of the sub-menus opening - all the links trigger immeidately and you can't reach the sub-menus.
Any thoughts at all? Help!
You just need to check if click happened outside of dropdown menu.
Something like:
$('html').click(function (e) {
if (e.target.id == '#yourDropdown') {
//do nothing and let the click be handled
} else {
$('#yourDropdown').hide();
// still let the click be propagated
}
});
Rather then relying on 'mobile browser magic' I would implement it myself. No Angular experience, but in jQuery the code would probably look something like this:
$('.menu li').on('click', function(e) {
var $target = $(this);
var $sub = $target.children('ul');
// only if sub and not yet active
if ($sub.length && ! $target.hasClass('active')) {
// show sub
$target.addClass('active');
// done
e.stopPropagation();
return false;
}
// normal click action triggered here
alert($target.children('a').text());
e.stopPropagation();
});
$('html').on('click', function(e) {
// clear all active menu items
$('.menu > li.active').removeClass('active');
});
And a quick example: http://jsfiddle.net/b0aqr1wc/
:Sigh:
A colleague I discussed this with this morning solved this instantly:
Use the "cover sheet" approach, but have the sheet collapse itself at the same time as collapse the menu.
You lose the ability to interact with the underlying page for only 1 tap - and that tap will visibly collapse the menu, so the user will have a prompt to try again.
I am using the jQuery Colorbox library which is a library of creating Modals that can load images and other content in a nice popup modal window.
I am using it on my portfolio/projects page to allow clicking on a screenshot image and it will load a larger view of the image into a popup modal window. When opened in the Colorbox modal, I can use my keyboards LEFT and RIGHT keys to navigate between all my images that have colorbox attachedon the page.
My issue is that I also have some JavaScript setup on my project page to allow the user to use LEFT and RIGHT arrow keys to navigate to the Next and Previous project page.
So when viewing a Project page, left and right arrow keys works perfectly to loads and browse through my whole portfolio. As soon as I click on an image which loads in a Colorbox modal window. I run into my issue!
Now my arrow keys for Project navigation continue to work but my Colorbox key navigation does not work.
Colorbox fires off some EVENTS when a modal is opened and closed though.
So I am hoping that when a modal is opened, I can disable my Projects keyboard navigation.
When that same Modal is closed, I can restore the keyboard navigation functionality back to my Projects!
The problem is I do not know how to do this and need some help please!?
I have useful code snippets below...
As well as the Documentation site for the jQuery Colorbox Modal library here http://www.jacklmoore.com/colorbox/
This is the code that handles my Project keyboard navigation.
// Handle Right and Left Keyboard Arrow presses to navigate to Next or Previous Project
$("body").keydown(function(e) {
if(e.which === 37) { // left
$("#page-left").parent("a")[0].click();
}
else if(e.which === 39) { // right
$("#page-right").parent("a")[0].click();
}
});
This is the code that handles my Colorbox initiation.
// Setup my Colorbox modal for project images
$(".projectFUllModal").colorbox({
rel:'projectFUllModal',
transition:"none",
width:"90%",
height:"90%"
});
This code below is example code from the Colorbox docs for how to use the Events it can fire off.
// Colorbox Event for Opening a Modal
$(document).bind('cbox_open', function(){
// Disable my Project keyboard navigation functionality
});
// Colorbox Event for Closing a Modal
$(document).bind('cbox_closed', function(){
// Restore my Project keyboard navigation functionality
});
Available Colorbox Events
cbox_open triggers when Colorbox is first opened, but after a few key variable assignments take place.
cbox_load triggers at the start of the phase where content type is determined and loaded.
cbox_complete triggers when the transition has completed and the newly loaded content has been revealed.
cbox_cleanup triggers as the close method begins.
cbox_closed triggers as the close method ends.
This should actually be pretty easy to fix, via adding a boolean var:
// Handle Right and Left Keyboard Arrow presses to navigate to Next or Previous Project
var canUseArrows = true;
$("body").keydown(function(e) {
if(e.which === 37 && canUseArrows) { // left
$("#page-left").parent("a")[0].click();
}
else if(e.which === 39 && canUseArrows) { // right
$("#page-right").parent("a")[0].click();
}
});
And the functions would simply be changed to:
// Colorbox Event for Opening a Modal
$(document).bind('cbox_open', function(){
canUseArrows = false;
});
// Colorbox Event for Closing a Modal
$(document).bind('cbox_closed', function(){
canUseArrows = true;
});
Here's a fiddle showing it working, with checkbox checked simulating a cbox being open.
I am not sure when this was added, but now you can use the arrowKey option to disable the arrow keys navigation in colorbox.
I need to disable the default iPAD scrolling (via capturing touchmove on the body) but still allow a list on my page to scroll.
I tried:
$('body').on('touchmove', function(e) { e.preventDefault(); });
$('itemList').on('touchmove', function(e) { alert('hi'); e.stopPropagation(); });
But it seems that itemList's touchmove is not being called at all. on the iPAD nothing gets scrolled.
see http://jsfiddle.net/e8dcJ
Any ideas how to solve this ?
Thanks!
maybe don't apply the event to the body, which covers everything. Instead, apply the event to a the various elements you want to prevent scrolling. Alternately, wrap everything in a DIV except the list and then set the position to fixed and add the event.