Hosting Jquery Mobile files

I currently have my files set to the following:

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

I want to host the files so I used the ZIP file Zip File: jquery.mobile-1.0.zip from http://jquerymobile.com/download/ which says it contains all the files.

This is where I got a little confused. I created a folder JQUERY, dumped all the files in there, then went to set it up, but see the names of the files in the ZIP don't match the ones I was currently using, so was unsure how to change to 'local'.

I also tried to manually download the minified, GZIPPED, individual files, when I checked them out they did not match what it said on the download page, example jquery.mobile-1.0.min.js says it was 24k but mine was 80k

I'm just a little confused and would appreciate any guidance and clarification that anybody can give to me

Thanks

Mark

@markaspirenet: Just change your links to eg:

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

(or whatever the path to your JQUERY folder is).

You might also want to download the jQuery library from http://docs.jquery.com/Downloading_jQuery (minified) and put that in your JQUERY folder too. Then you'd have:

<link rel="stylesheet" href="JQUERY/jquery.mobile-1.0.min.css" />
<script src="JQUERY/jquery-1.6.4.min.js"></script>
<script src="JQUERY/jquery.mobile-1.0.min.js"></script>

Cheers,
Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Hi Matt,

Thanks for the clarification. i didn't realize that I had to go get the jquery and the mobile files. I was just looking in the ZIP file and it was throwing me off.

There are non-minified files in the ZIP and also jquery.mobile.structure-1.0.css , not sure what these structure files are.

I have all 3 files now, and will test it out in a minute.

I presume that I have to make sure that when I update any of these files in the future such as the mobile ones that I also have to update the jquery one also incase the mobile files take advantage of any newer code.

I notice that there is a version 1.7 above the 1.6.4, should I use that now?

Also, any idea why they say that jquery.mobile-1.0.min.js is gzipped and minified to 24k but when I unpack the zip file my file is around 80k

I'm thinking I'm best using the minified versions, because my app relies upon downloading all the code through a mobile phone 3G connection so the smaller the file the better. I see it says that the client side unpacking time is nothing to be concerned about.

Thanks

Mark

I put all the files into a jquery folder

Changed the files to


<link rel="stylesheet" href="jquery/jquery.mobile-1.0.min.css">
<script src="jquery/jquery.mobile-1.0.min.js"></script>
<script src="jquery/jquery-1.6.4.min.js"></script>

The files are in the right spot, if I go to them directly in my browser I can see each of them, but when I run my code, it acts as if there are no files there

Any idea why?

Thanks!

mark

Hi Mark,

The structure files are a new jQM feature that makes it easy to create themes with http://jquerymobile.com/themeroller/ . You create a theme CSS file with ThemeRoller, then link to that file plus the non-theme (structure) CSS file. Ignore if you're not using ThemeRoller.

Yes, when updating jQM you should check the version of jQuery that it requires, and update accordingly.

I believe the current jQM (1.0) works with jQuery 1.6.4, not 1.7.

jquery.mobile-1.0.min.js is just minified. Gzipping refers to the CDN (i.e. the CDN's servers gzip the file when sent to the browser, if the browser supports it). If you're serving the minified file from your own server then you can also configure your server to gzip it, eg:

http://httpd.apache.org/docs/2.0/mod/mod_deflate.html

What do you mean by "it acts as if there are no files there"? Try viewing your site/app in Chrome and choosing View > Developer > Developer Tools. Do you see the files listed under the Resources tab?

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/