CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
marzipan
marzipan

Reputation: 171

Default jQuery Mobile CSS styling won't apply, multiple browsers tested

I'm trying to play around and learn some jQuery Mobile, but can't get the basic CSS styling to apply. I am referencing the css link from the jQuery Mobile website, and am connected to the internet (but have also tried loading the css locally into html, still wouldn't apply)

Here is my test code:

<!DOCTYPE html>
 
<html>
 
<head>
 
<meta charset="UTF-8">
 
<title>2test</title>
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

  <script src="http://code.jquery.com/jquery-1.4.5.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
 
</head>


<body>

<div data-role="page">
<div id="header" data-role="header">
    <h1>My Photos</h1>
</div>

<article data-role="content">
    <ul data-role="listview" data-filter="true">
        <li>
            <a href="#">
            <h1>Miniature Doberman Pincher</h1>
            
            <p>This is what happens when a
            friend brings a dog to the studio.</p>
            </a>
        </li>
        <li>
            <a href="#">
            <h1>Gummy Bears</h1>
            
            <p>Three different poster boards...mirror for reflection,
            black for background white for highlights</p>
            </a>
        </li>
    </ul>


</article>

<footer data-role="footer" data-position="fixed">
    <nav data-role="navbar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Photos</a></li>
            <li><a href="#">Info</a></li>
        </ul>
    </nav>
</footer>
</div>


</body>


</html>

And here is the output on desktop Chrome 45 (EDIT: screenshot old, images since removed):

enter image description here

and the output on my android device Chrome 45 (access from hosted site):

enter image description here

neither output shows the expected "mobile-y" look of jQuery Mobile's default styling.. What am I missing?

Upvotes: 2

Views: 939

Answers (2)

marzipan
marzipan

Reputation: 171

After noticing the console error "Uncaught Security Error Failed to Execute Replace State on History..." in Chrome, I searched Stack Overflow and found that Chrome has security features that seem to somehow block this loading from an external source?

I tried loading the page from a web server and alas, the CSS renders in Chrome! It also works on Firefox locally! Chrome is the browser that wasn't letting me test locally...

See: Uncaught SecurityError: Failed to execute 'replaceState' on 'History': cannot be created in a document with origin 'null'

Upvotes: 0

Peter Scott
Peter Scott

Reputation: 1316

I see the following errors in the console.

Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME http://code.jquery.com/jquery-1.4.5.min.js Failed to load resource: the     server responded with a status of 404 (Not Found)
jquery.mobile-1.4.5.min.js:3 Uncaught TypeError: Cannot set property 'mobile' of undefined

I think that this caused by JQM tring to parse urls of your local files and failing which kills the JS. To fix remove the references to local file paths and instead use relative paths.

Actually it looks like some of your JQM paths may be incorrect:

<!-- add this link here -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- remove your link here -->
<!--  <script src="http://code.jquery.com/jquery-1.4.5.min.js></script> -->

See jQuery Mobile getting started error also for need to include jquery include before JQM or use a bundle.

EDIT: actually you have quite a few problems. JQM does a lot more manipulation of the DOM/HTML than you may be used to and has a more rigorous structure than you would find with other style frameworks. You need to think in terms of single page app. Pages must be defined within the file .. I think you need to review the docs to get your head around what JQM is.

As per http://demos.jquerymobile.com/1.4.5/intro/

A page in jQuery Mobile consists of an element with a data-role="page" attribute. Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-role="header", class="ui-content", and data-role="footer". The baseline requirement for a page is only the page wrapper to support the navigation system, the rest is optional.

JQM can be a little confusing to start out - the page div is absolutely required. You may be better off copying and pasting from the examples first and playing around with the examples, but to get the styling you will need to wrap your content inside a page div ..

<div data-role="page">
...
</div>

For an working version of your example without the images see http://jsfiddle.net/shotgundriver/8mb0rzhy/

Upvotes: 1

Related Questions