Using touch events instead of mouse events on Safari, Firefox and Chrome - ipad

Is there a way/addon/extension that simulates the mobile events (touchstart, touchmove, touchend) instead of the normal mouseevents when navigating with Safari, Firefox or Chrome?
I'm trying to test some websites on iPad. If there is a iPad Emulator desktop software, would be great also, but I need some kind of Firebuging.
Thanks!
CaioToOn!

You realize there is in fact an iPad simulator, which you get when you install Xcode? (Which is free, sign up at developer.apple.com.)

Try Phantom Limb
http://www.vodori.com/blog/phantom-limb.html

You should have a look at the tom robinson's virtual light table. It includes a small but working mobile events emulator in javascript.

You can test touch input directly in your browser.
In Firefox or Chrome press Ctrl+Shift+m, which gives you a mobile view of your webpage. There you can also check if the scaling is correct.
There is a button, that lets you simulate touch events instead of mouse events.
For further information look at the chrome device mode.

Related

On iphone, safari, when typing in an input, the screen goes white

I've tested this on every other browser, it's only on iphone on safari where this is happening. I've built a site on wordpress and whenever a comment field is clicked on a comment, the screen goes white briefly. Cna someone point me in the right direction on how to diagnose this? Thanks!
http://texas-coffee-school.steadfastlight.com/is-inconsistency-killing-your-coffee-business-from-within/#comments To see. Thanks!
Found the answer: By applying position: relative on all the form objects, this fixes the issue iOS was having with the form fields.
Try pressing F12 on Google Chrome for developer tools and emulate the device (by clicking the phone icon and selecting the device required) that is causing the problems (e.g. Apple iPhone6), run the console while leaving a comment and it should display whatever Javascript is running in the background and debug from there.

JQuery Mobile Pop Transition Failing first time when reading from file on slow device

OK, here is an interesting problem.
I have a project created in JQuery Mobile and it starts with a pop-up displayed with a pop transition. It works well on my desktop browser, but on a low CPU tablet the fist pop-up is not displayed. If I change the transition to none it shows, but then the next pop transition fails.
So what I have discovered is that reading from file:// works, but reading from http:// works on desktop, but fails on tablet.
Refreshing the display (F5) makes it work so it could be something with caching.
Work with callbacks. Probably the function is executing before it's loaded.

emulating touch events for Chrome - is there a better way?

I'm using Chrome with source maps for debugging a GWT-based app. It's very nice. What I want to do now is have Chrome pretend to be a mobile device. I turned on "emulate touch events", but it seems that the mouse events are still being generated as well. What I was hoping for would be that the browser would act more or less exactly like a mobile browser. I can run my code in XCode's iOS simulator, but can't debug it easily. Thoughts? Thanks.
Are you sure that a real touch device doesn't also send mouse events when a touch occurs?
If you test this, I'm certain you'll find that a real touch device actually generates some mouse events when a tap or touch start/move/end occurs. Take a look at https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Touch_events to see how to avoid generating mouse events, at least on real touch devices... it may not work in chrome, but you have to at least start there.

How to make a JQueryMobile-based application have a "touch" behavior in a desktop browser

I am using JQueryMobile to build an application that will mainly run on a Linux-based touch device with Firefox.
My issue is that, with JQM, when page contents cannot fit on the screen, the web browser displays a vertical scrollbar displays a vertical scrollbar
There is no such issue with Sencha and Dojo. They both behave like if they were running on a touch-based device, even with desktop web browser (reduce the height of your browser window) :
Sencha scrolling list
Dojo scrolling list
So, how can I make JQM to be touch-friendly when running on a desktop web browser ?
It seems that there is no really good JS and/or CSS solution for this issue.
Hiding the scrollbars with CSS (overflow-y: hidden;) prevents scrolling and mess JQM touch events.
I found a workaround by using a Firefox plugin (Grab and Drag), which is an acceptable solution since I control the device that runs the browser.
It works fine, but it is not a pure JS/HTML/CSS solution...

Open specific page of a pdf in iFrame on iPad

I am trying to open a specific page of a pdf (for example, http://cb.vu/unixtoolbox.pdf#page=14) inside an iFrame. While it works on desktop browsers, it is not working on an iPad.
Also noticing that, this does not work on the iPad even without the iFrame if I want to go the page 14 by typing http://cb.vu/unixtoolbox.pdf#page=14 directly in the address bar of mobile safari.
Has any of you came across this problem? If so, how did you solve it?
Thanks a lot for any help!

Resources