I would like to use JQuery Mobile in my next project, but we are facing a problem with the buttons. We are asked to make buttons that have two colors. I have looked at examples on juerymobile.com, search google, even tried bing, but I can't find a good answer.
Could someone give me a pointer how I could make this button in jquery mobile?
Related
I followed this example on wc3schools
I tried to implement the exact code to my Project. I want the navigation bar to change pages but somehow I can not get it work. However I'm able to make the navigation bar to work if I Place a url within, like <li>Google</li>.
My question is if navbars can be used between Jquery mobile pages and if it is possible, what am I doing wrong? Would be nice with a working example!
There is some excellent documentation including examples available at the jQuery Mobile demos pages. The specific link to the NavBar docs can be found here. I'd suggest having a read at these documents.
In summary however, a navigation bar is is a <div> with a data-role of "navbar" that contains an <ul> list where each button in the navbar is a <li> which does indeed contain an anchor <a> tag which defines where a click of the specific button will take you.
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 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.
I have a select that I'd like to use the custom menu display (rather than native) in jQuery Mobile. However, I'm just getting strange behavior out of the non-native menu (jsfiddle link). In this case, the non-native menu is only showing one of my three options.
Found the issue right after I posted it. Every option needs a value attribute set (corrected jsFiddle).
Depending on how many options you have, radio buttons groups might be a better option. The problem with any select is that it requires the user to act before ever seeing what their options are. From a user experience perspective, if you don't have a vast amount of options, use radio buttons. This section of a blog post I wrote might help.