I've been playing around with the Padilicious touch events script after researching a problem I'm seeing in my code. I am able to recreate my own issues with the Padilicious script. I'm simply adding a form with an input to this example provided on the Padilicious site.
When I load this up on an iPad or on an iPhone emulator on a Mac, I'm unable to gain focus on the textbox. In my code, this has the same effect by blocking access to divs and other controls in the site's content. It's as if the div containing the ontouch events is masking everything else inside it.
Here is a jsfiddle showing what I've added. http://jsfiddle.net/Da8yj/
How can I impliment this swiping functionality and also keep the current functionality of my other controls?
Related
I'm working on a wordpress site, and I'm trying to get touch events to work, I'm currently using a simple touch start event like this:
$(".element").bind("touchstart", function() { $(".element").hide(); });
Where element is just a button tag.
My problem is that the events are not firing on any browser for IOS, even though they are working correctly on android.
I'm lead to believe that wordpress might have something to do with this, because I've tried the same events on web pages without wordpress, and they all work fine.
I am very confuse and not sure either javascript or jquery can trigger keyboard event like Shift+Q or Alt+Q from button click. I already looking on this forum and also download some of js file like key-event.js and crossBrowser_initKeyboardEvent.js but I still cannot get a result what I want.
My situation is I need to trigger ALT+q key from button html. This should be automatically proceed and will be effect not only inside html(browser) but also on desktop client.
Thanks you.
The effects of keyboard and mouse events fired by Javascript within a web pages are limited to the contents of those web pages. These events cannot reach outside of the web page to trigger keyboard shortcuts in the browser or desktop.
What's the Problem:
Unfortunately I must use an Iframe in a web solution (tenant scoped SharePoint hosted App with App Parts).
The iframe needs around 50% of the website's space and the space for it in the host will be programmatically blown up in size so that there will be no scrolling bars shown. It works good on every browser except Safari. In Safari the touch event seems to be caught by the iframe window and will not be forwarded to the host window. Imagine this on the iPad: in over 50% of the page the user can't scroll down the page.
Hardware I used for testing:
Windows 8.1 (touch enabled screen) with latest version of Safari (5.1.7)
iPad with iOS version 8.4.1.
What I researched/tried so far:
This has nothing to do with everything that can be solved by "-webkit-overflow-scrolling: touch;" and similar approaches. From what I understood in my research, this will make the iframe scrollable but I need to make the host window scrollable when moving the finger in the iframe area. In other Browsers the iframe for example scrolls down until the end and then starts scrolling the host window
In some post one suggested to overlay the iframe with a div (z-index: 2) and then forward the click events from this overlaying div to the Iframe window ( I do have control on this Iframe window, so I can catch events in there). The overlaying div fixed the scrolling behaviour on my testing page but not in my target application, so it's not a reliable solution. Besides that: I managed the click event to be triggered (with same approach as in 3.) but could not manage to make it click links in my iframe-page (what I need... because this is the reason why I want the clicks to be forwarded.)
Another approach was to forward the touch events from the Iframe page to the host page. I did this via postMessages, JSON-stringified event parameters and a javascript library called "jquery.simulate.js" that is used to simulate touch events. I did not manage to trigger the touchmove event correctly on the parent window (and besides that I doubt that this is really good concerning user experience and performance)
I also thought about getting the simple html from the Iframe and add it to the host page programmatically. Unfortunately SharePoint hosted Apps are hosted on other subdomains, so due to the cross-browser restrictions I think is not worthid to follow.
Another approach was pointer-action: None; - This also breaks the link functionality and unfortunately worked only on the desktop
Setting scrolling="no" (or "yes") did not have any effect nowhere (maybe because it's gone in HTML5)
So here I am stuck... and it seems that no one else in this world has the same problem as I cannot find any really working idea anywhere. But I tested around 20 different websites with iframe - and I tested with the Desktop touch and the iPad.... and I have the same problem. I could not find a single Safari-Touch-working iframe throughout all suggestions and possible solutions.
How to reproduce:
A simple
<iframe src="http://www.w3schools.com"></iframe>
embedded on any html page with long content, Safari and a touch device (similar to the ones I used for testing) should be enough to reproduce.
What I want to know:
Does anyone have the same problem?
Could you put me into the right direction? I am actually unsure which of the above mentioned approaches I should continue to go on with
Do you have a completely new idea that I could follow?
Did you test this on any other device and know it's working? (I am thinking maybe downgrading could be a solution)
Edit: (Solution Nr. 2) The overlaying div makes the page indeed also scrollable in Safari, but I could not find the correct way how to forward the click event to the child successfully (meaning: which of the event parameters are necessary to be forwarded to trigger the click event in the child window?)
Edit: Searching again and found out that you cannot create events like clicking programmatically due to security reasons. Makes sense as this will be a big security issue if you could force the user to click on your ads for example.
How can I click on specific (x,y) coordinates on a web page?
So, I'm running a small wordpress website which uses Livefyre comment system plugin. The website also uses Nicescroll, a plugin that makes your scroll bar 'cooler'. Now, whenever I try to create a space between letters inside the comment box, instead of a space, I get my window scrolled to the bottom of the page ( using Chrome ). I have tried various javascripts found on StackOverflow, without succes. I wanna mention that everytime I disable Nicescroll plugin, everything works perfectly.
What can I do to prevent my browser from scrolling to the bottom of the page when trying to use spacebar inside that specific textarea ? Also, I have a custom search box on my website, which apparently is not affected by nicescroll.
Well, you could just set the spacebarenabled option to false to disable scrolling via space bar at all (but users might expect that to work as it would with the normal scrollbar).
If that’s not an option, then you either have to get into the event handling this plugin uses and figure out a way to not have keypress events from textareas bubble up to where it catches them, or modify its event handling to have it check whether the target element of the event was a textarea or not before it scrolls.
I'm using Kendo Mobile in my application and seems it has issue when page includes some iframe in it(youtube video in my case).
Scrolling works fine everywhere except when user taps on iframe during scrolling.
new kendo.mobile.Application();
Here is Jsfiddle example.
You can test issue with your mobile device(I've tested with iPhone 4) with this link.
This is how it should work - iframes are designed to swallow events on top of them - meaning that every touch on the iframe is handled by the page inside it and not the surrounding document. One possible solution could be that you place an overlay on top of the iframe thus catching all events above it and filter them manually (fire them yourself inside the iframe on the proper places).
Another possibility is to avoid using iframes at all.