The code works perfectly using mouse events but when switch to touch event or vmouse event, it stopped working.
Here's the link for the mouse event code [https://jsfiddle.net/tk2zd47e/2/ ]
I've tried vmousemove/vmouseup/vmousedown, touchstart/touchend/touchmove and e.preventDefault().
Actually you are trying to create your own circular slider, which is pretty good.
Alternatively you can use the jQuery roundSlider plugin, which is more suitable for your requirement. It supports in Desktop, Mobile and Touch devices also.
This is very flexible and very easy to customize so that you can make any custom appearance as per your wish.
Here i make an demo exactly same as your requirement: jsFiddle
For more details check the demos and documentation page.
Screenshot of the Output:
Related
I have been developing a map using leaflet along with leaflet label plugin.
The plugin is working fine but on mobile devices it is not destroying the previous popup when another polygon touched.
You can check a demo here :
http://leaflet.github.io/Leaflet.label/
It would be very kind if anyone could help me to solve the problem with touch or find any other popup plugin with hover works in touch devices also.
Thanks in advance.
dwkns opened an issue in the Leaflet.label repository on GitHub. They also proffered an untested response which involved modifying the library. The plugin author hasn't yet replied.
One possible solution is to use L.Browser.touch to test for touch device support, and then bind a Leaflet popup for touch browsers and labels for non-touch browsers. Good luck!
I'am working on a web site and I'am using modernizer to know if a device is touch compatible.
In this case, i filter all 'hover' of html tags of my application.
example : .no-touch div.cell:hover
But how can I know if the user also uses a real mouse on a touch device ?
More and more devices allow both and i want to display 'hover' on touch devices when a user prefers to use a mouse instead of (touch).
I'am using angularjs then a related solution should be great.
Thanks
Mouse events should trigger click events, whereas Touch events should trigger the touch events. However, let it be known now that some touch screens (typically older models) don't have "real" touch capability. All they do is take the touch input and convert it into clicks.
Also, I don't think the :hover attribute ever cares if it's mouse or touch. I think the only calculation that goes into that is whether or not the cursor is above the given element.
I've created a website using SUPERSCROLLORAMA plugin. I wasn't aware of the problems with parallax scrolling on iPad and iPhone. I've found out a little bit to late, and I'm thinking about the ways to solve this.
If I understand correctly, events are disabled on this devices while scrolling. So will I be able to make website act as it should, if I disable the native scrolling and implement another one, via JavaScript plugin?
I've already disabled the original scrolling using Alnitak's answer from this question. I've tried to find some plugins to activate scrolling again, but the problem is, it has to be binded to the document since animations are fired there... Do you know the plugin that will do the trick? Is my solution even correct, or there is no solution for my case, I need to rewrite the script from scratch?
You can use parallax scrolling plugin that works on mobile browsers (iOS too).
Have a look at Skrollr. It doesn't depend on any other library, it has optional mobile js file and is very easy to use. Just read the documentation.
I'm using the protovis library (http://mbostock.github.com/protovis/) to draw a graph.
I uploaded the code I'm using in case someone wants to take a look at it:
http://jsfiddle.net/zobel/brEAD/
Here is my problem: Under Firefox, when I use the mouse wheel to zoom in or out, some mouse wheel events are not captured by my application but by Firefox itself. The result is that i end up getting a mix of zooms and page scrolls. You can test this by shrinking the Firefox window until the scroll bar gets visible.
This problem does not occur under Opera. Why does it happen and how can I solve it?
Thanks a lot in advance.
May be a bug (or simple omission) in the JavaScript library. The library needs to preventDefault() on the DOMMouseScroll event.
Thanks to event bubbling, you can do this yourself on any DOM object that's a parent node of the graph. Here's one simple example:
document.body.addEventListener('DOMMouseScroll', function(e){
e.preventDefault();
}, false);
This won't work in older versions of IE, since it doesn't support addEventListener, but you get the point. I recommend using another general-purpose JavaScript library (like jQuery), and use that to set your event handler.
I have a little app that has been under development for some time. My friends and I have been working really hard on this and are near release of the beta version.
I want to give some demos using iPhone and iPad to look cool :p
Now my problem is how to handle:
Mouse Down
Mouse Up
Mouse Leave
The multitouch interface of the iPhone (which I expect is similar to the iPad) handles mouse move on a browser has a scrolling event. One could try to capture the scrolling event and use it to simulate the dragging but I don't even know if it will be doable or if it will only be a hack.
Any one knows of a more robust manner to manage dragging events on the iphone/ipad?
Apple's Developer pages have a lot of good info on handling just these types of issues.
Handling Events
I was having the same problem and I realized that in the short time-span I had, developing codes to handle raw mouse (down, move and up) events would take time. So, I went ahead and modified the ThreeDumsMedia jQuery.event.drag plugin to make it to work on iPhone.
Get the jQuery.event.drag from http://www.shamasis.net/2011/06/javascript-drag-events-on-iphone-and-other-touch-based-devices/ and the 'drag' event would work just fine on iOS devices.
let me know if this helped.
Try this :
jquery.event.drag - v 2.2
Three Dub Media - http://threedubmedia.com
If you are using jQuery, then use jquery.ui.mouse.touch.js with jquery UI 1.9.