I have a a select menu in jquery mobile site you can find the work here:
http://www.emadzedan.com/TicketsJOMobile/#checkout
Note: please try to see the (Days) select menu
I tried to make it custom pop up menu but JQuery do not respond and I tried to make it native but the options do not scroll it is shown as in the link the options is long and exceeds the page height.
So I'm stuck at this (error) and I searched the internet for more than 2 days but no one is saying anything about it.
the final and perfect answer is the above to answers but two clear things up:
1)it is actually conflicting with JQuery UI and putting it before JQuery Mobile solve the issue.
but:
if you trying to use JQuery UI Menus (Styles) you need to add the following Styles in your CSS file:
.ui-selectmenu-menu .ui-menu{
height:150px;
}
/* Note to modify the height of the select menu for specific menu use (ID-menu)*/
#year_Traveler4-menu{
height:50px !important;
}
Thanks All
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'm a newbie with jquery mobile but I want to build a vertical navigation panel with its specific animation (no page changing).
A good example is here ( i don't want sencha touch, i need to do this with jquery mobile): http://dev.sencha.com/deploy/touch/examples/production/kitchensink/index.html
For example, if you select "User Interface", just the menu is updating (and a button back appear...)
Another good example is IOs, as the dropbox Ipad application (cf http://www.youtube.com/watch?v=qeqw5OroHzY)
How I can do that with jquery mobile ? I see panels, the 1.3 new feature, but it's not really the same thing ...
Thanks for your help
Try this: jQueryUI's .menu
Other than that, it's just a fancy <aside>
Throughout the jQuery Mobile docs, they use a left-side menu for navigation that changes to a more mobile friendly version when the browser width is smaller. You can see an example on this page.
They use this layout throughout the docs, and I can see in the source that they use two divs with the IDs "content-primary" and "content-secondary." My question relates to the fact that I can't find anything about this structure actually discussed in the documentation. It seems very strange that they would not include such a useful widget in the Framework. Did they use custom code to make this, or did I miss it in the documentation somehow?
I'm frankly quite surprised to see how challenging it's been to find a left nav example that works consistently and as expected in JQM.
I wound up copying code directly from the JQM docs, including grabbing their custom .js and .css scripts (which defines the .content-primary and .content-secondary classes, as well as the various #media queries which make the menu responsive).
The JQM docs do not use the "multi-page" format. Instead, each nav menu item links to a wholly separate URL (presumably prefetched into the DOM by adding data-prefetch="true" to the link), so each new page/URL must redefine the same nav menu over again.
This immediately makes my developer brain think "let's abstract the menu and include it on each page automatically". But how to 'include' the menu on each page without PHP (or other server-side language)? This is the problem I have yet to solve.
You may be able to call the $(document).bind('pageinit', function to manually inject your menu into the loading page by using javascript/jquery, but I have yet to figure out how to do this properly.
I'll keep you posted if/when I have a workable solution.
Actually this is not specific to jquery mobile, this is CSS3. You can check documentation here: http://www.css3.info/preview/media-queries/. Essentially what they do is specify style rules for different screen width using media query as shown in this example:
#media all and (min-width: 650px) { // you can define your width here
// style rules here
}
Are you talking about something like the left menu at http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/panels/panel-nav-form.html# ? Haven't played with it but it looks like these days it just takes
<div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal">
There seem to be many questions/answers on how to change Twitter Bootstrap's dropdowns from appearing on a click to appearing on a hover. The builders of Bootstrap have a good reason for using click instead of hover -- hover doesn't work on most tablets & phones. However, one of the reasons why I am using Bootstrap is for its responsive features. I want one site that can be viewed on desktops, tablets and phones. Although clicking to get the dropdown is necessary for tablets and phones, it is not the expected behavior for desktops. I'd like my site to be responsive, but not at the expense of having to retrain the users!
Is there a way to serve up hover dropdowns for desktops and click dropdowns for tablets and phones?
I created a plugin (working on a couple refinements, but it definitely works as is) that allows dropdowns to work on hover, but it doesn't interfere with Twitter Bootstrap's click event, so you can safely bind both, which essentially means if there is a mouse, it will activate on hover, but if there's not a mouse (i.e. a touchscreen on a tablet), it will still activate when clicked.
I have the plugin hosted on GitHub: https://github.com/CWSpear/twitter-bootstrap-hover-dropdown
It works by explicitly calling it, but I'm going to tweak the code to work with data-attributes in the near future.
You can with "Responsive utility classes"
http://twitter.github.com/bootstrap/scaffolding.html at the bottom of the page
I was searching exactly for this. And I've found better solution ( I think ).
We can easily do this using awesome Modernizr.js library.
We can detect the touch screen device by the below function.
function is_touch_device() {
return !!('ontouchstart' in window);
}
And then we can disable the URL in the hyperlinks dynamically via Javascript either by changing the location to "#" or by preventing the default action of the parent menu items.
Final code would be as below.
$(document).ready(function() {
/* If mobile browser, prevent click on parent nav item from redirecting to URL */
if(is_touch_device()) {
$('#mainmenu li > ul').each(function (index, ev) {
/* Option 1: Use this to modify the href on the <a> to # */
$(ev).prev('a').attr('href' ,'#');
/* OR Option 2: Use this to keep the href on the <a> intact but prevent the default action */
$(ev).prev('a').click(function(event) {
event.preventDefault();
});
});
}
});
For more details, you can see this link
I do believe someone will vote me UP :-)
Thanks
I'm using multiple jquery ui widgets for my project and as the project has progressed I've just added what I've needed to the bottom of the list but now I get some errors. In this question is saying some widgets inherit properties/functions from others so what is best order to arrange the script tags for all the widgets to work properly without errors?
Here are jquery files I'm using in the order they are in the HTML
jquery.1.7.2.min.js
jquery.ui.core.min.js
jquery.ui.widget.min.js
jquery.ui.position.min.js
jquery.effects.core.min.js
jquery.ui.tooltip.min.js
jquery.ui.dialog.min.js
jquery.ui.datepicker.min.js
jquery.ui.tabs.min.js
jquery.ui.selectable.min.js
jquery.ui.autocomplete.min.js
jquery.ui.menu.min.js
jquery.ui.button.min.js
jquery.ui.draggable.min.js
jquery.ui.mouse.min.js
jquery.ui.resizable.min.js
Thanks
Looking through the compiled UI file is looks like it might be this:
UI Core
Widget
Mouse
Draggable
Droppable
Resizeable
Selectable
Sortable
Effects Core
All effects included alphabetically
Accordion
Autocomplete
Button
Datepicker
Dialog
Menu
Menubar
Popup
Positon
Progress bar
Slider
Spinner
Tabs
Tooltip
Please specify what widgets are you trying to use. You should always import jquery first, and then look at the widget dependencies.
You can also "build your own jquery" here and any required dependencies will automatically be checked automatically.