I have a website https://www.itraveleo.com. It is on Angular 4 and we use the Kendo-UI for Angular controls. On an iPhone the keyboard keeps opening on the following pages on page load:
Homepage - when I click to go to homepage using the logo or using the menu item, the focus goes to the "To" combobox and the keyboard opens up. This does not happen on initial load of the website
Blog - click on the DREAM menu item. On this page, click on any blog. The focus again goes to the To combobox and the keyboard opens up.
Right below the heading of each blog (on mobile), the category and region is listed (e.g. North America / Asia, etc. and Cosmopolitan / Family Time / Outdoorsy, etc). Click on each of these one by one. Again the To combobox gets focus and the keyboard opens up
Tried multiple common fixes but nothing seems to work on the iPhone (activeElement blur, setting focus on another element)
Related
The iOS Application have menu button which contains list of events. In the list there is a event of showing a list. And list can be access directly form the main page by clicking on navigation icon(on navigation bar) for list.
The first time I click on list from menu page it works fine but second time it shows a result from last visit. It appears on the top of the list.
So, I have to remove the result which appear in top of list for second time.
It only happens in iOS. Same code for android doesn't give any problem.
I work on jquery mobile with phonegap
I would like to detect a click on the physical back button to close my popup.
Currently when I click on that button on a mobile support, it returns me to the page visited previously, I think it only uses the history.
If this is not possible in pure js, then maybe just block this physical button.
Thanks
I have a client that wants the desktop version of foundation 4's top bar to appear on the ipad instead of the mobile version. This is fine as their site only has a few sections, but each section has sub-pages and so the nav displays dropdowns for each link.
I modified the break point and the nav looks fine on the iPad, and tapping a parent link displays the submenu - but I can't get the dropdowns to close once one is open - you can switch between dropdowns, but tapping anywhere else on the screen makes the dropdown flash off and then it reappears.
I've tried adding some JS to catch clicks anywhere else on the document body, and to hide any visible sub menus, but it's not working, I still get the off/on flash - I can't see anywhere in the foundation.topbar.js that would be overriding it, but I also can't think of anywhere else in the code that would cause this.
Does anyone have any experience of getting these desktop-version menus to work nicely on an ipad? And before you say 'the ipad is a mobile device, you should use the mobile nav that works' - I already tried convincing the client of that and they didn't go for it :/
Easiest solution:
if (Modernizr.touch) {
$('.top-bar-section ul li .parent-link.js-generated').show();
}
foundation already prepares the top level nav item to be shown in the dropdown of the mobile menu. You can use this also on desktop version of the menu on touch screens like iPad.
Andrea
In a multi page template,I have three category pages (comedy, action, drama) that you can swipe between each containing rows of images (Seinfeld, Modern Family, Family Guy, Big Bang). Clicking on an individual image should open a dialog box (Seinfeld summary), close when you click the close button, and stay close. Initially it works, then what happens is based on the number images click after two, it opens and closes n -1 (clicking the 3rd image, opens the dialog box twice).
what could be the reason behind this?
Without your code I can be sure but I think I understand what is happening to you.
You have a problem with multiple event binding. Because of jQuery Mobile architecture it is possible to bind an event numerous time to some object.
I have an blog ARTICLE on jQuery Mobile page events handling and there's a chapter dedicated to this problem, just search for the chapter Prevent multiple event triggering. Or it can be found HERE.
In few words always unbind event before you bind it to some object to prevent this from happening:
$('#test-button').die('click').live('click', function(e) {
alert('Button click');
});
I am using jquerymobile.com for my mobile application development. For all the text(type="text") elements its shows Alphabet keypad in Mobile and For (type="number"), it shows number keypad by default and also it shows Go button on bottom right corner of keypad. How can i show the Next button instead of Go for all the input elements except the last element of the page?
I know for iOS the [Previous][Next] buttons are at the top of the keyboard layout. If there is no input to navigate to it's grayed out
http://jsfiddle.net/xTtmQ/
http://jsfiddle.net/xTtmQ/embedded/result/ (view on iOS device)
http://jsfiddle.net/xTtmQ/1/
http://jsfiddle.net/xTtmQ/1/embedded/result/ (TabIndex: view on iOS device)
You might be able to play with the TabIndex as well.
At this time I'm unaware of any custom keyboard options/layouts for HTML5 webapps