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">
Related
I have a requirement to support push-style and overlay panels with variable widths in my desktop webapp and jQuery mobile comes so close, except for the lack of variable panel widths.
I have seen various answers on StackOverflow explaining how to override all the CSS properties to change the width globally for all panels, but I need to specify a different width for individual panels.
Is this possible in jQuery Mobile? If not, I would be interested to know if this is an issue with JQM itself or a technical limitation in general related to the way CSS transitions work maybe?
At this point it is not possible, at least not easily, you will need to heavily modify CSS to make it work. But to ask your question you can have panels with a varying width. If you need an example leave me a comment and I will make you one.
Or if you want to wait a bit, next jQuery Mobile version 1.4 will have this by default. Unfortunately alpha 1.4 will come out in next few days, so stable version will come in 1-1-5 months. If you are not ready to wait I will create you a working example with jQuery Mobile 1.3.2.
EDIT :
My bad, 1.4 alpha is out: http://jquerymobile.com/blog/2013/07/25/announcing-jquery-mobile-1-4-0-alpha/
I'd like to use this upgraded jQuery Mobile dual range slider.
jQuery Mobile dual range slider working but buggy
I need to use it with twitter bootstrap. However, jQuery Mobile doesn't play nice with Twitter bootstrap and is killing the dropdown menu when the javaScript files are placed at the bottom of the page (as per yslow). Here are 3 jsbin examples to illustrate the problem:
with jQuery Mobile added, twitter bootstrap menu fails:
http://jsbin.com/ibecox/1
without jQuery Mobile .js file, twitter bootstrap the menu works fine:
http://jsbin.com/ibecox/2
with all javaScript in the header (bad practice) the menu also works, but I'd need to avoid putting all the javaScript in the header:
http://jsbin.com/ibecox/3
I can see there's a broken link to the twitter bootstrap js, I've fixed it and your sample works fine for me, both the dropdown menu and the progress bar
If all you're trying to do is get jquerymobile's Range Slider to work with Bootstrap, you can use the Custom Download tool to download just the slice that (sort of) makes the Range Slider work.
What you get is unfortunately incomplete, and above all it doesn't self-initialize, so you'll need to do that manually:
$('div[data-role=rangeslider]').rangeslider();
And you'll need to apply some styles of your own to make up for a bit too much being left out in the custom download. But you will get Range Sliders without breaking Bootstrap.
The cause of the Bootstrap break when you use all of jquery mobile is more complex. The Init module applies a ton of classes all over your code, in particular .ui-btn to buttons. That's the main thing that blows up Bootstrap - the nav menu uses a button tag, and that tag gets that problematic class applied, and then in come all the problem styles from jquerymobile.
The hackier way to solve that in the large is to just use jquerymobile without the Init module then Init only what you need - hopefully their buttons aren't one of those things. The best way to solve it is pretty intense: Improve jquerymobile so that there's either no conflict with Bootstrap ever, or, some sort of special noBSconflict() method or something you can run that avoids applying classes that will break Bootstrap but otherwise proceeds as normal.
I would like to add tabs and modal window widgets all over my website. Both widgets will vary in appearance depending on the page but functionality will be the same.
I found that JQuery UI provides both tabs and modal widgets. I also found various custom JQuery widgets such as modal window by Eric Martin http://www.ericmmartin.com/projects/simplemodal/ and tab menu by Soh Tanaka http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/
I need an expert opinion on whether its better to use JQuery UI or custom JQuery Widgets.
Whichever you prefer. If you're building a website, you can just go with custom plugins. The advantage is that you can pick anything you like, anything that behaves in the exact way you had in mind.
However, if you're building a web application or you need loads of different widgets on a page, it's best to use jQuery UI or some other full widget framework. You can really benefit from the consistency, it will make your life much easier to get those different widgets interact with each other in a logical way, with the least possible coding. All widgets use consistent naming of properties, methods and events, you will spend less time reading the documentation and more time fleshing out your application. You can even use themeroller to make a custom theme to match the rest of your site, none of the widgets will look out-of-place from the rest.
I am using a custom master page for branding, but the way I have designed it makes popup dialogs (like new item for lists) look terrible. I know I could probably change the design to make it work, but that would break the actual page (which for the moment looks perfect just the way it is).
My question therefore is this:
Is it possible to change the masterpage only for dialogs and popups?
The standard v4.master page looks just fine for dialogs when using my custom theme so branding is not such a big deal here.
I ended up messing with the design instead. This gave a satisfactory result.
I hate default select control, that's because it can't be styled in IE using CSS.
This is why I developed a new select control from scratch, using HTML + CSS + JavaScript.
I did a great job in the past two days matching CSS and HTML together, but today I discovered a bug wich looks very hard for me to fix.
In IE 7, when I have tow controls on the same page, the one from top does not overlay the one from bottom.
See the image: coolrgb dot com/files/select-help.jpg
Download the demo page (HTML + CSS + Javascript): coolrgb dot com/files/select-help.zip
Please help me, this control looks so nice for me and I want to use it on all my projects from now on. This bug killed my hopes and lot of time.
Thank you.
If you give each control the same z-index, then you will not have control over the stacking order.
I would suggest modifying your control to behave more like a real SELECT element: only one can be open at a time, or losing focus causes it to close. Alternately, you can set a high z-index when the control has focus, and a lower one when it does not.
Another thing to look out for: try putting some other controls like radio, checkbox, and select under your control. You might find that IE also will not hover over those even if you give them a different z-index (as #grawity explained in his answer). This is why you'll typically see widget demos displayed on top of these elements, as shown here: http://jqueryui.com/demos/dialog/
A typical hack to fix this is to use an iframe, but that probably deserves a different question altogether.
Edit: After rereading the question, this answer now seems totally unrelated, but I'm keeping it here anyway.
Not really an answer, but an attempt to explain:
In Internet Explorer, <select> tags are implemented as simple windowed controls, while all other elements are windowless controls (this allows them to be styled). That's why these tags are always on top and don't follow the z-order rules. (The drop-down menu part must be styleable so it's a windowless control, and so it shows under the main part.)
In Firefox all elements are windowless, and in IE8 they should be too.