We Keep Coding

Enable scrolling with drag-n-drop on touch devices

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.

Making QapTcha function on touch screens

I am trying to add a Qaptcha feature to my comment form and it works fine but does not function on touch screens.
I read here that all I need to do to solve this issue is to add:
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()
{
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
And just call the init() function in my document.ready.
This is part is my document.ready:
$outer.= '<script type="text/javascript">jQuery(document).ready(function(){if(jQuery("p:has(\'textarea\')").length>0) jQuery("p:has(\'textarea\')").before(\'<div class="QapTcha"></div>\'); else jQuery("#comment").before(\'<div class="QapTcha"></div>\');jQuery(\'.QapTcha\').QapTcha({disabledSubmit:true,autoRevert:true});});</script>'."\n";
I tried this but could not make it function. Maybe I am not calling it correctly in document.ready? Can you kindly assist?

removing the onclick delay for webapps for android

Hi i'm building a webapp. To remove the onclick delay i found this script on
http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone
The code is bascically-
function NoClickDelay(el) {
this.element = el;
if( 'ontouchstart' in window ){
console.log("===================touch supported :P")
this.element.addEventListener('touchstart', this.handleEvent, false);
}
}
NoClickDelay.prototype = {
handleEvent: function(e) {
switch(e.type) {
case 'touchstart': this.onTouchStart(e); break;
case 'touchmove': this.onTouchMove(e); break;
case 'touchend': this.onTouchEnd(e); break;
}
},
onTouchStart: function(e) {
//e.preventDefault(); //removed to let the page scroll
this.moved = false;
this.element.addEventListener('touchmove', this, false);
this.element.addEventListener('touchend', this, false);
},
onTouchMove: function(e) {
this.moved = true;
},
onTouchEnd: function(e) {
this.element.removeEventListener('touchmove', this, false);
this.element.removeEventListener('touchend', this, false);
if( !this.moved ) {
// Place your code here or use the click simulation below
var theTarget = document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
if(theTarget.nodeType == 3) theTarget = theTarget.parentNode;
var theEvent = document.createEvent('MouseEvents');
theEvent.initEvent('click', true, true);
theTarget.dispatchEvent(theEvent);
}
}
};
My question is that this works on iphone/ipad but not on Android. What prevents it from working in android and what can i do to achieve a similar behavior in android and other devices??? please help.

We had the same problem and solved it with a slightly different approche.
We were able to fix it for iPhone and Android. Clicks will be fired immediately and the delayed events will be ignored. Maybe you can use it:
https://github.com/cargomedia/jquery.touchToClick

In your link there is someone commented about Android solution (I haven't try it):
Android has same problem with laggy onClicks. Your demo doesn’t work on Android, unless I comment out window.Touch below, so I believe that DOM property is only visible on iOS.
function NoClickDelay(el) {
this.element = el;
// if (window.Touch) not available on android
this.element.addEventListener(‘touchstart’, this, false);
}
With the above change Android gets non-laggy touch event!

touchToClick or fastclick does not work in my case.
I had a lot of code at onclick events, and I'm using Tappy actually:
onClick event in android webview too slow

<meta name="viewport" content="width=device-width, user-scalable=no">
This disables double-tap zooming, so browser does not wait to detect double-tap. No need to bother with tap events. Sadly, it works only in recent browsers.

Javascript click function

I've got some code which works fine in IE but unfortunately not in Google Chrome/Firefox.
It relies upon calling a click() event on a button from javascript. Reading around it seems that this is an IE specific extension (doh). Is there any way I can do a similar thing in chrome + firefox? To clarify, it's executing the click event on a specific button, not handling what happens when the user clicks on a button.
Thanks
The code for those who asked for it:
function getLinkButton(actionsDiv)
{
var hrefs = actionsDiv.getElementsByTagName("a");
for (var i=0; i<hrefs.length; i++)
{
var id = hrefs[i].id;
if (id !=null && id.endsWith("ShowSimilarLinkButton"))
{
return hrefs[i];
}
}
return null;
}
function doStuff()
{
//find the specific actions div... not important code...
var actionsDiv = getActionsDiv();
var linkButton = getLinkButton(actionsDiv);
if (linkButton != null)
{
if (linkButton.click)
{
linkButton.click();
}
else
{
alert("Cannot click");
}
}
}
I don't really want to use jQuery unless absolutely necessary

I think you're looking for element.dispatchEvent:
function simulateClick() {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
var cb = document.getElementById("checkbox");
var canceled = !cb.dispatchEvent(evt);
if(canceled) {
// A handler called preventDefault
alert("canceled");
} else {
// None of the handlers called preventDefault
alert("not canceled");
}
}
I read your question as "I'm trying to fire the onclick event for my button", whereas everyone else seems to have read it as "I'm trying to handle an onclick event for my button". Please let me know if I've got this wrong.
Modifying your code, a proper x-browser implementation might be:
if (linkButton != null)
{
if (linkButton.fireEvent)
linkButton.fireEvent("onclick");
else
{
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
linkButton.dispatchEvent(evt);
}
}

onclick attribute should be crossbrowser:
<input type="button" onclick="something()" value="" />
EDIT
And there was this question that seems to be about the same problem: setAttribute, onClick and cross browser compatibility

onclick="methodcall();" works for me fine...

you can use onClick attribute or if you need more functionality have a look at jQuery and events it offers: http://api.jquery.com/category/events/

How do I programmatically click on an element in JavaScript?

In IE, I can just call element.click() from JavaScript - how do I accomplish the same task in Firefox? Ideally I'd like to have some JavaScript that would work equally well cross-browser, but if necessary I'll have different per-browser JavaScript for this.

The document.createEvent documentation says that "The createEvent method is deprecated. Use event constructors instead."
So you should use this method instead:
var clickEvent = new MouseEvent("click", {
"view": window,
"bubbles": true,
"cancelable": false
});
and fire it on an element like this:
element.dispatchEvent(clickEvent);
as shown here.

For firefox links appear to be "special". The only way I was able to get this working was to use the createEvent described here on MDN and call the initMouseEvent function. Even that didn't work completely, I had to manually tell the browser to open a link...
var theEvent = document.createEvent("MouseEvent");
theEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
var element = document.getElementById('link');
element.dispatchEvent(theEvent);
while (element)
{
if (element.tagName == "A" && element.href != "")
{
if (element.target == "_blank") { window.open(element.href, element.target); }
else { document.location = element.href; }
element = null;
}
else
{
element = element.parentElement;
}
}

Using jQuery you can do exactly the same thing, for example:
$("a").click();
Which will "click" all anchors on the page.

element.click() is a standard method outlined by the W3C DOM specification. Mozilla's Gecko/Firefox follows the standard and only allows this method to be called on INPUT elements.

Are you trying to actually follow the link or trigger the onclick? You can trigger an onclick with something like this:
var link = document.getElementById(linkId);
link.onclick.call(link);

Here's a cross browser working function (usable for other than click handlers too):
function eventFire(el, etype){
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}

I used KooiInc's function listed above but I had to use two different input types one 'button' for IE and one 'submit' for FireFox. I am not exactly sure why but it works.
// HTML
<input type="button" id="btnEmailHidden" style="display:none" />
<input type="submit" id="btnEmailHidden2" style="display:none" />
// in JavaScript
var hiddenBtn = document.getElementById("btnEmailHidden");
if (hiddenBtn.fireEvent) {
hiddenBtn.fireEvent('onclick');
hiddenBtn[eType]();
}
else {
// dispatch for firefox + others
var evObj = document.createEvent('MouseEvent');
evObj.initEvent(eType, true, true);
var hiddenBtn2 = document.getElementById("btnEmailHidden2");
hiddenBtn2.dispatchEvent(evObj);
}
I have search and tried many suggestions but this is what ended up working. If I had some more time I would have liked to investigate why submit works with FF and button with IE but that would be a luxury right now so on to the next problem.