Blogus Maximus

Rubbing people the wrong way since 1970...

  Home  |   Contact  |   Syndication    |   Login
  1366 Posts | 10 Stories | 2225 Comments | 1336 Trackbacks

News


Google My Blog

Catch me at: The List!


My InstallScript Utility Belt My Amazon Wishlist
My Standard Disclaimer

Tag Cloud


Archives

Post Categories

Image Galleries

Blogs

Code Camps

CTown Geeks

Geeky Webcomics

High Geek

Magenic Blogs

Microsoft Blogs

My Articles

My Sites

PodCasts

UG

XNA

Recently (as in, last night) I started playing with jQuery Mobile. My experiences with jQuery, while occasionally frustrating, have been overwhelmingly positive. So when a friend mentioned jQuery Mobile to me, I figured I'd give it a try.

A little Googling revealed some helpful tutorials and other resources, one of which was this handy basic page (which I got from here)

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
  <h1>Header</h1>
</div>
<div data-role="content">
  <p>Content goes here</p>
</div>
<div data-role="footer">
  <h4>Footer</h4>
</div>
</div>
</body>
</html>

A quick copy and paste later and I was off and running... sort of.  The page renders as expected in Chrome, Firefox and Opera but sadly IE9 seems unable to live up to expectations (on my Win 7 64bit machine with IE 9.0.8112.16421)

A quick trip to the list of supported browsers (here) tells me IE9 should be supported just fine. Since my principal concern isn't IE on Win7, but rather how jQuery Mobile looks on Windows Phone, I decided to throw it on my web server and hit it from my Samsung Focus.

Here's the URL if you want to try it out from your own Windows Phone: http://www.bigrobotgames.com/jqm/sample.htmhttp://www.bigrobotgames.com/jqm/sample.htm

As you can see, the page renders, but it seems IE on WP7 (and the WP7 emulator) doesn't really fare any better than IE on the desktop. The browser list does say that there are "minor CSS issues" so maybe this is just one of those.

I'll keep digging and in the next post, we'll see what other heavy lifting jQM can do with regards to Windows Phone.)

 

UPDATE: Sometimes, I make big stupid rookie mistakes. Today was one. Keep reading.

Turns out, I should have made sure my jQuery and jQuery Mobile references were totally up to date. They weren't.  I've uploaded a second file, aptly named sample2.htm that has the more up to date references, now that jQuery Mobile is no longer in alpha.

You can see it here:   http://www.bigrobotgames.com/jqm/sample2.htm

As you can see... IE9 actually works just fine, giving the expected results consistent with FireFox, Chrome and Opera.  IE on Windows Phone works as expected also. Clearly the lesson here is to ALWAYS check your references when working with 3rd party libraries, especially if something isn't working as expected.

With that (false alarm) concern out of the way, now we really get to have some fun!

This is what the file SHOULD look like:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<p>Content goes here</p>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
 

posted on Friday, December 16, 2011 12:08 PM

Feedback

# re: Trying out jQuery Mobile on Windows Phone (UPDATED) 1/3/2012 2:20 PM Doug Kirschman
Wow... Thanks a bunch. I did the same thing you did. I thought I was going crazy.

# re: Trying out jQuery Mobile on Windows Phone (UPDATED) 1/18/2012 1:11 PM Doug Kirschman
One other thing to consider. If you are using CDN versions, most are not available via https. If your app is hoted in https, you may be running into a mixed content issue where the page itself is https but the scripts are not. IE may block the downloading of the CSS and/or scripts. This happened to me and I hosted the scripts locally to resolve.

# re: Trying out jQuery Mobile on Windows Phone (UPDATED) 3/20/2012 8:10 AM maquinas de coser
Thanks a bunch. for me Chrome is the best.

# re: Trying out jQuery Mobile on Windows Phone (UPDATED) 10/10/2012 9:53 AM Купить Домен
Thanks!I found lots of interesting information here.

Post A Comment
Title:
Name:
Email:
Comment:
Verification: