Re-arranging columns and click is now working on touch devices. Now facing the issue with scrolling. I tried to resolve it with iScroll plugin but it didn't work. The screenshot I took from device mode of chrome browser.
Table columns can be added on-the-fly and so number of columns may vary.
Is there any css way to work scrolling properly ??? If not how do I implement it with javascript or jquery ???
Update:
-webkit-overflow-scrolling: touch; is not working.
Update 2:
Tried with below code:
if (Modernizr.touch) {
$('.container-fluid').css('overflow', 'auto');
}
and this one as well:
if (Modernizr.touch) {
//iScroll plugin
var myScroll = new IScroll('#tblGrid', {
scrollbars: true
});
}
None of them worked.
Update 3:
Below is the code to enable dragging of table columns and click event:
var clickms = 200;
var lastTouchDown = -1;
function touchHandler(event) {
var touch = event.changedTouches[0];
var d = new Date(); var type = "";
switch (event.type) {
case "touchstart": type = "mousedown"; lastTouchDown = d.getTime(); break;
case "touchmove": type = "mousemove"; lastTouchDown = -1; break;
case "touchend": if (lastTouchDown > -1 && (d.getTime() - lastTouchDown) < clickms) { lastTouchDown = -1; type = "click"; break; } type = "mouseup"; break;
default: return;
}
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
touch.screenX, touch.screenY,
touch.clientX, touch.clientY, false,
false, false, false, 0, null);
touch.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
function init() {
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
$(document).ready(function () {
init();
var myScroll;
function loaded() {
myScroll = new IScroll('#tblGrid', {
mouseWheel: true,
scrollbars: true,
click: true,
eventPassthrough: true,
tap: true
});
}
if (Modernizr.touch) {
loaded();
}
});
Update 4:
I tried to use iScroll 4 and scrolling now works. But when I rearrange/drag-drop columns, the scrolling also works and in that case Drag-drop does not work properly due to touchmove event.
And jquery.floatThead also stopped working which fixes the headers.
I'm not entirely sure what your end goal is, but let me see if I understand:
You want to be able to scroll your table horizontally on touch devices. This works right now.
You want to be able to drag and drop your columns to rearrange them. You want to do this by dragging the column headers. Right now, when you do this the touchmove listener is causing the whole table to scroll horizontally when you drag a column, which is a problem.
If I'm correct on the two points above, then I think what might fix your problem is to change init() so that it adds the touch listeners only to your table headers (instead of the entire document). Something like this:
function init() {
$( "th" ).each(function( index ) {
this.addEventListener("touchstart", touchHandler, true);
this.addEventListener("touchmove", touchHandler, true);
this.addEventListener("touchend", touchHandler, true);
this.addEventListener("touchcancel", touchHandler, true);
});
}
You would also need to apply the four event listeners to any new column headers added to the table (wherever you're currently handling you 'add column' logic).
I'm not certain this will 100% work - if you could post a repro of the problem somewhere like http://jsfiddle.net/, it might be easier to help you debug it.
Related
This is my first time implementing FancyBox in a project for me. I have separated the image from the link. So when you hover over the image the link to view the large image appears. Everything there works fine. My issues is the window keeps jumping/scrolling to the top when the link is clicked. I have used jquery to disable the default action of it by using preventDefault but that didn't solve my issue. Any suggestions? You can see what I'm trying to accomplish at www.labpixls.com
I need to resolve this soon. I am creating a wordpress theme I plan on giving to the wp community.
The problem is that fancyBox changes the overflow value of the body in order to hide the browser scrollbars. This can actually be done with a helper in Fancybox 2.
$('.image').fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
}
}
});
I realize this question has been asked a while ago, but I think I have found a good solution for it.
The problem is that fancy box changes the overflow value of the body in order to hide the browser scrollbars.
As Thorn points out, we can stop fancy box from doing this by adding the following parameters:
$('.image').fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
}
}
});
But, now we can scroll the main page while looking at our fancy box window. It is better than jumping to the top of the page, but it is probably not what we really want.
We can prevent scrolling the right way by adding the next parameters:
$('.image').fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
}
},
'beforeLoad': function(){
disable_scroll();
},
'afterClose': function(){
enable_scroll();
}
});
And add these functions from galambalaz. See: How to disable scrolling temporarily?
var keys = [37, 38, 39, 40];
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
}
function keydown(e) {
for (var i = keys.length; i--;) {
if (e.keyCode === keys[i]) {
preventDefault(e);
return;
}
}
}
function wheel(e) {
preventDefault(e);
}
function disable_scroll() {
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = wheel;
document.onkeydown = keydown;
}
function enable_scroll() {
if (window.removeEventListener) {
window.removeEventListener('DOMMouseScroll', wheel, false);
}
window.onmousewheel = document.onmousewheel = document.onkeydown = null;
}
This is my first post so ill try to explain it clear:
Im working on a web application, but the main point is, that i want let my users feel like its a native app. In a native app you cant scroll like in iOS safari so i tried to disable scrolling with event.preventDefault. This works great except that form elements and links arent tapable anymore. My solution to that was this little script, but if you start a touch on one of the escaped elements, it scrolls anyway. Not a big deal but its driving me insane...
notes to script:
isTouch returns true/false if its a touchable device
the .contains method returns true/false if an array contains a string
if (isTouch) {
window.addEventListener("touchstart", function (evt) {
var target = evt.touches[0].target;
var tags = 'a input textarea button'.split(' ');
if ( tags.contains(target.tagName) === false ) {
evt.preventDefault();
}
}, false);
}
EDIT
My main question is, is there a solution to fire the tap event without a touchmove event to allow scrolling
EDIT 2
I solved the problem. My solution is, to emulate the events on interactive elements:
var eventFire = function (el, etype) {
if (el.fireEvent) {
(el.fireEvent('on' + etype));
}
else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
if (isTouch) {
window.addEventListener("touchstart", function (evt) {
var target = evt.touches[0].target;
var foc = 'input textarea'.split(' ');
var clck = 'a button'.split(' ');
if ( foc.contains(target.tagName) ) {
target.focus();
eventFire(target,'click');
evt.preventDefault();
}
else {
evt.preventDefault();
}
}, false);
}
I'm trying to write mechanism on site which prevents users to scroll normally. When user scrolls down or up the site is smoothscrolling to next or previous slide (depends on scrolling direction) and stops there (like when you click on a navbar). See live preview: CLICK HERE
But there's an annoying problem. It works almost good in FF (no jumping), but breaks in another browsers (Chrome, Safari, IE)- it jumps. How can I prevent this?Here are snippets from my code.
I have a ScrollControl object where I prevent scrolling:
scrollControl = {
keys : [32, 37, 38, 39, 40],
scrollTimer : 0,
lastScrollFireTime : 0,
preventDefault : function(e){
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
},
keydown : function(e){
for (var i = scrollControl.keys.length; i--;) {
if (e.keyCode === scrollControl.keys[i]) {
scrollControl.preventDefault(e);
return;
}
}
},
wheel : function(e){
scrollControl.preventDefault(e);
},
disableScroll : function(){
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', scrollControl.wheel, false);
}
window.onmousewheel = document.onmousewheel = scrollControl.wheel;
document.onkeydown = scrollControl.keydown;
},
enableScroll : function(){
if (window.removeEventListener) {
window.removeEventListener('DOMMouseScroll', scrollControl.wheel, false);
}
window.onmousewheel = document.onmousewheel = document.onkeydown = null;
}
}
Then I'm listening if mousewheel occurs and trying to execute function only once (I'm using this plugin to detect mousewheel PLUGIN )
$(window).mousewheel(function(objEvent, intDelta){
var minScrollTime = 1000;
var now = new Date().getTime();
function processScroll() {
console.log("scrolling");
if(intDelta>0){
$.smoothScroll({
speed:med.effectDuration,
easing:med.scrollEase,
scrollTarget:med.prevPage,
afterScroll: function(){
med.currentPage = med.prevPage;
med.setActiveNav();
med.setSlides();
med.runAnimations();
}});
}else if(intDelta<0){
//scrollControl.disableScroll();
$.smoothScroll({
speed:med.effectDuration,
easing:med.scrollEase,
scrollTarget:med.nextPage,
afterScroll: function(){
med.currentPage = med.nextPage;
med.setActiveNav();
med.setSlides();
med.runAnimations();
}});
}
}
if (!scrollControl.scrollTimer) {
if (now - scrollControl.lastScrollFireTime > (3 * minScrollTime)) {
processScroll(); // fire immediately on first scroll
scrollControl.lastScrollFireTime = now;
}
scrollTimer = setTimeout(function() {
scrollControl.scrollTimer = null;
scrollControl.lastScrollFireTime = new Date().getTime();
processScroll();
}, minScrollTime);
}
});
I'm executing scrollControl.disableScroll function on DOM ready event when users starts website. And actually scrolling once prevention doesn't works prefectly and sometimes it triggers smoothscrolling twice. What am I doing wrong? Thanks in advance for any suggestions!
I had the same issue the Mouse Wheel Event was fired Twice.
function wheelDisabled(event){
event.preventDefault();
event.stopImmediatePropagation();
return false;
}
Also you might use both of these Events.
window.addEventListener('DOMMouseScroll', wheel, false);
window.addEventListener('mousewheel', wheel, false);
Instead of trying to prevent scrolling with Javascript, I would try a different approach. This approach includes CSS and Javascript to make sure the website is never bigger then the viewport (hence no scrollbars!).
Use CSS to force the main wrapping div (a div that wraps all the content on the site) to have overflow: hidden. Then use Javascript to dynamically ensure that the height and width of this div is always equal to the viewport's height and width.
In this scenario, if you want to implement scrolling in a predefined way you choose you can dynamically add negative margin-top (or negative margin-left for horizontal scrolling) to the parent wrapping div to give it the appearance that it is scrolling.
I have a little question of the touch handler...it sometimes work on touch sometimes not, and it cant read my data after i draw it, and it draw with straight line, so i wonder what problem and what i did wrong? please help me..i already put my code into jsfiddle..please help me (http://jsfiddle.net/Frebu/1/)
function touchHandler(event) {
var touches = event.changedTouches,
first = touches[0],
type = "";
switch (event.type) {
case "touchstart": type = "mousedown"; break;
case "touchmove": type = "mousemove"; break;
case "touchend": type = "mouseup"; break;
default: return;
}
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
function init(id) {
document.getElementById(id).addEventListener("touchstart", touchHandler, true);
document.getElementById(id).addEventListener("touchmove", touchHandler, true);
document.getElementById(id).addEventListener("touchend", touchHandler, true);
}
$(document).ready(function() {
init('myCanvas');
});
My recomendation is to use hammer.js, it's a great touch library (that fallbacks to mouse on browsers).
http://eightmedia.github.com/hammer.js/
Aside from that, i didn't have any issues testing the fiddle on Chrome simulating touch events. And altought weird, the code seems to be fine.
I'm using JavaScript to detect taps in a page I'm showing in a UIWebView, like so:
<div id="wrapper">
Apple
</div>
<script>
document.getElementById("wrapper").addEventListener('click', function() {
document.location = 'internal://tap';
}, false);
</script>
I'm intercepting links with my web view delegate, and look for "internal://tap". When I get that, I prevent the web view from navigating, and respond to the tap. However doing this I lose the ability to select text. Tapping the link does still work correctly.
In fact, just adding an event listener for 'click' removes the ability to select text, even if the handler doesn't attempt to change the document location.
Any idea what I'm doing wrong?
Apparently if you put a click listener on an element, you can no longer select text within that element on iOS. My solution was to detect taps using a combination of touchstart, touchmove, and touchend events, along with a timer to ignore multi-taps, and checking the current document selection to make sure a selection event is not going on.
Here's the JS code I used:
SingleTapDetector = function(element, handler) {
this.element = element;
this.handler = handler;
element.addEventListener('touchstart', this, false);
};
SingleTapDetector.prototype.handleEvent = function(event) {
switch (event.type) {
case 'touchstart': this.onTouchStart(event); break;
case 'touchmove': this.onTouchMove(event); break;
case 'touchend': this.onTouchEnd(event); break;
}
};
SingleTapDetector.prototype.onTouchStart = function(event) {
this.element.addEventListener('touchend', this, false);
document.body.addEventListener('touchmove', this, false);
this.startX = this.currentX = event.touches[0].clientX;
this.startY = this.currentY = event.touches[0].clientY;
this.startTime = new Date().getTime();
};
SingleTapDetector.prototype.onTouchMove = function(event) {
this.currentX = event.touches[0].clientX;
this.currentY = event.touches[0].clientY;
};
SingleTapDetector.prototype.onTouchEnd = function(event) {
var that = this;
// Has there been one or more taps in this sequence already?
if (this.tapTimer) {
// Reset the timer to catch any additional taps in this sequence
clearTimeout(this.tapTimer);
this.tapTimer = setTimeout(function() {
that.tapTimer = null;
}, 300);
} else {
// Make sure the user didn't move too much
if (Math.abs(this.currentX - this.startX) < 4 &&
Math.abs(this.currentY - this.startY) < 4) {
// Make sure this isn't a long press
if (new Date().getTime() - this.startTime <= 300) {
// Make sure this tap wasn't part of a selection event
if (window.getSelection() + '' == '') {
// Make sure this tap is in fact a single tap
this.tapTimer = setTimeout(function() {
that.tapTimer = null;
// This is a single tap
that.handler(event);
}, 300);
}
}
}
}
};
new SingleTapDetector(document.body, function(event) {
document.location = "internal://tap";
});
There is no need to use Javascript for this, it's overkill when the UIGestureRecognizerDelegate has adequate methods. All you need to do is make sure that when text selection is taking place, the tap recogniser isn't triggered.
- (BOOL)gestureRecognizer:(UIGestureRecognizer*)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
BOOL hasTap = ([gestureRecognizer isKindOfClass:[UITapGestureRecognizer class]] ||
[otherGestureRecognizer isKindOfClass:[UITapGestureRecognizer class]]);
BOOL hasLongTouch = ([gestureRecognizer isKindOfClass:[UILongPressGestureRecognizer class]] ||
[otherGestureRecognizer isKindOfClass:[UILongPressGestureRecognizer class]]);
if (hasTap && hasLongTouch) {
// user is selecting text
return NO;
}
return YES;
}
That takes care of text selection, and links should work fine anyway (at least they do for me).