I have a web app that uses the Facebook Share dialog using javascript. It works fine on the web however on the iPad, once you click the share button on iPad after typing in text, the keyboard doesn't disappear once you're back to the original page. I tried using this:
$("u_0_l").click(function() {
document.activeElement.blur();
$("input").blur();
});
But the same thing happens on the iPad (keyboard is still there). I don't think it's catching the id of the share button (#u_0_l) but I'm not sure what other element to tie it to. I tried putting it in the callback for the facebook button but the keyboard is still there. It is posting to FB so that's not the issue. I've googled this for so long and can't find anything useful. Any ideas how I can get this to work?
Related
I'm using pushState to have adaptative URLs on a single-page web app. I'm also using onpopstate to have native-like behaviour with mobile devices' back button. I have managed not to lock the user out of their history, which is everyone's main concern on the threads I read mentioning how to do it.
It seems however that the trick I'm using only works when the window is clicked. Even scrolling doesn't work. It's a problem because users might not necessarily click and still hit the back button to close a menu. I've only tried it in Chrome with the following code :
window.onload = function(){
history.pushState({}, '', '')
}
window.onpopstate = function(){
history.pushState({}, '', '')
}
You have to open a new tab, browse to the file and hit the back button. If you don't click the content of the page before, it should walk back in history instead of being locked by the script. I've tried to use .focus and .click with no success.
Any ideas?
EDIT
This is what this person is talking about, and they definitely phrased it better than I did
The popstate solution works for my PWA, however I just want to point out that, from my experience, Chrome WILL close the PWA if it doesn't detect ANY user interaction, before the click on Android's back button (the interaction can be a link click, zoom-in, scroll ...). I was testing this code snippet on a minimal sample app, and couldn't understand why it wasn't working. I assume it is a safety measure against spam pop-ups, but hadn't read anything about it in the guides fetched by Google.
Seems like PWA aren't quite there yet.
Currently working on a solution which uses same solution for both mobile and desktop web. However, a issue arises when user clicks on link which should take user to a new component, instead it only hides the virtual keyboard and keeps the user on the same view. This is not constant. Happens every now and then.
Problem: don't know how to even capture this issue on debugging. The problem only occurs when I try on a physical phone(only tried with chrome on Android). Not on chrome browser with mobile view.
Tried to point down to the component where it might be occurring. But no idea where to pin point the issue?
My code can be viewed here
I have clicked many buttons without ever hitting a problem like this. I'm using VB 2010. If I click on the control programmatically or manually, the screen flashes like it is just refreshing. However, if I open a separate IE window, I can click the button and it advances to another screen as expected. I have researched this on other sites and have found one suggestion that the control is using a different version than the full version, which is IE 8 in my case. This still doesn't provide a solution. Can anyone please help? Here is the code which clicks the button as well as the html of the button.
WebBrowser1.Document.All("posForm:estimate").InvokeMember("click")
<button onclick="validateForEstimate(this, 'NonITS');" type="button" name="getestiamte"></button>
Maybe try the Microsoft Browser go to your toolbox right click and click choose items then go to COM components and use the filter to find Microsoft browser then check mark it. Add it to your form and done.
I'm currently developing a site where I hide the header in mobile devices, it can be opened using a anchor with a jquery slideToggle function. Great stuff. Inside the header there's a search field and some other buttons.
However, when I focus the input on android and the virtual keyboard opens up my header closes. hiding the search field and everything else in it.
I have come to the conclusion that it is the keyboard that toggles this "bug".
Have anyone ever seen this before? I have no clue what I'm even looking for. Bloody android! :)
Thanks,
Robin
var searchToggle = $('.search-toggle'),
subHeader = $('.sub-header');
searchToggle.click(function(){
subHeader.slideToggle();
});
Problem solved. Found out that when the keyboard opens up the window trigger a resize function I used.
Im making a mobile optimised website that has fullscreen dialog windows that open when you 'click' certain elements on the page. These windows are actually just divs that are animated into position.
If the user presses the browser back button when one of these dialoge windows is open I want the dialoge box to close, not for the page to be left all together.
I can do this with iPhone. If I make the element you click a link fragment, then on the window.onpopstate event I can use window.location.href to check the url and hide the dialoge box if appropriate.
However I cant get this to work on Android as window.onpopstate isn't supported (at least with the phone im testing with which is quite old). How can I get round this? jQuery Mobile can do this, so I know it must be possible somehow.
Thanks
I havnt looked extensibly into the level of support of this, but window.onhashchange works for my pretty old Android.