I am using Bootstrap 3 and I need to hide the dropdown when clicking anywhere outside on iPad.
Also I need to trigger dropdown on hover instead of click.
This is my code so far: http://codepen.io/sushimashi/pen/Hfcse
I don't see the problem with the click, the dropdowns hide when I click outside (tested in my PC but I think it must work same on iPad). Btw, in this question you can find the solution about hover in dropdowns.
Related
When I use this setting I have one in a form in a dialog, and one in a form that is in a popup. The dropdowns look different.
When data-native-menu="false" the dropdown in the dialog appears in another dialog, which actually looks quite nice. I assume this will allow a more consistent look and feel accross devices.
However when I use this setting data-native-menu="false" on a Select in a popup it does not show the standard select, not the dialog.
Thanks
There's a good reason for this.
As you can see there are 2 kinds of select widget. First one uses native looking select box (one showed with data-native-menu="true"). Other one still uses native select box but it hides it and shows custom jQuery Mobile select box widget (one showed with data-native-menu="false"). This jQuery Mobile widget is shown as popup. This is important point.
Second, mentioned problem is unsolvable, at least from the point of current jQuery Mobile framework, and here's why. In few words, when working with jQuery Mobile popups, one popup can't open another popup. Two popups can exist in the same time. Thou you can always close one popup before opening another one, but this is not usable in your case. Because jQuery Mobile select widget is popup it can't be used inside classic popup widget.
If you don' believe me you can find it in official documentation here, just search for text: "Chaining of popups not allowed". And you will see this text:
The framework does not currently support chaining of popups so it's not possible to embed a link from one popup to another popup. All links with a data-rel="popup" inside a popup will not do anything at all.
On the other hand, dialog is a variation of a classic jQuery Mobile page, just with large margin and semi transparent overlay. It can be used to show popup, just like normal jQUery Mobile page.
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
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.
I dynamically create a dialog page, and inject two radio buttons into it. The codes works well only for the first visit. In the following visits, strangely the radio buttons are not enhanced.
The codes are at http://jsfiddle.net/BScLu/. You can open, close, and re-open the dialog, to try out.
JQuery Mobile can get finicky when things are dynamically generated because you're inserting those radio buttons after the page has already been created in the DOM. Would you be able to insert them on the $('#myDialog').on(pagebeforecreate) event?
I have multiple sets of jQuery radio buttons on a jQuery modal dialog. Clicking one in each set hides or shows divs. Anyway, they work perfectly in Chrome, but in FF and IE, they work hide/show the divs properly... but they start disappearing as they're clicked.
I've tried adding plain radio buttons that do nothing, but they still disappear individually as they're clicked. Am I missing some sort of declaration?
I would post the code, but it can literally be a copy from the jQuery website for radio buttons and they'll still disappear.
Thanks for any help.
Have you tried the same example page from another system? If all examples you can find have this behavior, I'd start to suspect your display driver or even hardware. Give a link for a page that you see the problem with, and we can see if it happens for us.
I'm still not quite sure what the problem is, but I implemented a work around.
In Chrome, I remember I had to add an unused jQuery radio button at the top... that hides when the dialog is opened... and "unhides" when the dialog is closed (the dialog is hidden when closed, so the user doesn't ever see this radio button).
For some reason I had to add another one of these jQuery radio buttons that hides and unhides itself to prevent the disappearing jQuery radio buttons in IE9 and FF. So in my case, Chrome required one of these fake buttons... while IE and FF needed two.
Anyway, I think the root of the problem stems from my overall layout template. I think multiple divs all over the place are screwing something up somewhere.
I'm just an amateur programmer so I know this isn't the solution that I'm sure many people would be looking for, but it works for now so at least I'm able to move on.