There is an issue with the draggable feature of the jQuery UI library. We have used the recommended solution of the touch punch library, but still, it does not support windows touch screen PCs or Laptops. It works for iPad, iPhones, Android phones and tablets etc.
We tried a solution:
HTML
<div id="TrendsAreaTrends">
<div class="graph-scrollbar">
<div class="graph-scroll-container">
<div class="graph-scroll"></div>
</div>
</div>
</div>
Script
$("#TrendsAreaTrends. graph-scroll").draggable({
` axis: "x", containment: "parent",`
`drag: function (event, ui) {`
` if (vitalHelper.currentScrollX - ui.position.left > 30) {`
vitalHelper.handleMoved = true;
}
else {
vitalHelper.handleMoved = false;
}
shiftHorizontal(ui.position.left);
}
});
We used the following libraries:
<script type="text/javascript" src="/Scripts/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.13.1.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.touch-punch.min.js"></script>
I tried the following links :
General overview - https://impossiblue.github.io/log/170425/index.html
About using touch punch - https://github.com/RWAP/jquery-ui-touch-punch
Specific solution- https://h5ptechnology.atlassian.net/browse/HFP-3063
Issues using touch punch in windows touch laptops: https://github.com/furf/jquery-ui-touch-punch/issues/331
We tested with other devices, the solution seems to work, but doesn't respond in the windows touch laptop on any browser - chrome, edge, IE.
These URLs suggested that there was an issue with the draggable feature of jQuery UI, which has been fixed with a touch punch patch. But in our case, we are already using a touch punch patch, but it still needs to solve our problem.
Related
I have been using the css class 'ui-disabled' to disable inputs in jquery mobile and it used to work great in all major browsers, but with the release of IE11, noticing that all inputs (except text) including anchor buttons are clickable/changeable even with the class 'ui-disabled'.
I am using jquery mobile's 1.3.2 on windows 7 but apparently the issue occurs on windows 8 machines as well.
Any idea or workaround to fix this issue?
HTML:
Button
Click Me
Javascript:
$('#clickMe').on("click", function(){
if (!($('#btn').hasClass('ui-disabled'))){
$('#btn').addClass('ui-disabled');
}
})
$('#btn').on("click", function(){
alert("Button was clicked");
})
Demo here: http://jsfiddle.net/Debarupa/6jczxe7m/3/
See how "Button" can be clicked even though it appears disabled.
I believe ui-disabled uses the CSS pointer-events: none which is not well supported in IE. As a workaround, you could modify your click handler:
$('#btn').on("click", function(){
if ($(this).hasClass('ui-disabled')) return false;
alert("Button was clicked");
})
How can i use google earth API with backbone.js+jquery mobile ?
I have created application using backbone.js, underscore.js and jQuery Mobile.
For google earth API, I am using sample code listed at https://developers.google.com/earth/documentation/#using_the_google_earth_api
My template rendering, and all other pages are working fine But when i load google earth API in one tag, it's not loading and in js console i get message: "ERR_INVALID_DIV ".
Google.earth module never calls back initCallback, It's always calls failureCallback when google.earth.createInstance is invoked.
I explain some sample code of mine application as under, so based on that may be you get my code structure and it helps you to solve my issue.
my js code as under,
myjs1.js
var ge;
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
console.log(' init call back call ');
ge = instance;
ge.getWindow().setVisibility(true);
}
function failureCB(errorCode) {
console.log(errorCode);
}
Now my Backbone code as under,
myjs2.js
WebApp.MyPage= Backbone.View.extend({
initialize:function (result) {
this.template =_.template($('#myPage').html());
},
render:function (eventName) {
var self = this;
mydata = object dict of my data;
$(self.el).html(self.template({mydata:mydata}));
google.load("earth", "1");
init();
google.setOnLoadCallback(init);
}
Now my HTML code like as under,
<script type="text/template" id="myPage">
<div data-role="page">
<div data-role="content">
<div id="map3d" style="height: 400px; width: 600px;"></div>
</div>
</div>
</script>
myhtml.html
Is there any way to fix this?
Any help appreciated.
The Earth API works with the Google Earth Plugin, which is available only on Windows and Mac OSX. It is not available on mobile devices, sorry!
If you're testing on your Mac or Windows system, you should be able to get it working. The error code ERR_INVALID_DIV sounds like it isn't finding the map3d div. I would put a debugger; statement in the code just before the google.earth.createInstance() call, and then look around in the DOM inspector and see if map3d is in the DOM. It should be coming in from your template if that part is working.
But this won't help you when you try to load your site on a mobile device, because you won't have the Earth plugin available there.
I'm trying to figure out how to get an accelerometer example working on the iPad using a local webserver and the CordovaBrowser app for iOS.
I believe that the CordovaBrowser app would have ALL the plugins built in to the native hosting application and that all I would need to do is include cordova.ios.js and all plugins would be available.
When I browse to the page from within the CordovaBrowser app, I just get output that indicates that navigator.accelerometer is null.
Here is the HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>PhoneGap</title>
<script src="js/cordova.ios.js"></script>
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="ts/app.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="Output">
</div>
</form>
</body>
</html>
Here is app.js:
$(function () {
var output = $('#Output');
try {
output.text('Loading ...');
if(navigator) {
output.text('Loaded Navigator ...');
}
if(navigator.accelerometer) {
output.text('Loaded Accelerometer ...');
}
var watchID = navigator.accelerometer.watchAcceleration(function (acceleration) {
output.text('Acceleration X: ' + acceleration.x + ', ' +
'Acceleration Y: ' + acceleration.y + ', ' +
'Acceleration Z: ' + acceleration.z + ', ' +
'Timestamp: ' + acceleration.timestamp);
}, function () {
output.text('Error!');
}, {
frequency: 300
});
} catch (e) {
alert(e);
}
});
All the referenced js files are being loaded properly. Is something else missing?
There's very little activity on the app's support site - which is a redirect to GitHub. And based on the only Issue, that GitHub is only for Android, not the iOS version. It could just be a bug in a new app, but it could also be that PhoneGap development has a lot of gotchas.
I'd use something else that promises a proper PhoneGap environment for arbitrary files. I've used an app called Hyperlab released last year that is pretty cool, but it isn't for iPad, has some quirks, and hasn't seen a single update.
I don't have/want a Mac and I don't want to pay $99 to fool with this. Maybe later if we decide to go the route of developing a native app with PhoneGap. Apple is ridiculous.
You should add an event listener for deviceready event and then start from there:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Now safe to use the Cordova API
}
Note: if you dont have a mac or you cannot test this on the actual device, you can use chrome to debug and test it and use chrome tools to change the accelerometer values.
Steps:
1- Right click on the page and click inspect element
2- on the right corner select settings
3- select overrides and override device orientation
NOTE: IF YOU ARE USING CHROME, THE DEVICE READY EVENT WILL NEVER GETS CALLED, SO YOU SHOULD CALL IT ON THE PAGE LOAD
The Cordova Accelerometer depends on a cordova library plugin which is only installed with a native app. Loading the JS in Safari will not have the same effect. You will have to use public JS APIs which are supported by iOS devices. I have found one that works with my iPad.
In my mobile app, using jQuery Mobile...
I would like to make a simple button execute a simple javascript function on click. No page transitions, nothing special like that.
I understood I can eliminate the page transitions by doing return false or preventDefault()
But the problem is the button sticks with the "active" state, i.e. highlighted blue if you use the general theme. I'm wondering how I can remove that after click (or tap, etc).
Thanks.
You can disable the 'highlighted blue'-state in the 'mobileinit'-event before loading jQueryMobile-script:
<head>
<script>
$(document).bind('mobileinit', function () {
$.mobile.activeBtnClass = 'unused';
});
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
Now, when you click on a link, no class will be added after the click is performed. You will still have the 'hoover' and 'down' classes.
Update:
This question and the hacks suggested are now a bit outdated. jQuery mobile handles buttons quite a bit differently than 3 years ago and also, jQuery mobile now has several different definitions of "button". If you want to do what the OP was looking for, you might now be able to avoid the issue by using this:
Step 1:
<button class="ui-btn myButton">Button</button>
Alternatively, you could also use jQuery mobile input buttons:
<form>
<input value="Button One" type="button" class="myButton">
<input value="Button Two" type="button" class="myButton2">
</form>
Step 2:
Then your standard jquery on callback:
$(".myButton").on("tap", function(e) {
// do your thing
});
If you are using a button or a tab, or whatever, that has the "active" class applied to it (the default is ui-btn-active), the old answer may still be useful to someone. Also, here is a fiddle demonstrating the code below.
Selectively removing active state:
As demonstrated in another answer, you can disable the active state for all buttons on all pages. If that is acceptable for the project in question, that is the appropriate (and simpler) solution. However, if you want to disable the active state for some buttons while preserving active states for others, you can use this method.
Step 1:
$(document).bind('mobileinit', function() {
$(document).on('tap', function(e) {
$('.activeOnce').removeClass($.mobile.activeBtnClass);
});
});
Step 2:
Then add the activeOnce class (or whatever you want to call it - it's a custom class) to the buttons that you don't want to highlight when clicking.
And as is usual when binding anything to mobileinit, be sure you place your bindings - and perhaps better, all your javascript code - below the jQuery script and above the jQuery-mobile script.
<script src="js/jquery.js"></script>
<script src="js/my_script.js"></script>
<script src="js/jquery.mobile.js"></script>
Do NOT set the activeBtnClass to '' as suggested, this will cause errors when closing dialogs and the pageLoading function.
The method described does work, but cannot be set to null, the activeBtnClass variable is used as a selector, so set it to a non-existent class to get the same effect without the error.
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).bind('mobileinit', function () {
$.mobile.activeBtnClass = 'aBtnSelector';
});
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
This works well to remove the highlight from the buttons while keeping the active state on other elements.
you can just do it via css instead of java:
eg: (you get the idea)
#cart #item_options .ui-btn-active, #cart #item_options .ui-btn-hover-d, #cart #item_options .ui-btn-up-d, #cart #item_options .ui-link-inherit{
background:inherit;
color:inherit;
text-shadow:inherit;
}
What I do is force the buttons to revert to inactive state before a page changes.
//force menu buttons to revert to inactive state
$( '.menu-btn' ).on('touchend', function() {
$(this).removeClass("ui-btn-active");
});
If you want to support non touch devices you should add timeout.
$('.btn' ).on('touchend click', function() {
var self = this;
setTimeout(function() {
$(self).removeClass("ui-btn-active");
},
0);
});
I have spent the good part of a day and night finding the answer to this problem mainly occurring on an android running phonegap. Instead of the standard JQM buttons I am using custom images with :active state in CSS. After following the link to the next page, then clicking back, the button would just stay in the :active state. I have tried adding classes and removing classes and various other suggestions and nothing has worked.
So I came up with my own little fix which works a treat and may help anyone else that is sitting here stumped. I simply call this snippet of code on 'pagecontainerchange' using data.toPage[0].id to only call it on the page where the active state stuck is occurring. Just make sure to wrap your buttons in a div, in my case called "themenu".
function ResetMenu() {
var menuHtml = $("#themenu").html();
$("#themenu").empty().html(menuHtml).trigger("create");
}
This works for a button in the JqueryMobile headerTab
<style>
.Foo {
color: #FFF !important;
background: #347b68 !important;
}
</style>
<div id="headerTab" data-id="headerTab" data-role="navbar">
<ul id="header_tabs">
<li>name
</li>
</ul>
</div>
I'm playing around with the drag and drop feature of jQuery UI and it's working on my website, but when I navigate to my web page on an iPad, then the divs don't drag - the page itself moves up and down.
I've have in the head tag:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/le-frog/jquery-ui.css" type="text/css" media="all" />
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
google.setOnLoadCallback(init);
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
Excellent sample solutions:
jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library.
Currently, jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that the slick UI you designed and tested in your desktop browser will fail on most, if not all, touch-enabled mobile devices, becuase jQuery UI listens to mouse events—mouseover, mousemove and mouseout—not touch events—touchstart, touchmove and touchend.
That's where jQuery UI Touch Punch comes in. Touch Punch works by using simulated events to map touch events to their mouse event analogs. Simply include the script on your page and your touch events will be turned into their corresponding mouse events to which jQuery UI will respond as expected.
As I said, Touch Punch is a hack. It duck punches some of jQuery UI's core functionality to handle the mapping of touch events...
This problem is known and has already been investigated.
It requires a correct .preventDefault() call in the right event handler.
Everything you need is here:
jQuery - draggable images on iPad / iPhone - how to integrate event.preventDefault();?
http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript/ contains an excellent code sniplet that converts touch events to mouse events:
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;
}
// initMouseEvent(type, canBubble, cancelable, view, clickCount,
// screenX, screenY, clientX, clientY, ctrlKey,
// altKey, shiftKey, metaKey, button, relatedTarget);
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);
}
Hammer.js provides a powerful dragging feature. https://github.com/EightMedia/hammer.js