We Keep Coding

Buttons are not responding to clicks in Ionic

I have the following button positioned absolutely over a canvas element:
<button class="left">Left</button>
This is the JavaScript that is supposed to respond to button click:
$(".left").mousedown(function() {
leftTimer = setTimeout(moveLeft, 10);
}).mouseup(function() {
clearTimeout(leftTimer);
});
var leftTimer,
moveLeft = function() {
if (circleX > 0) {
circleX -= 4;
}
$("h1.title").text('Clicked Left');
leftTimer = setTimeout(moveLeft, 10);
};
I added the title line to check if there was a delay. When I click the button normally, nothing happens the title does not change. I have to keep the button pressed for some time to change the text to "Clicked Left" or to move my target element. Even then there is a considerable delay between the time I first touch the button and the time the text changes. Why is that ? Let me know if I need to provide more information.

You should actually have Angular with your Ionic app, and use the ng-click element on the div you want to handle.
According to the documentation, AngularJS is required :
Ionic currently requires AngularJS in order to work at its full potential. While you can still use the CSS portion of the framework, you'll miss out on powerful UI interactions, gestures, animations, and other things.
Here is a JSBin, to make you a basic binding between your HTML and your AngularJS : https://jsbin.com/rifigakube/edit?html,js,output
If you are new to this technology here is a list to get started with AngularJS (it's pretty easy to learn if you know Javascript) :
https://angularjs.org/
https://docs.angularjs.org/tutorial/step_00
http://www.w3schools.com/angular/
https://thinkster.io/a-better-way-to-learn-angularjs
https://egghead.io/technologies/angularjs
And finally, when you think you're confident enough with AngularJS : https://scotch.io/tutorials/create-your-first-mobile-app-with-angularjs-and-ionic
(I really suggest you learn AngularJS before doing the last one, or you will get stuck after)
Hope this helps.

ng-click not firing when using ng-mouseenter or ng-mouseover on tablet

In my project I'm using AngularJS v1.2.16 and Bootstrap v3.1.0.
The following code is correctly working on desktop side but not when trying it via tablet (ipad)
In case of tablet, the ng-click is not fired on first time, only when "tabbing" again on the div element, it is fired.
<div ng-click="selectObject($index)" ng-class="selectedObject($index)" class="check-obj" ng-mouseover="showwhiteobj = true;" ng-mouseleave="showwhiteobj = false;">
<span ng-hide="selectedObject[$index]">
<span ng-hide="showwhiteobj"><img src="img/{{imagename}}.svg"/></span>
<span ng-show="showwhiteobj"><img src="img/{{imagename}}-white.svg"/></span>
</span>
</div>
selectObject is just setting an array to true or false:
$scope.selectObject = function (objIndex) {
if ($scope.selectObject[objIndex]) {
$scope.selectObject[objIndex] = false;
} else {
$scope.selectObject[objIndex] = true;
}
};
selectedObject returns an 'active' or undefined (used in ng-class):
$scope.selectedObject = function (objindex) {
if ($scope.selectedObject[objindex]) {
objindex = 'active';
} else {
return undefined;
}
return objindex;
};
funny thing is, that when removing
ng-mouseover="showwhiteobj = true;" ng-mouseleave="showwhiteobj = false;"
everything is working fine (on desktop and on tablets), unfortunately I cant use different images on hover.
And when trying it with ng-mouseover or ng-mouseenter its only working on desktop - on tablet its only working by doing an extra "tab/click" on the object.
I dont see any errors on console side :-(
Any ideas or workaround?
Thanks a lot guys!

I was also bitten by it a few days ago. On IOs, when you tap, mouseover is triggered first (if is is handled in the code) and then click event is triggered. That's why when you remove the mouse event handlers, the code starts working. I would suggest using ng-touch to handle the touch events, which handle all these oddities correctly.
Read this article for more details.

Do have include angular-touch module ?
Doc here

ng-mouseover and ng-mouseleave does not work on touch screens. It will work fine on laptops or desktops.
You can try using ng-touch. Try this Link
Hope it helps...!

JsPlumb Touch Screen

I have an application that use JsPlumb Framework. It works fine on a desktop, however when using an touch device it fails to work correctly.
I have an object that can be dragged around the screen, this works fine on both a touch device and desktop. However I have also got an action that when a user click on the device it can set a connector to drag a line to another object to join them together. However on the touch devices it fails to set the connector.
The touch device will draw an icon but it will display appear straight away. Is this before the touch device can't tell the difference between the drag/touch option.
I have added some code to see if it has something to do with my code.
$("#container").append(state)
jsPlumb.draggable("state" + i);
jsPlumb.makeSource($('.item'), {
connector: 'StateMachine',
});
jsPlumb.makeTarget($('.item'), {
anchor: 'Continuous',
reattach:true,
isTarget:true,
beforeDrop:function(params) {
'Some code'
}
});
EDIT
JSFiddle
http://jsfiddle.net/8jMqG/6/
EDIT AGAIN
From the docs the following is showed
Tip: use the three-argument addEndpoint method for common data
One thing that happens quite often is that you have an Endpoint whose appearance and behaviour is largely the same between usages on different elements, with just a few differences.
var exampleGreyEndpointOptions = {
endpoint:"Rectangle",
paintStyle:{ width:25, height:21, fillStyle:'#666' },
isSource:true,
connectorStyle : { strokeStyle:"#666" },
isTarget:true
};
Which is what I'm doing on the jsfiddle.
Thanks,
James

I have been using jsPlumb for some time now. My app works both on desktop & mobile. Of course, there's a difference between click & touch.
I use jquery-ui-touchpunch for mobile device support; clicking, dragging objects/connections & creating connections works smooth on mobile too.
http://touchpunch.furf.com/
Update
After creating the endpoints or making certain elements source & target, the next step is to join them for the connection to appear. Of course, if the sole-aim is to just connect, then you can skip creating endpoints/sources/targets & directly join them using
jsPlumb.connect({
source:"element1",
target:"element2",
anchors:["Right", "Left" ],
endpoint:"Rectangle",
endpointStyle:{ fillStyle: "yellow" }
});
DOCS
Currently, you're trying to make the same element(s) .item both source & target.
Also, you're trying to make the same elements source & target with every click (event). Why repeating it ?
APIDOCS
I guess there's some confusion in what you need and what the code says.

Dropdown menu flickering over slider, only on Chrome for Android

I'm pretty new to all this, so apologies if this is a dumb question:
I've got a Magento site located here: http://www.thisisnotavegetable.com It uses responsive design, and when displayed on mobile-width browsers, the topmenu becomes a javascript-enabled dropdown.
This all works fine, except on the home page (where it is loading over a javascript-enabled slider), and only on Chrome for Android. On that browser, the dropdown flickers and link text won't display. I assume this is a jQuery issue, but I'm not advanced enough to figure it out.
Any help is much appreciated!
Alex
Below is the jQuery for the dropdown (I think). The slider is ioSlider. I hope someone can help me without needing to see that jQuery, because it's unformatted and the license says I'm not supposed to post it.
if (jQuery('#categories-accordion').length){
jQuery('#categories-accordion li.level-top.parent ul.level0').before('<div class="btn-cat"><div class="inner"></div></div>');
if(mobileDevice == true){
jQuery('#categories-accordion li.level-top.parent').each(function(){
jQuery(this).on({
click: function (){
if(!jQuery(this).hasClass('touched')){
jQuery(this).addClass('touched closed').children('ul').slideToggle(200);
clearTouch(jQuery(this));
return false;
}
}
});
});
}else{
jQuery('#categories-accordion li.level-top.parent .btn-cat').each(function(){
jQuery(this).toggle(function(){
jQuery(this).addClass('closed').next().slideToggle(200);
},function(){
jQuery(this).removeClass('closed').next().slideToggle(200);
})
});
}
}

Would be great, if you could post the jQuery Code :)
Flickering might be solved by using hardware acceleration. You can force the browser to use hardware acceleration by adding "-webkit-transform: translateZ(0);" into the css class of the mobile menu.
mobileMenu {
...
-webkit-transform: translateZ(0);
}

Looking for ibooks html input alternative

In IOS5 on the iPad, iPad2 etc. iBooks accepted <input type="color"> as a way to prompt the keyboard to display when you clicked on an input field, to say, type in the answer to a question. I've just recently updated to IOS6, and this workaround no longer seems to be working. I tried using the JavaScript I found here - http://www.linkedin.com/groups/How-Show-iPads-Keyboard-when-3877009.S.84287009
<script type="text/javascript">
function iPadTouchHandler(event) {
var type = "",
button = 0; /*left*/
if (event.touches.length > 1)
return;
switch (event.type) {
case "touchstart":
// OLD: On iPad2 clicking on a text input field did not show the keyboard
// if ($(event.changedTouches[0].target).is("select")) {
// NEW: Now on iPad2 the touchstart-Event on input fields is ignored and everything works fine
// change my by Roland Caspers, Scheer Management
if ($(event.changedTouches[0].target).is("select") || $(event.changedTouches[0].target).is("input")) {
return;
}
iPadTouchStart(event); /*We need to trigger two events here to support one touch drag and drop*/
event.preventDefault();
return false;
break;
</script>
However this code seems to be outdated and relevant to IOS5. I know of a workaround, which is to put the page with the input into an iFrame, in that case you can just use <input type="text">, however I'd prefer to stay away from iFrames as they tend to move the content around depending on where the input box is. Any thoughts as to other possible solutions or workarounds? Tyvm :)

I am also Facing the same issue on iOS6 for , the same is working perfectly on the <iframe> tag. But it omits the images & style and etc.
Review the code "http://www.linkedin.com/groups/How-Show-iPads-Keyboard-when-3877009.S.84287009", I feel some thing has to modify on below condition:
($(event.changedTouches[0].target).is("select") || $(event.changedTouches[0].target).is("input"))
I'd be great if anyone provide the earlier response.
Thanks

I struggled with this same problem in iBooks on iOS 7. The tricky part was, that iBooks probably makes all text input fields disabled by default. We are using prototype.js, so here is my solution written for prototype:
$('my-input-field-id').observe('touchstart', function(event) {
var element = event.element();
if (element.disabled)
element.disabled = false;
element.focus();
event.stop();
});
So just listen for the 'touchstart' event on the input field and enable and focus the field when touched. It works for ordinary text fields (<input type="text">). Simple :-).