Header disappears on jQueryMobile demo site
Visit: http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-pages.html Click 'View boilerplate template' (button) Go back via back button Header is missing Confirmed in Chrome 10.0.648 and Safari 5.0.3
Pages loads but without styling when i use a URL redirect
Im having an issue with a mobile site I am building using jQuery mobile. When i navigate to the following http://localhost/stores I get various results depending on the way I access this page. If i navigate to it through the home page of my site, the page is fine and styled correctly. However if I directly access it, it seems to loose all the jQuery Styles ? any ideas ? Thanks
styling for collapsible content blocks
of course nielsen also checked out mobile usability and in his test findings (http://www.useit.com/alertbox/mobile-usability.html) he suggests not to use collapsible content because people get lost on small screens when expanding those blocks. since they have already found a way into jqm - which is totally acceptable since there might be cases in which they match good usability - I would like to propose a change in style. I think - and I already have this problem on my desktop - expanding a couple
why "silentScroll" in function transitionPages 's top
i found jquerymobile do a silentScroll before hide previous page, why it is needed ? because of this , when page's height over screen size, the action will be jump to top -> page change and the animation is ugly for android 2.2(medias) and 2.3(xperia arc) when i do a page change ( page A -> page B ) with silde, the real action is below page A -> page A jump to top -> page B -> page A (with page B bottom) -> page B any suggestion ?
Radio Buttons with 'Selected' icon in JQM
The documentation section in JQM has a great example showing how Radio Buttons can be used in JQM. But the nice looking buttons in the example aren't the ones that sample *code* shows. When you create buttons using the code, there are no "bulls eye" icons that indicate which radio button has been selected. That leads me to two things: 1. How do you accomplish that same look and feel? 2. When there is an example, is should be matched *exactly* by the code sample provided (IMHO) In this case, the
page loaded for the second time you have problems with html()
When I load in a second time the same page, $ (div). html () does not work. Example: index -> page1 (at this point when make a change to a modified textarea a counter that in a div) page1 -> page2 page2-> page1 (test with alert () and the value is correct, but ignore the $ (div). html ()) My solution, By rudimentary way, the page2 is load with location = 'url' onclick. Ugly but it works Someone give me some help?
Nightly build button states
Hi I know its an in-progress but I tried the 20110422 and noticed a change in how button states are set which you might not know When changing page from a button in a controlgroup and then clicking back button, the clicked button is set to its down state when returning. I listen for the pagehide event and reset the buttons with a mouseout(). There maybe a better way but this works Now the clicked button state is set by jQM after the pagehide event so the down state is still showing. On the test site,
Perfomance Problems in v1.0a4.1 with ajax loaded listview
I have a dynamically generated listview via ajax In firefox 4.01 it takes the follow times to load and render the list Load Data: 373ms Load List: 38ms refresh list: 133320ms In latest safari Load Data 459ms Load List 34ms Refresh List 2545ms How come?, do I need to change the refresh process to apply the correct styling?
Theme "a" background depth
I noticed that theme "a" (dark one) seems to have lower color depth than other themes. It looks like the background gradient was stretched so much it lost smoothness or like you would have 256 colors set on your graphics. This happens in desktop browsers like Firefox etc. and in webview on my HTC. It's a shame because this theme is really cool.
How to load a wikipedia page into jquery mobile?
I want to load a wikipedia page into data-role section of jquery mobile, but how?
How to set data-theme b in data-role collapsible
Unable to set the data-theme="b" to plus minus icons in data-role="collapsible" with data-theme="b", its plus minus get data-theme="d" by default... can we replace the data-theme by any chance. I need plus minus icons inline to the theme b arrow with dark gray shade. Actually, I just want to show hide the sub content in list view / collapsible.. pls Suggest? following is the html - <!-- --> <div data-role="collapsible-set" > <div data-role="collapsible" data-collapsed="true" data-headingontop="false"
styling for read only lists
you guys think the style of the read only lists look a bit too much like they are clickable? maybe add a unique style to the swatch? or a class to the ul to make it possible to override existing styles?
page theming
I have a little struggle with the default theme ... I try to use the black theme (a) or later my own. I thought it would be enough to just add the attribute to the following div <div data-role="page" data-theme="a" id="container"> but it turns out that not all elements get the a-theme. Submits and listviews default to c-theme. any idea why? Documentations says that all elements with no data-theme attribute default to c-theme but I thought my code would globally set the wanted theme. Do I really have
iPad page flicker on alpha 4.1
Hi, I am new to jquerymobile and I am trying to create a simple site for iphone\ipad. The site has a login part. navigating from homepage to the login form works fine, smooth page transitions. As soon as I submit the form (log inn) the page transitions start to flicker, there are no more smooth page transitions. Why is this? I am using the latest alpha build (4.1), and from what I have read on the forum this was supposed to be fixed in alpha 2. This problem does not occur on iphone 4 or chrome,
Beginner help: strange reaction of a page on iphone...
Hi all guys, please I need help... I have just started to build a mobile version of a website I have designed and developed for a client using jQuery mobile, it's fantastic and I love it but I ma having a strange little problem. This is the link to the website I am working on is http://clients.novasolution.com/mbc/mobile/ and if someone can please test it on http://testiphone.com/ you will be able to see the problem.... The first load of the home page is perfect it works like should....now at the
Undesired header blinking when transitioning to new page using Scrollview
I'm working with the scrollview code for jQuery mobile and am experiencing an unwanted blinking of the header after transitioning to a new page within iOS 4. You may view a demo of this issue by clicking the bottom nav bar buttons here: http://redone.org/_scrollview/ Is it possible to turn off this effect/fix this glitch?
catching form submission
Perhaps I'm missing something obvious, as I'm pretty new to jQuery. But I have a button sitting in my footer that submits a form via POST. I'd like to display the results of that form as a dialog rather than loading a new page. I assumed I could just use $('#theform').bind('submit', f) to add a listener to the form submit event and stop it to do my own thing. But it doesn't seem to work. I've tried calling bind() both before and after loading the jquery-mobile code, with no luck. Ideally I could
QUnit and jQuery Mobile
Hello, I've played around a bit with QUnit Testing and jqm-1.0a4pre The jqm css is preventing QUnit to display the result. .ui-mobile-rendering > * { visibility: hidden; } is the problematic instruction. I helped myself by putting <style type="text/css"> .ui-mobile-rendering > * { visibility: visible !important; } </style>Into my test page. Just writing to help, if anybody got the same problem! Is anybody testing a jqm application ?
Stuck in "ui-mobile-rendering" - page not displayed
Hi All, From time to time, I'll deploy my app and when I fire it up all I get is a blank screen. The body seems to have the "ui-mobile-rendering" class applied to it, which sets it's visibility to "hidden" and it never recovers. This issue *may* be specific to Firefox, as I don't recall seeing it in Chrome. But, I use Firefox for most of my development due to Firebug. Please let me know if others have seen this, or if I can provide more info to help get to the bottom of it. Tom
remove rounded borders on link images in footer
i've spent a day on this now (css is the original css file) i have a simple footer: <div data-role="footer" class="ui-bar" data-position="fixed" align=center data-theme="a"> <a href="index.php" rel=external><img src="images/nav-home.png" width="37" height="37" /></a> <a href="projects.php" rel=external><img src="images/nav-projects.png" width="37" height="37" /></a> <a href="all-cats.php" rel=external><img src="images/nav-estate.png" width="37" height="37" /></a> <a href="contact.php"
Form Elements in Lists
I noticed that the docs and demos page now shows that you can put form elements in lists. Is this new? If so, do I need to update my js and css files to get it working?
Alpha 4.1 not working well with Firefox 3.x.
When using the desktop version of Firefox (versions below 4, i.e., 3.6) the following regex (from Alpha 4.1) is causing Firefox to stop working: pageElemRegex = new RegExp(".*(<[^>]+\\bdata-" + $.mobile.ns + "role=[\"']?page[\"']?[^>]*>).*"), This only occurs on 'heavy' pages, i.e., pages that have a lot of elements to load, and script to work with. I tracked the problem back to the regex above, but I do not know what it does or how to fix it. Again, only seems to occur with Firefox 3.x. Anybody
Using jquery mobile in Movable Type?
I thought I was doing something pretty simple. I just want to use jquery mobile in Movable Type? It's not working...well so far I just have a header, and it's not appearing as a mobile header. Just as text. Here's what I've got: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns= "http://www.w3.org/1999/xhtml" id= "sixapart-standard"> <head> <title><$mt:BlogName encode_html= "1"$>: <$mt:ArchiveTitle$> <link rel=
List items stay selected with 1.0a4.1
List items stay selected when clicked with 1.0a4.1, at least, on my HTC Desire, not in Google Chrome. In my app clicking a list item moves you to the next page. When you return to the list the item is still selected. This happens with every list item so after a while all list items are selected.
Checkboxes moving around page.
I have checkboxes laid out in a table. When I navigate away from the page and come back the buttons move out of their table cell. All the buttons shift toward the top of the page. The buttons in the code that move are the checkboxes. CheckboxRevDec CheckboxTracking CheckboxRevRa CheckboxPEC Code as follows <div data-role="page" id="Main" data-theme="a" style="margin: 0px;"> <div data-role="content" style="margin: 0px;"> <div style="border: 2px solid rgb(0, 0, 0);margin: 0px;">
display:none buttons are rendered visible
If I have this HTML <button style="display:none"> Click me </button> Then JQuery Mobile makes a div styled like a button that is actually visible on the page. 1) What markup can I put on the button to hide the created button? Some data- attribute? 2) Can this be fixed? Thanks!
2 Themes on one page | Buttons not always present
First off. New to JQM and am loving it. FIRST QUESTION: Is it possible to have the use of two themes on one page. Obviously since it is a theme, I assume that once you apply it to the layout, it is set, but I was trying to $htmlout_body .= "<li data-role=\"list-divider\" data-theme=\"c\">" . $s_time_12h . "</li>"; dynamically change what theme was being used on certainly elements. I am sure I could throw some style="" code in the line above and manipulate it that way, but would rather stick
equivalent to jquery UI "slidestop" event
I'm trying to use a slider to navigate between pages. Dragging the slider changes the "page destination" = aria-valuenow . Releasing the slider should fire a changepage event to the selected destination. Works fine on desktop with "mouseup". On mobile, I'm stuck. Jquery UI "slidestop" doesn't seem to work and the other JQM events don't really fit. Thanks for any ideas. Here is the code: $('.statusBar .ui-slider a').live('mouseup slidestop', function () { goto aria-valuenow-page });
Content formatting issue when going into theme page and then backing out
Hi, On Windows using the latest Chrome browser I went to this demo: http://jquerymobile.com/demos/1.0a4.1/#docs/content/content-themes.html - go to the bottom of that page and click the "Switch Theme" button - when the dialog opens hit the "x" button (top left) to cancel and go back to the previous page - the formatting is all messed up and the header and footer are now gone This happens on Chrome (Windows 7), the iPad 2 (Safari Mobile), and on my Droid X (Android 2.2). Anyone else noticing this?
External Link Not Functioning
Hi guys, I am trying to get a link to our non-mobile page to function. Here is my code, the last link in the list being the one I'm referring to. Can anyone help me out? The site goes live (fully promoted) in 24 hours, thanks for any help you can give me! To access the mobile site from a desktop: http://www.ohmedcann.org/?browser=mobile if you want to see whats wrong. <div data-role="content"> <center><img src="images/mobileheader.png" /></center><p/> <ul data-role="listview" data-theme="b">
How to make page scroll horizontal
My page has content that cannot wrap. It is a chart. jQuery Mobile just cuts it off. Is there anyway to make the page scroll like a normal page?
Printing advice / best practices
I'm developing a jQM app that provides event schedule info (similar to the jQuery conference app that helped us get to the proper room to hear the speaker we wanted to listen to). So, I deploy my prototype and the first request I get is for some way to print the information! Nice - isn't the whole idea not to have to do that?? But it is a legitimate request - at least until I can provide the information while the mobile device is not connected to the web. My question: does anyone have advice about
horizontal text fit and scrolling
Hi, I have seen some other strugling with this also. With the default behavior of jquery mobile a text in f.e. a listview is truncated from the screen when it is too large (and no horizontal scrolling is possible). This can be solved by adding in the html style="white-space:normal". This is nice for text information, but you might not want to use this with f.e. button text or header text (and still no horizontal scrolling of the webpage is possible). In the data-role "page" I have added style="width:auto"
Switching between mobile website & normal website
Hello, I am implementing mobile site in jquery mobile & it will be having a button to navigate to normal website. So when user will goto normal website, he should be having option of going back to mobile website again How it can be done? Any help would be appreciated. Thank you.
Anyone want to check my tutorial on dynamic web apps with jqm for best practices?
I'm starting to put together a series of tutorials on building a dynamic web application with jquery mobile. If anyone notices any best practices gone wrong please let me know before I lead too many people astray. http://jasonstechbits.blogspot.com/2011/04/intro-to-building-dynamic-apps-with.html I'm planning on doing one on integrating with spring security and one on using json and jquery templates next. Thanks Jason
link to internal html files with phonegap
Hi I have jquery mobile project with multiple pages. Currently all these pages are in one index.html page but I've noticed that this is slow to load due to it's size and also a bit of a pain to manage. I'd like to split it into multiple page (contacts.html, info.html etc). How ever the only way i seem to get links to work is by using file:// or rel="external". These don't load the transition effects though and the file:// version won't work in phone gap. I've tried ./contact.html, ../contacts.html,
dot in for-attribute
following lines of Code let jQuery Mobile crash <form method="post" action=""> <div> <label for="component.test">label</label> <input id="component.test" name="rec" value=""> </div> </form>if there is no '.' in the for-attribute then everything works fine the error returned by firebug is: uncaught exception: Syntax error, unrecognized expression: [for=component.test]
Nightly build list scrolling much smoother
Just tried the latest nightly build and was impressed by the improvement in scrolling speed of list views. Bugs like no down state on buttons and maybe others mean can't use it but if there was any chance of releasing the improved scrolling as a separate element that would be great thanks
Is there any way to have the split button list icon on the left?
Currently in the demo, the gear icon is on the right. Is there any way to have it on the left? Similar to the minus icon showing up on the left when you "Edit" a contact on the iPhone.
listview("refresh") not working from 2nd item in the list.
I've "continent.html" with two list items: <ul data-role="listview"> <li><img src="A.png" class="ui-li-icon"> <a href="countries.html?c=a">Asia</a></li> <li><img src="E.png" class="ui-li-icon"> <a href="countries.html?c=e">Europe</a></li> </ul> "countries.html" consumes JSON and populates the list: <div data-role="page"> <script> $.getJSON("http://api.somewhere.com/countires", function(data) { $('#catList').empty(); $('#catList').listview(); $.each(data.DATA, function(index, item) {
Next Page