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
Related
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.
In my multipage jqm document there is a page with the id #internal. At some point I do
$('#internal').remove();
The page is removed but
$('body').on('pagecontainerremove',function(e,ui){console.log(ui.toPage);console.log('page removed');})
does not fire. Googling for pagecontainerremove and experimenting with various ways of removing the page has not yielded anything useful.
The remove events pageremove and its' "successor" pagecontainerremove are fired on external pages in Single Page Model. jQuery Mobile removes external pages from DOM upon navigating away off them. By default, jQuery Mobile doesn't cache external pages and binds bindRemove to remove them. However, if an external page is cached data-dom-cache="true", the remove event won't be attached to it to remove it from DOM.
Although pageremove is replaced by pagecontainerremove, the latter doesn't fire and it is definitely a bug in jQuery Mobile 1.4.
/* doesn't fire */
$(document).on("pagecontainerremove", function (e) {
console.log("pagecontainer event: " + e.type);
});
/* does fire */
$(document).on("pageremove", function (e) {
console.log("page event: " + e.type);
});
Demo
Nevertheless, it is possible to use bindRemove in Multi-Page Model to let jQuery Mobile removes it once hidden. First, add data-external-page="true" to page div that you want to be removed by jQuery Mobile, and then flag it for removal $("#pageID").page("bindRemove").
<div data-role="page" id="pageID" data-external-page="true">
$(document).on("pagecreate", "#pageID", function (e) {
$(e.target).page("bindRemove");
});
Demo
I tested on the Apple device, and when I click on the screen when there is no effect. This is my code. Click on the events of this writing there are questions?
<script>
$(function() {
$('#test').tap(function() {
$('#menuNum').text('1');
})
})
</script>
You need to change few things.
Do not use $(function() { or classic document ready to check for a correct state, they can cause problems with jQuery Mobile. Instead use jQuery Mobile alternative called page events.
Then don't bind tap event like that, use proper modern way of doing that. In your case element must be loaded into the DOM for that kind of binding to work. And because of $(function() { sometimes it can happen that element is still loading when binding is executed. So use it like this:
$(document).on('tap','#test',function() {
$('#menuNum').text('1');
});
This method don't care if element exist or not, it will even work if element is loaded into the DOM after binding process.
Working example: http://jsfiddle.net/Gajotres/SQ7DF/
In the end you want something like this:
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('tap','#test',function() {
alert('Tap');
});
});
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 have a list of draggables that need to be dropped onto divs loaded by AJAX. However, when the divs are loaded by AJAX it breaks the droppables functionality. I removed AJAX from the equation and it worked fine.
Here's working code. With this code I can drag items in my .contentList to #block1 div and everything works peachy.
<div id="block1"></div>
$(".contentList").draggable();
var dropOpts = {
hoverClass: "activated",
tolerance: "pointer",
drop: getURL
};
$("#block1").droppable(dropOpts);
I then have the following code load a new div via jQuery .load.
$(document).ready(function() {
$("#template1").click(function() {
$("#dynamic-ui").load("/templates/newtemplate.html");
});
The newtemplate.html contains a div with the same id; #block1. However, once it loads I can no longer drag onto it. Any help would be greatly appreciated!
Add the code to make #block1 droppable after the newtemplate.html is loaded into dom. e.g.
$(document).ready(function() {
$("#template1").click(function() {
$("#dynamic-ui").load("/templates/newtemplate.html");
var dropOpts = {
hoverClass: "activated",
tolerance: "pointer",
drop: getURL
};
$("#block1").droppable(dropOpts);
});
});
The binding of events happens when the browser loads the webpage.
So during the loading if the JavaScript didn't find the specified division/element they won't bind the event. So for dynamically created divisions you need use jQuery live to bind the events.
For your question i think this question will answer you.
Hope it will help you.
Good luck