jQuery Mobile: What Can It Do for You?

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register

05-Nov-10 00:00
This is a forum topic for discussing the article "jQuery Mobile: What Can It Do for You?":


Find out how the new jQuery Mobile framework can help you build great-looking, cross-device web apps with ease. Lots of code examples and demos included.
14-Dec-10 16:25
thanks for the nice article, matt!
14-Dec-10 23:05
@jeffreyz: Thanks for the comment - glad you liked it.

Matt Doyle, Elated
28-Dec-10 00:55
Just curious if there are any "best practices" for applying backgrounds to mobile websites. Because a phone (or iPad) can be turned horizontally or vertically, we're kind of stuck on how to best design and/or implement graphics considering the iphone/ipad functionality. Thanks!
03-Jan-11 05:43
Hi terramar,

Do you mean CSS background images? I don't think it matters, since the page will look the same at either orientation - it'll just be wider in landscape. Of course you need to ensure that your text and background images look OK at both sizes.

Matt Doyle, Elated
05-Feb-11 08:30
Thanks much for the nicely composed article. This helped me in getting started with mobile web development.
07-Feb-11 20:00
@tosrisri: Thanks for the feedback! I'm glad the article helped you out.

Matt Doyle, Elated
01-Mar-11 01:00
great tutorial. thanks!

Question: Once you have created your web application using Jquery Mobile, HTML, CSS etc...how do you go about wrapping it into a cross platform App to run on iPhone, Android etc? i mean so it can be distributed in the various appstores and downloaded as an App?

02-Mar-11 02:22
Hi Kanizares,

Web apps are usually designed to run at least partly on a web server, so they can't easily be converted to cross-platform native mobile apps.

For iOS you may be able to take your (JavaScript-only) web app and wrap it in a webView within an iOS application - here's an example:


Matt Doyle, Elated
07-Mar-11 09:48
Great tutorial I tried using lists with alpha 1 jquery they were working fine but when i upgraded to alpha 3 it all got messed up how can i upgrade these to alpha3?
08-Mar-11 02:07
@Junaid: Lists work OK for me in alpha 3. Can you post a URL of the problem in a new topic please, and we can take a look?


Matt Doyle, Elated
10-Mar-11 07:55
You mentioned the following in the JQM post
<div data-role="header">

This lets you create a toolbar at the top of the page, used for things like the page title and buttons. (Typically there is at least a "Back" button which the user can tap to return to the previous page.) By adding data-position="fixed" to the header, you can make sure the header always stays at the top of the screen.

This is my master page template but i don't see a back button when i navigate accross all the pages that use this master page. Please help

<div data-role="page">

<div data-role="header" data-theme="e">
</div><!-- /header -->

<div data-role="content" data-theme="e">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</div><!-- /content -->

<div data-role="footer" data-theme="e">
<h4>View Full Site</h4>
</div><!-- /footer -->
</div><!-- /page -->
10-Mar-11 21:01
@techhelp: You won't see a "Back" button on the first-visited page of your JQM site. JQM only adds a "Back" button once the user visits another page within the site.

Matt Doyle, Elated
25-Mar-11 16:24
Hi Matt,

I commend you on this nicely put article, will be depending on it to spawn the first web app. Question though, would you use jQuery(document).ready() function, as you do in the realm of non-mobile web development, for your custom user functions and events trapping like clicks, triggers and so forth?

28-Mar-11 01:19
Hi nunu,

jQuery Mobile triggers a 'pageshow' event whenever a mobile page is displayed - this is probably what you want to use. More info:



Matt Doyle, Elated
28-Mar-11 07:32
Hi ,

Thanks for the wonderful article.i have used page id with the example you provided.but my prob is that the page is not recognizing the id

<div id="home" div-role="page">

i can't use <a href="#home">Home Page</a>

please help me.

30-Mar-11 05:06
@Nithya: Your code should be:

<div id="home" data-role="page">


Matt Doyle, Elated
18-May-11 11:34
Thank you for taking the time to write and share this wonderful post. Excellent resource.

13-Jun-11 03:22
Hi all,

I have a list view with 48 x 48 pixels icons. Effectively they seem to be displayed as 80 x 80 pixels so the display is not very nice. I tried to create a specific style in my own style sheet but nothing change.

How can I use icon that are not 16 x 16 neither 80 x 80 ?

20-Jun-11 05:35
@Quikdav: I would open up the resulting page in Firefox with Firebug or Safari/Chrome and inspect the img element. This will show you all the CSS classes assigned to the icon and its surrounding elements. You could then try creating appropriate CSS selectors to set the width/height.

If all else fails then use an inline style on the img element.

Matt Doyle, Elated
29-Jun-11 09:39
nice sharing. really appreciated


[Edited by galeriniaga on 29-Jun-11 09:40]
29-Jun-11 10:12

Great article. I'm using jQuery mobile a the moment for an app.
I have a contact form set up in the app and the 'action' links to a PHP file (email.php) that processes the form. It works fine in webspace, but does not work when in PhoneGap, in the iPhone Simulator. So assuming it won't work on an actual iPhone.

I can only assume I'll need to link the app to a contact form in webspace. Or should I be looking at an Ajax/PHP solution. I see there are Tutorial sites out there showing how to build Ajax contact forms.

Any advice would be appreciated.
29-Jun-11 13:26
What an amazing help!

Question from a newbie:

I'm gonna make a survey for iPad for a customer, and I need some really BIG buttons.

Is there any way to change the size on the buttons? The one on this page looks really good.

Thanks for good work!
15-Aug-11 07:58
how about the coding for ipad?

Tom O. Timber
19-Aug-11 02:19
@Nig567: Yes, you can only run HTML/CSS/JS in the PhoneGap app itself. PHP needs to run on a server.

@farbrorc: Try setting a big font size on .ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c etc in the CSS.

Matt Doyle, Elated
19-Aug-11 17:29
Great article. If you want to see jquery mobile in action, here is an example of a site that make use if it: http://www.mobosurvey.com
26-Aug-11 06:29
Hi all

I can't trigger the event "beforepageshow". I put it into my index.php file but It never fire for any page !!

$(document).bind("mobileinit", function()
$('div[data-role="page"]').live('beforepageshow', function(event, ui)
alert( "pagebeforeshow" );


What' wrong with my code ?

I understood "mobileinit" should be be defined one time (in the index.php for example). Not in all the files (= pages) of my web site. Should I define "beforepageshow" event for all my pages into "mobileinit" function ? I would like to define each "beforepageshow" event in the associated page. Is it possible and if yes, how ?

Thanks and regards

[Edited by Quikdav on 26-Aug-11 06:33]
29-Aug-11 06:54
@Quikdav: It's pagebeforeshow, not beforepageshow:


Matt Doyle, Elated
13-Nov-11 03:52
Hi Matt,

Is it possible to explain how to run jquery mobile only on mobile devices, and how to show a "regular" site on the screen?

Kind regards,
18-Nov-11 00:50
@koentimmers: To do that, you'd probably need to resort to user agent detection for common mobile browsers, either on the server (eg PHP) or using JavaScript. You can then serve either the jQuery Mobile-enhanced or desktop version of your site as appropriate.

Matt Doyle, Elated
27-Nov-11 08:10
I am Planning to use jquery-postmessage-plugin and theaming in my latest Survey project. I am hoping that I don't face any compatibility issues. Any tips for testing it? Thanks for sharing it though. Count me in your fans Waiting for your response.

[Edited by sarahbird on 27-Nov-11 08:14]

My name is Sarah. I am 29 and working as a Survey Business Analyst at http://www.surveyrobo.com.
15-Feb-12 23:43
hi Matt,

Why jquerrymobile "changepage" not working for the second time?It seems some problem with the navigation bar..PLZ respond
15-Feb-12 23:50
hi Matt,

Why jquerrymobile "changepage" not working.PLZ respond..ITz like we have a page with options "Join" "Login" "recover". When we click (for example) "Join" ,it was supposed to go to the Join page..but its not working.Is there any special code to be implemented for this purpose?


17-Feb-12 03:17
@ruthmary1991: I'd need to see your code really. Can you post a demo page on http://jsbin.com/ ?

Matt Doyle, Elated
13-Mar-12 02:44
Hi Matt,
i am new to Jquery mobile,i want to use jquery mobile pages in jsp,can you tell me how to href jsp pages,i done it for html pages but i dont know how to do it for jsp pages linking.waiting for your valuable answer,please post an example if you have in your site.
20-Mar-12 01:35
@venu: Never used JSP, but I know that JSP can serve HTML just like any other server-side language. So just serve your mobile pages - including the jQuery Mobile includes and markup - just like you would any other web page using JSP.

Matt Doyle, Elated
23-Oct-12 03:54
Hi Matt

I have an issue with JQUERY Mobile events.

I have a page 'consommation.php' with a list listview. When I display this page (from index.php containing a listview too), the event 'pagebeforeshow' doesn't occurs. It is the same for the click event when I click on options from 'consommation.php' listview. I don't have any events.

But when I enter directly the URL for 'consommation.php' in my browser (without going through index.php listview), all my events are working !!!

There is something that lock my events !! Any idea on what's wrong ?

Thanks and regards

Here is my code in 'consommation.php' :

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/MyTheme.min.css" type="text/css"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

$('div[id="consommation"]').live("pagebeforeshow", function()

$('div[id="consommation"] ul[data-role="listview"] a').live("click", function()
var dataurl = $(this).attr("data-url");
if (dataurl != null)
$.mobile.changePage("sonde_detail.php" + dataurl);

<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
29-Jun-17 06:30
I have the same problem on this site http://seo-google.co.il/. Does anyone have an idea?


New posts
Old posts

Follow Elated