No visual feedback when touch a regular link.
The following css style removes the UI feedback when you touch a regular hyperlink in iPhone/iPad/Android 2.1 browsers: ui-mobile-viewport {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);} I think this is intended not to interfere with jQuery mobile's own visual touch feedback (which I think needs improving), but it makes for very 'wooden' websites. On some Android models you can use the trackball to 'tab' between all the clickable elements on a page, but this style removes that ability. On iPad/iPod
pageshow event not working
I can't seem to get the pageshow event to work. The html below is the page that I am navigating to with the pageshow event wired up. However when the page opens the alert is not invoked. I'm sure I've done something wrong but I can't work out what? <!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"> <head runat="server"> <title></title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css"
problem to load jquery slideshow plugin into jquerymobile project
hi there, i use jquerymobile and want to have a little slideshow fpr my mobile website. but if i load pages with ajax the slideshow dont run ( i think ajay doesnt load this script: <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> if i load my pages without ajax (rel:external) slideshow script run!! please help im newbe thanks!
Screen flashes when doing a page transition. ???
I am creating an Android app using jQuery mobile. I am using 1.0a2. I have a nested list and when I drill down into the list, every time the page transitions to the next list, the screen flashes first instead of smoothly sliding. Is anyone else seeing this?
Mobile Confirm Dialog
Has anyone figured out the best way to do a confirmation dialog in jQm? I could use a standard confirm, but I'd rather have it styled and themed like my site. Or any ideas how to implement this?
Differences on Android
Hi I've just been trying my Phonegap/jQM app on Android (2.2 - Samsung Galaxy S) for the first time and wanted to mention a couple of things. The Slide transition is not usable as pages blink on and off as they arrive. Changing the transition to "none" gets around this and so it's not a big problem. The text in the header buttons does not centre vertically. The "Back" in back button sits too high The performance is great. Have been building to iPhone 3GS so the extra power of a newer Android makes
create a application with jquery mobile and phonegap
hi i'm a newbie on Android Development...there any site or post that explain how i create a Android App with jquery mobile !? what the diference and the phonegap and jquery mobile ? or the both work together!? Thanks ! Igor N. Ribeiro
jquerymobile + highcharts?
Has anyone tried to get a jquerymobile page to render javascript charts from highcharts.js? I can't seem to make it work. If I put the highcharts.js file in before the jquerymobile, then jquerymobile doesn't take control of the page. Vice versa, then the charts don't get rendered. Any ideas if anyone has done this before? Thanks
Can the demo and documentation be downloaded somewhere?
Hi, Is the demo and documentation of jQuery mobile downloadable somewhere? I find it very useful to mess with such framework with the actual code locally instead of looking up the source code online everytime. Bye, Jean
How to exclude navigations from history?
Hi to All, How can I exclude navigations from history? For example I have paged list. I have for paging buttons [<<][<][>][>>]. I navigating between some pages with them. When I press [Back] button it replays this sequence in reverse order, because that's the history track. Buttons are simple hrefs However I want [Back] button to navigate that page were I initially arrived from this pageable list. So I suppose I have to exclude the paging navigation from the history. But how? Thx for anwers.
Installable jQuery Mobile docs in Android Market
Just wanted to let you know I've published in the Android Market a basic app that encloses the documentation of jQuery Mobile for offline use. I had felt the need for it myself so I just decided to do it and publish it. You can find it at http://market.android.com/details?id=com.jquerymobiledocs.
Need help reproducing: jQuery Mobile causes IE's window to hide
When I go to or refresh my jQuery Mobile site: http://geo.trippingthebits.com/ The IE9 window (or IE8 because I've added it to gradeA) hides behind other open windows every time I refresh the browser window. The site uses: jQuery Mobile alpha 3 jQuery 1.5.1 RC1 (to allow IE9 use at all with alpha 3) I cannot reproduce this on http://jquerymobile.com/test with IE9 but I can reproduce it on my own site when I use the JavaScript directly from http://jquerymobile.com/test/js . Please tell me
Align buttons and inputs
Hello, how can I manage to align an input and a button in one row? I tried with a two-column grid, and with a simple html table, but the button always is a good 10px higher than the input.
data-fullscreen behaviour is quirky
I'm writing a small image zoom/drag component to work with jQuery Mobile. I'm trying to use a header in a page with data-fullscreen true, which allows the header to toggle on taps. I like this as it allows more room to view the image. However the behaviour is too quirky/unobvious to make the approach usable. My component when dragging does stuff between the touchstart and touchend events. [ I'm using "raw" event handlers as I had some problems getting the touch data otherwise]. When the header
Splash screen
Is there a possibility to use a start up/ splash screen like iPhone allows, on android devices? Like this: <link rel="apple-touch-startup-image" Or is there a JS workaround?
Possible infinite loop when adding dynamic content
I want to add some dynamic content to a page after it has been shown. This dynamic content included jQuery controls like expanders. Thus, I need to call ".page()" on the topmost element, I insert into the DOM. In addition, I also listen to "pagecreate" where the creation of this dynamic content is queued. However, each call to ".page()" results in firing "pagecreate" which results in new content generation and... finally an infinite loop. Take the following code as an example: <div data-role="page"
https://code.jquery.com has an invalid SSL certificate
On http://jquerymobile.com/download/ you kindly offer CDN hosting on code.jquery.com. However, for those of us who use SSL on our sites, we need to use SSL for this as well. Unfortunately the server certificate (with edgecdn.com) is invalid. Can you get this fixed. Thanks for a great product! -Rolf
triggering dropdown box with keyboard
I am going thru forms created with jqm and I cannot figure out how to go thru the dropdown choices on a non-mobile device unless I have a mouse. Is there a key binding to it? Normally you can use the down arrow key to do this on regular forms. I am creating a form to be used by computers and mobile devices. I am willing to pay/donate for this functionality. Thanks!!
how to set particular date in jquery mobile datebox control and highlight it in datepicker
I am creating one application with jquery.mobile-1.0a4.1 release. I have a page which is having input form to get details. It has date field , so for that I used jquery.mobile.datebox . See http://dev.jtsage.com/ for its demo. I am facing one issue with it, when I set particular date value for date field on page-load , the value is shown in textbox. But when user click on date-picker icon- the calendar still highlight today's date and show current month only. can you please help, how to achieve
Trouble with $.mobile.changePage
I'm having a bit of trouble getting $.mobile.changePage working the jQM URL hash history. The history doesn't seem to be updating. As a result, when someone hits the back button (in the header or in the native browser) it navigates away to a previously visited site. What I'm trying to do is intercept links on the page, build some UI client-side, and then invoke $.mobile.changePage to update the UI to the new screen. I'm doing this with a basic pattern like this: $('a#my-test-link').live("click",
WLAN und UMTS/GPRS
Hi, if I'm inside with the phone in the WLAN, then I see the Mobile page 100% of designwith colors and background If I'm only using the GPRS or 3G mobile phone online, I see a simple CSS Page. Why? What should I switch? Thanks, Chris, Austria
Is there a list of all the options for data-* attributes?
Hi all, Is there a list of all the options for data-* attributes? I find that I have to look them up repeatedly, and I'd love to have a reference. There doesn't seem to be a single list for them. Here are the ones I remember off the top of my head: (Newer stuff below) data-role: collapsible, button, page, header, footer data-icon: back (http://jquerymobile.com/test/docs/buttons/buttons-icons.html) data-theme: a, b, c, d, or e Feel free to add more as replies and I'll add them to the top post. List
adding search to the header
Hello, I would like to add a search input to the header of every page. Is there a standard way to do this? Many thanks, Ant
Injecting content into the DOM, changePage to content, update history in V 1.0a3
I wasted a lot of time on this today because of a lack of documentation or simply my inability to find that documentation so I hope this helps some others out. I needed to be able to dynamically append content to the DOM, then switch to that content while updating history so that the back button works as expected. The thing that tripped be up was the assignment of a div data-url attribute as opposed to previously just assigning an id to the div. This is a snippet of the code that injects the html
dialog black theme cannot be changed
You might not have found that the dialog theme cannot even be changed, which is by default black. The dialog header, content and footer can be changed to any other theme, but dialog page itself is fixed to be black. Is black better for a dialog? or can it be set somewhere I don't know? <div data-role="page" data-theme="c" id="newword"> <div data-role="header" data-theme="b"> <h1>{% trans "search a word" %}</h1>
Time Picker in Jquery Mobile?
Hi all, My Application needs a good timepicker.is there is any good jquery mobile timepicker. Thanks & Regards, Nithya.
passing url parameters between internal pages
Hi, I'm trying to pass parameters between internal pages, and I'm not having much luck. I have tried: <a href="#nextPage?id=name">Next Page</a> and <a href="?id=name#nextPage">Next Page</a>
External links within scrollview
I recently tested this patch for the experimental scrollview functionality of jquery mobile: https://github.com/arirusso/jqm-scrollview-toolbars-patch All has been working great within iOS 4 with the exception of external links (code below). <a href="http://www.cnn.com" rel="external">View Website</a> Link to test: http://redone.org/_scrollview/ On the iPhone 4, the link does nothing when clicked. Within Safari on my iMac, there is a decent lag before continuing to the site. Any ideas?
Memory problem or how to unload pages
Hello In JQM style we can load pages dynamicly and it does work well. But we can have another problem. Web application can have many many pages. So we load, load, load , load ... iPad is not so cool device as thinks billions users in the world. Really it is very slow. At some moment we overload memory and device will be very slow. So any ideas how to unload pages from the memory? Any stragy how to manage memory of web application?
When click back after calling changepage: "TypeError: Cannot read property 'transition' of undefined"
Here is what is happening:(1) I have a link on my main page, with a click event. (2) The click event calls $.mobile.changepage('/page/path', 'slide', true, true); (3) I observe the pageshow event for the new page, and do some stuff, placing content in divs. (4) When I click the back button the URL updates, but the page is not transitioned. The error: "TypeError: Cannot read property 'transition' of undefined" is thrown. Am I doing something obviously wrong or is this a bug?
XML & Spry Select List not working
I have an XML and Spry driven Select List that I cannot get to work in JQM. It works fine outside of JQM. You can view the page at: http://sgidev.relius.net/PESMobile/jquerymobile/glossary.html How it works: a user clicks an Alphabet Entry that populates a list of terms. In JQM, the Alphabet links work but when clicking the Select List box, nothing happens. It should expand to show all possible terms. We have close to 400 definitions that sometimes change so hard coding the values is not an option.
Google Maps JS-API not working on 2nd call
Hi I have 2 pages, let's call them "a" and "b". Page a calls b per AJAX (as default in jQM) with a parameter "id". Page b loads data dependent on the id. On page a, I have the Google-Maps init-script: function initializeMap(lat, lng, id) { var latlng = new google.maps.LatLng(lat, lng); var myOptions = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"+id),
Javascript ignored after page transitions - what do you do?
How is everyone working around the fact that when using Ajax transition (swipes), you cannot execute any JS on the following page? On my first app I simply resorted to using rel="external", but for my second app I'd really prefer to take advantage of the swiping to give a native feel. The external links work fine, but that brief flash of white while the next page loads is not very appealing. However, I simply cannot get around this problem and searching does not turn up any solutions, only more headaches.
How does jQuery Mobile track Form Postbacks in the history?
I'm running into the issue with forms that postbacks to itself. when I press the back button, it goes back to the same page before navigating back normally. If I understand how this works, jqm adds the postback into its history tracking. I'm trying to prevent it from doing that Any help is appreciated. Roy
[NOT SOLVED] How to submit dynamically created form with slider on slider's change event
Hello Every one, I 'm using $.getJSON to populate my page's content. This page contains a div called "listDiv" that is empty before the $.getJSON function is called. Here's the content added to the div for each item return in my function which means that I have as many forms in my page as the number of items. $('#listDiv').append( '<form action="Scripts/update_element.php" method="post"> <div data-role="fieldcontain"> <input type="range" name="target" id="Slider-'+
Textarea width???
I added textarea element in my page with this snippet <div data-role="fieldcontain"> <textarea name="textarea" id="textarea"></textarea> </div> The Framework adds style automatically to the textarea element, and as i see in firebug now, my textarea only has 60% of the width of min-width-480px. How can i change the percentage to 95%?
How to have footer nav with 6 or more buttons in one line
In alpha2 release, the navbar maxes out with 5 items, If more than 5 items are added, the navbar will wrap to multiple lines. Is there any way we can have 6 items or more in one line? Thanks in advance.
uncaught exception: cannot call methods on button prior to initialization; attempted to call method 'disable'
I've got a button on my page, and when I click it, I get this exception: "uncaught exception: cannot call methods on button prior to initialization; attempted to call method 'disable'" $('#start').live('click', function() { alert('disabled'); $('#start').button('disable'); alert('disabled'); } <div> <a id="start" data-inline="true" href="#" data-role="button" data-theme="b">Start</a> </div> Any ideas? Given that the page has rendered and I've
Active item in navbar loses highlight
Hello Im using the lastest jQuery Mobile alpha 3 and is having trouble with the navbar and a multipage template. After navigating 2-3 times using the navbar the currently active menu item is no longer "active" and highlighted. Below I have pasted my very simple sample which is mostly based on the multipage template on http://jquerymobile.com/demos/1.0a3/#docs/pages/docs-pages.html I have the described problem in both Firefox 3.5 and Chrome 10, both desktop versions, and a Android 2.2 browser on a
box-shadow in safari
For some reason jquery-mobile flags <html> as ui-mobile-nosupport-boxshadow in safari browsers. Had very hard time to figure it out as i never debugged safari before. Anyone had same issue? I experience this in Safari 4.0.4 (win7) and iBBDemo2 iPhone and iPad simulator (win7) . Could this be a platform issue that doesn't affect the real thing i have no way to know. I'm using jQ mobile Alpha 4
Next Page