I am working on Angular JS draggable directive. My code is similar to this Plunker
Both my code and this plunker work perfectly on windows when operating with mouse. But on any tab where touch is involved it is not working at all. what might be the reason behind this? any idea how to make it work?
A directive was implemented to control touch events, it is ngTouch. You can find more information here:
http://docs.angularjs.org/api/ngTouch
I additionally I think this post can be helpful:
Javascript Drag and drop for touch devices
Related
I have made a simple carousal using an online script called "simplyScroll".
here is the link to the script:
http://logicbox.net/jquery/simplyscroll/#config
My Problem:
here is the link the page:
http://namdarshirazian.com/exhibition.php
Generally in desktop mode, when I click on each image, it runs a javascript and shows a popup. This javascript is written by myself. Simply a simple action of hide and show.
But when viewed with smartphone (android/firefox), it does not triggers click event. VERY STRANGE. Can anyone please help my why this does not work?
The click action is as simple as :
$("body").on("click", "element", function(){
});
You can experiment with touchup and touchdown events instead. It's actually a right mess caused by people worrying about touches being long. The fastclick library might smooth things out a bit.
i had the same problem when i did my website responsive for any device resolution, the solution is simple, you write your jQuery as standard but u have to include a script that will allow the jQuery to work on touch devices.
add this script into your website and check the magic result:
http://touchpunch.furf.com/
http://developer.android.com/design/building-blocks/tabs.html#scrollable
Has anyone achieved this effect in a web app using JavaScript (or even jQuery)?
Got the pages sliding nicely (obviously that's the easy part), but getting the page titles to animate correctly looks like it could be painful!
May just go with the fixed tab layout but if anyone has any tips or examples, I would be very grateful...
There's a CSS which makes your page look like Android:
https://github.com/proimage/Android-4-ICS-CSS
There's a more advanced project with some JS:
http://jaunesarmiento.me/fries/index.html
And this is the way to do page swiping:
http://stereobit.github.io/dragend/ (also works on the PC)
http://swipejs.com/ (only works on touch device)
http://eightmedia.github.io/hammer.js/ (only triggers the event, doen't swipe the page)
With these you can have multiple pages in one HTML file:
http://handlebarsjs.com/
https://github.com/janl/mustache.js
http://underscorejs.org/
http://embeddedjs.com/
http://jade-lang.com/
https://github.com/blueimp/JavaScript-Templates
I'm working myself to combine some of these libs into a usable application. Hope it helps. This is also a note to myself.
The dropdown opens and closes fine but the click event / or touch event isn't being fired. I put together a tiny test case demo but its just as easy to run the twitter bootsrap docs. I have tried this on Android and iOS devices.
I was hoping to rectify by including an Events library like, jQueryMobile or Hammer.js but I'm not sure if this will help as Twitter Bootstap (I think) includes its own touch handlers.
Anyone else come across the problem?
As a work around to this problem I used the Jquery Mobile touch events and listened for tapevents on the dropdown. Here is a simple implementation:
$(".dropdown-menu").on("tap", "li a", function(e, ui){
e.preventDefault();
if ($(this).attr("data-toggle") === "modal")
{
$($(this).attr('href')).modal("show");
}
return false;
})
Seems to be a known issue that's resolved in bootstrap 2.1.2 - https://github.com/twitter/bootstrap/pull/5054.
Edit: tried to apply the changes in the ticket about, but couldn't get it to work either.
#CrimsonChin - can you pls elaborate on your implementation. I tried your code, but using JQM with bootstrap I get all kinds of weird behaviors.
Does anyone know a way to mimic the UIDatePicker and the even more general UIPicker iOS controls in HTML & JavaScript?
Does anyone know of a solution like this? I've seen JavaScript mimics of other iPhone/iPad controls, such as the UIPopoverController. I would really like to be able to offer this way of entering dates (compared to solutions like jQuery UI's datepicker). It looks like it would be easy to use both on a mouse scroll-wheel and on the iPad. So, any advice?
One reason all these strange widgets exist is because typing on touchscreens is annoying. You probably wouldn't want to use this sort of widget on desktop for the same reason that very few people like to draw pictures with their mice: the control you get with a mouse isn't really the same as the control you get with a touchscreen.
For that reason, libraries that have implemented functionality like this do it specifically for mobile, and do not ensure compatibility with older browsers such as IE6. If you only need to support good Webkit browsers, and you don't mind using a large framework for this purpose, Sencha Touch's Picker works well (see this page for an example). Sencha's doesn't offer mousewheel support.
I don't know if anyone has implemented one outside of a large framework, but it wouldn't hurt to look around.
--- EDIT ---
A solution listed in a previous StackOverflow question (Date Picker for iPhone Web Application) was chosen as the answer, but it's only for mobile — perhaps only for iPhone. You could look at the code and write one that would work on desktop.
#theazureshadow has a point that this is probably a bad idea for a mouse-based experience.
For anyone looking to do this in a touch-screen browser (smartphone or tablet, iOS or Android), and from my research, this is a great solution : http://demo.mobiscroll.com/. (Found in this answer)
If you only target iOS (iPad and iPhone), this code has a better native iOS feel : http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch
I've been looking for the same thing today and found this pretty good implementation:
http://marinovdh.wordpress.com/2011/09/14/use-the-iphone-uipickerview-control-as-a-selectbox-on-your-website-with-jquery/
There's a zip file with a working demo you can play with. I didn't create this, but I'm going to modify it for a project I'm working on.
In the iPhone or Android, if you have a JQuery Slider, it doesn't quite work (touchscreen will move the screen instead of drag the slider.)
You may need to write this from scratch. Luckily, #ppk has coded up an example of drag and drop for iPhone.
Listen for touch events and move the slider accordingly. These events also work on Android as it also uses WebKit.
You can use this library http://touchpunch.furf.com/
This provides touch events for all the jquery ui elements.
I found sample code online which converts touch events to mouse events. I tested this with jquery-ui's slider and it worked nicely!
Link to source
You can do this for iphone, android and windows phones via jquery+javascript. Windows phone with IE has one flaw, I have not been able to get it to snap to div sections.
I used this to wire up http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ the slider. Works like a charm, just be sure to replace the code that works against specific dom elements. Then add $('#sliderdiv').addTouch (). Works on IPhone, but doesn't work for Android. According to quirksmode touch events don't work on Android.