Search jQuery

jQuery Forum

jQuery Mobile

stevenhus

CSS does not style the page

in jQuery Mobile • 11 years ago

I have the following at the head of my Jquery Mobile document:

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

-->

When I use the commented-out lines, the CSS styles the content beautifully. However, I want to use this in the iPod touch when there is no Internet or WiFi available. That meant copying the content from those links into files on the device. I copied the commented-out content into the files below those (as shown in the lines above).

When I run the code on the device or in the Xcode simulator the content is completely unstyled. I've checked the file linking locations again and again, and they are fine.

Is there a problem with copying/pasting the files the way I did?

Replies(16)

stevenhus

Re: CSS does not style the page

11 years ago

I notice that everything in the css page begins with .ui. This must be the reason it doesn't work. Strange!

watusiware

Re: CSS does not style the page

11 years ago

You're loading jqtouch CSS and Javascript on the device.

JQTouch is not JQuery Mobile. They're different projects completely, and not at all compatible.

You might want to decide which library you want to use. ;)

stevenhus

Re: CSS does not style the page

11 years ago

I'm not loading JQtouch on the device. That is merely the name of the folder. (JQtouch used to be on the device, but it was removed.)

elroyjets..

Re: CSS does not style the page

11 years ago

Wouldn't a better way to handle the resources when offline be to utilize the application cache? You could then simply tell it which files to use when offline versus when online.

stevenhus

Re: CSS does not style the page

11 years ago

Well, let's assume that my copy/paste put the CSS in the app and linked up correctly. Why is it not styling the page?

I did not know that Jquery depends on always-on devices. My device is an iPod touch, and I'm not always around a wifi spot.

Thanks for responding. It's hard when you're just starting out on something new.

stevenhus

Re: CSS does not style the page

11 years ago

elroyjetson,

Your response assumes that my app is hosted online. It is wholly in-app. It will be used in rural areas where no wi-fi is present. How would you create an app with Jquery for these occasions?

Thanks!

elroyjets..

Re: Re: CSS does not style the page

11 years ago

Jonathan Stark put it best on twitter recently, your app always starts online, whether it is native or web. Once it's loaded you can use the appcache to make it run offline.

stevenhus

Re: CSS does not style the page

11 years ago

How do I point it to a website to cache the pages when it is wholly in-app? I don't understand. Your app cache link (thanks!) does not seem to address my concern.

stevenhus

Re: CSS does not style the page

11 years ago

I tried this:

1. Created a text file called SC10-setup.txt containing:

CACHE MANIFEST

# If ANY part of this cache manifest is different from the previous one, all of the content will be re-downloaded

# Version: 2.0

CACHE:

http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css

http://code.jquery.com/jquery-1.6.3.min.js

http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js

# FALLBACK:

# /

# NETWORK:

2. Put this at the head of the home page HTML:

<!DOCTYPE html>

<html>

<head>

3. I downloaded the file to my iPod touch and it looked great in wi-fi range. I shut off the device, went out of wi-fi range, and turned it on, then opened the app. The opening page was unstyled.

What should I do differently?

jakecigar

Re: Re: CSS does not style the page

11 years ago

Going the appcache/manifest route is the ONLY way to make off-line iPod pages.

The manifest file must be served with the mime type text/cache-manifest , the name for the file usually ends in .appcache or .manifest (not.txt). Many servers are NOT configured to serve manifest files properly.

You also did not include your css file name in the manifest.

You may wish to add code that checks/monitors the cache loading process.

You can also test offline pages on your computer (Safari or Chrome are best) by turning off the network.

Jake

PS I’ve written several offline sites.

stevenhus

Re: CSS does not style the page

11 years ago

"The manifest file must be served with the mime type text/cache-manifest ,"

I am referencing the files on the code.jquery.com site in my manifest file. Is the mime type set there? Do I set it anywhere on my end? Do they belong in my HTML head?

"You also did not include your css file name in the manifest."

That is the very first line in the cache list. Am I misunderstanding you?

"the name for the file usually ends in .appcache or .manifest"

I changed my file from .txt to .manifest, and changed the name at the head of the HTML file to correctly reference it. Following the exact same steps as my earlier test still revealed an unstyled HTML home page.

Thanks for your help! What next?

p.s. I read about 6-7 web pages on making a manifest file.

jakecigar

Re: Re: CSS does not style the page

11 years ago

I may be blind but I don’t see the css file in what you pasted to this thread. I only see jQuery stuff.

Serving a manifest file properly requires a change to the server. If it is apache, and it supports .htconfig, it’s easy.

this is a good reference

Have you tested in Safari or Chrome or even firefox? Making a change to the html without a change to the manifest would NOT show up!

I’m glad you have a version comment in the manifest. It’s the easiest thing to change to make sure the files are reloaded.

stevenhus

Re: CSS does not style the page

11 years ago

"I may be blind but I don’t see the css file in what you pasted to this thread. I only see jQuery stuff."

You're not blind :) We may be talking about something different, that's all - I'm the newbie! Here's the CSS file I'm talking about - are you talking about something different:

http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css

"Serving a manifest file properly requires a change to the server."

OK, let me make this clear: I am referencing files off the code.jquery.com server, which is NOT my site, but belongs to the good folks at Jquery, so I can't do anything about Apache. Please let me know if I am understanding this wrong. Do you at Jquery have this set in your server already, or forget to put it in?

"Have you tested in Safari or Chrome or even firefox?"

I'm using this for mobile, specifically the iPhone and iPod touch devices. You don't open up a web page in a browser to get to my home page. You download the app from the App Store, then tap on the icon to view it. I hope this explanation helps.

Thanks!

jakecigar