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
Related
I've used Vuejs and Framework7 in my PWA. I want to open a remote PDF file in my PWA and also it's important to me that users be able to back to my PWA after opening PDF. I did this using :
window.open(pdf_url, "_blank");
And it works fine for iOS > 12 and after opening pdf file there is an "OK" button for closing pdf.
But for example in iOS 11.3 there is no button and user has to use home button to close PWA.
I tried to solve problem using iframe but I can show only first page of the pdf.
Is there any way to fix this issue?
You can resolve this issue by doing some tricks (for any device without back button):
if you use iframe, you can set height manualy with overflow scroll, and I think this will resolve issue (dependence of style or lib dependency, so that may be not work).
you can add back button to your navbar, or Toolbar to let user click on it to back to previous page. (I prefer this solution).
you can render pdf in popup nested of normal html page, and then you can customize popup component by handling back button, or handling close by dropback overlay.
I use second and third point in real project and its work fine...
This is sample close button code used in popup:
'<p>'+ i18nextHelper.i18next.t('Exit From PDF') +'</p>'
Note: You can also customize height page for pdf page only, and add normal button bellow it, or by add absolute positioning button above PDF, but I think if you use second or third point will be best.
Good luck.
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)
So this problem is a little tricky. Basically, I found that the menu bar won't pop up in a UIwebview the first time you long press on a word. It would show something like this:
Example img
The words are selected, but the menubar is now showing. However, the second time you longpress on another word,the menubar just pops up fine.
Example img
Also, if you tap anywhere in the UIwebview or scroll it before longpressing on a word, the menu bar also shows up. It's just when the long press action is the first action you have with the UIwebview, the menu bar won't show up.
I checked this problem with some other third-party web browsers on app store (firefox, chrome). The same problem exists. However, Safari does not have this problem. Also, my iPad 2 does not have this problem either. But my iPad air does, so do the xcode simulators.
Not sure if I'm describing this problem clearly, thanks in advance for anyone that helps.
This problem is kind of Bug in iOS 9 web view
Me and my colleague was having same discussion yesterday.
Also it is only on Web view,Messaging apps works fine
I created a mobile version of my website, testing along the way on my Nexus 5. After testing on iOS 7 (on an iPhone4 and iPhone5S), seems like scrolling on the side menu is broken.
Here's a live demo (no links work, and you'll see a huge CSS & JS file, since it's for the whole app): http://www.altertecnia.com/menu/
Click on the top left icon, and the menu is displayed. Now, on desktop and Android, I can scroll the whole page (including the menu) just fine, and click on the right side of the menu to close it. But on iOS7, when I try to do that, only the background (content of the page) scrolls, not the menu.
Any ideas what could be causing this?
SO...my app has a few issues, but I am DESPERATE to solve this one first. Any thoughts and suggestions are welcomed. Here is the app:
http://pocketfacilitator.com
Here's the issue - (NOTE, Firefox doesn't even allow this issue to fire, so maybe try Chrome or Safari, or a mobile browser):
From the home page, click on Portables > List All Portables. Now, click on any of the PLUS signs on the right (or two or three, doesn't matter). Now, check the "TODAY" page (in the very bottom nav bar). It will display the list of games you clicked on, but the way they are displayed is totally jacked. BUT...if you RELOAD the page (or just click the red CLEAR button), and repeat the process, it looks normal. What have I done wrong?
If you dare: in Firefox, it won't even let me add an activity -- clicking on the "+" button yield NO effect.
I appreciate any help. Cheers!
Try to call refresh() method on your listview after you dynamically add items
$(this).parent().appendTo('#todaylist');
$('#todaylist').listview('refresh');
See Updating lists
If you add items to a listview, you'll need to call the refresh()
method on it to update the styles and create any nested lists that are
added.