Home : Forums : Authoring and Programming : jQuery Mobile: What Can It Do for You?

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
DeleteDelete EditEdit
Elated Elated's avatar Rank: gold
Gold
Posts: 285
From: Brighton, UK
This is a forum topic for discussing the article "jQuery Mobile: What Can It Do for You?":

http://www.elated.com/articles/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
DeleteDelete EditEdit
jeffreyz jeffreyz's avatar Rank: none
No stars yet
Posts: 1
thanks for the nice article, matt!
14-Dec-10 23:05
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3236
From: Southern Highlands, NSW, Australia
@jeffreyz: Thanks for the comment - glad you liked it.

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
28-Dec-10 00:55
DeleteDelete EditEdit
terramar terramar's avatar Rank: none
No stars yet
Posts: 1
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
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3236
From: Southern Highlands, NSW, Australia
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
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
05-Feb-11 08:30
DeleteDelete EditEdit
tosrisri tosrisri's avatar Rank: none
No stars yet
Posts: 1
From: Bangalore, Karnataka, India
Thanks much for the nicely composed article. This helped me in getting started with mobile web development.
07-Feb-11 20:00
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3236
From: Southern Highlands, NSW, Australia
@tosrisri: Thanks for the feedback! I'm glad the article helped you out.

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
01-Mar-11 01:00
DeleteDelete EditEdit
kanizares kanizares's avatar Rank: none
No stars yet
Posts: 1
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?

cheers
Kanizares
02-Mar-11 02:22
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3236
From: Southern Highlands, NSW, Australia
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:

http://mobiforge.com/developing/story/build-web-apps-iphone-using-dashcode

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
07-Mar-11 09:48
DeleteDelete EditEdit
Junaid Junaid's avatar Rank: none
No stars yet
Posts: 1
From: Lahore, Pakistan
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
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3236
From: Southern Highlands, NSW, Australia
@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?

http://www.elated.com/forums/authoring-and-programming/topic/new/

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
10-Mar-11 07:55
DeleteDelete EditEdit
techhelp techhelp's avatar Rank: none
No stars yet
Posts: 1
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">
<h1>myCompany</h1>
</div><!-- /header -->

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

</asp:ContentPlaceHolder>
</p>
</div><!-- /content -->

<div data-role="footer" data-theme="e">
<h4>View Full Site</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
10-Mar-11 21:01
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3236
From: Southern Highlands, NSW, Australia
@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
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
25-Mar-11 16:24
DeleteDelete EditEdit
nunu nunu's avatar Rank: none
No stars yet
Posts: 1
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?

Thanks
28-Mar-11 01:19
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3236
From: Southern Highlands, NSW, Australia
Hi nunu,

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

http://jquerymobile.com/demos/1.0a3/#docs/api/events.html

Cheers,
Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
28-Mar-11 07:32
DeleteDelete EditEdit
nithyakrishnan nithyakrishnan's avatar Rank: none
No stars yet
Posts: 1
From: India
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">
</div>

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

please help me.

Regards,
Nithya.
30-Mar-11 05:06
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3236
From: Southern Highlands, NSW, Australia
@Nithya: Your code should be:


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


Cheers,
Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
18-May-11 11:34
DeleteDelete EditEdit
icancreate icancreate's avatar Rank: none
No stars yet
Posts: 1
From: Montreal, Canada
Thank you for taking the time to write and share this wonderful post. Excellent resource.

--
http://www.icancreate.ca
13-Jun-11 03:22
DeleteDelete EditEdit
Quikdav Quikdav's avatar Rank: none
No stars yet
Posts: 2
From: France
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 ?

Thanks
20-Jun-11 05:35
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3236
From: Southern Highlands, NSW, Australia
@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
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
29-Jun-11 09:39
DeleteDelete EditEdit
galeriniaga galeriniaga's avatar Rank: none
No stars yet
Posts: 1
From: Cheng, Melaka, Malaysia
nice sharing. really appreciated

http://www.galeriniaga.com

[Edited by galeriniaga on 29-Jun-11 09:40]
29-Jun-11 10:12
DeleteDelete EditEdit
Nig567 Nig567's avatar Rank: none
No stars yet
Posts: 1
From: Ireland
Hi

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.
Nigel
29-Jun-11 13:26
DeleteDelete EditEdit
farbrorc farbrorc's avatar Rank: none
No stars yet
Posts: 1
From: Stockholm
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
DeleteDelete EditEdit
tomt84 tomt84's avatar Rank: none
No stars yet
Posts: 1
From: Sydney
how about the coding for ipad?

--
Tom O. Timber
19-Aug-11 02:19
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3236
From: Southern Highlands, NSW, Australia
@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
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
19-Aug-11 17:29
DeleteDelete EditEdit
beinfubui beinfubui's avatar Rank: none
No stars yet
Posts: 1
From: Boston, MA US
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
DeleteDelete EditEdit
Quikdav Quikdav's avatar Rank: none
No stars yet
Posts: 2
From: France
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
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3236
From: Southern Highlands, NSW, Australia
@Quikdav: It's pagebeforeshow, not beforepageshow:

http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/events.html

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
13-Nov-11 03:52
DeleteDelete EditEdit
koentimmers koentimmers's avatar Rank: none
No stars yet
Posts: 1
From: Belgium
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,
Koen
18-Nov-11 00:50
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3236
From: Southern Highlands, NSW, Australia
@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
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
27-Nov-11 08:10
DeleteDelete EditEdit
sarahbird sarahbird's avatar Rank: none
No stars yet
Posts: 1
From: Texas, US
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
DeleteDelete EditEdit
ruthmary1991 ruthmary1991's avatar Rank: none
No stars yet
Posts: 2
From: Chengannur, Kerala, India
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
DeleteDelete EditEdit
ruthmary1991 ruthmary1991's avatar Rank: none
No stars yet
Posts: 2
From: Chengannur, Kerala, India
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?

Regards,

Ruth
17-Feb-12 03:17
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3236
From: Southern Highlands, NSW, Australia
@ruthmary1991: I'd need to see your code really. Can you post a demo page on http://jsbin.com/ ?

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
13-Mar-12 02:44
DeleteDelete EditEdit
venu venu's avatar Rank: none
No stars yet
Posts: 1
From: Banglore, India
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
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3236
From: Southern Highlands, NSW, Australia
@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
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
 
New posts
Old posts

Follow Elated