When run the following code, firefox 17.0.5 gives an "error loading message", when I want to open the car page. But it works properly in IE8.
Then I found an example here
http://jquerymobile.com/demos/1.0/docs/pages/multipage-template.html
I opened that website with firefox 17.0.5, works. Then I viewed the source code, almost the same structure as mine. But when I download the html and run it, neither IE8 nor FF works. What's wrong here? I m linked to jQuery moible from another project, know nothing about web development. Please help. :(
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="menu">
<div data-role="header">
<h1>Menu</h1>
</div><!-- /header -->
<div data-role="content">
<p>What vehicles do you like?</p>
<p>Cars</p>
<p>Trains</p>
<p>Planes</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /header -->
</div><!-- /page -->
<!-- / Page 2 -->
<div data-role="page" id="one">
<div data-role="header">
<h1>Cars</h1>
</div><!-- /header -->
<div data-role="content">
<p>Content about cars</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Cars</h4>
</div><!-- /header -->
</div><!-- /page -->
</body>
</html>
I had the same problem too, And I found that the problem is using the protocol file://, You can’t work with jquerymobile with the protocol file:// it has to be a web address. After moving my project to my local server, with protocol http:// it worked immediately.
Source : http://doeswhat.com/2011/03/08/jquery-mobile-error-loading-page/
EDIT:
In your case, avoiding spaces in URL address solves your problem
Related
I am trying to learn how to program with jQuery Mobile and I cannot understand why this code doesn't work:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css">
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="First">
<div data-role="header">
<h1>First</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>First Page</p>
<p>View page called Second</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="Second">
<div data-role="header">
<h1>Second</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>Second Page</p>
<p>Back to First</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
Thank you very much for helping!
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
The markup you have posted works fine using JSFiddle.
The only difference between the example you have posted and the one I have created on JSFiddle (apart from the missing closing HTML tag) is the path references to the external libraries:
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
Replace your script and stylesheet references with the block above and see if it works. These libraries are hosted on Google's Content Delivery Network (CDN). If this works, the paths to your local versions of these files are wrong and you will need to correct them.
Here is a page explaining about file paths:
http://css-tricks.com/quick-reminder-about-file-paths/
i'v created demo page of mobile jquery using TextEdit...which is,
<!doctype html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->
<div data-role="footer">
<h4>My Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
but, in my browser code is not getting compiled and it shows these texts as it is as plain text.. and i'v confirmed that my browser support HTML5 here: http://html5test.com/
what is missing!?
Question is what browser are you using? I tried your code with Chrome and it worked perfectly.
My guess is that you are behind a corporate or university firewall that is blockign your CDN urls. So why don't you download the jQuery mobile files and place the js, css files locally and try to run the page again?
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
sorry but issue was weird, actually i had created that page using textEdit which stored all text as rich text format which may not recognized to be compiled as html... so i converted that text to plain text and saved it again and that worked!!
thanks all.
I'm used to using ASP.NET and visual studio to develop websites. I'm trying to develop a plain .html website in a similar matter. What I mean is use master pages etc so there is code reuse and maybe deploy these template files to a group of .html files.
For example
head.html
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.ui.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
header.html
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
footer.html
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
layout.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
#include(head.html)
</script>
</head>
<body>
<div data-role="page">
#include(header.html)
#include_body()
#include(footer.html)
</div><!-- /page -->
</body>
</html>
index.html
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
and combine all of these into a single output file....
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Does anything like this exist? I'm not familiar with ruby or anything...
Server-side includes (SSI) may meet your needs. With some basic server requirements met, you can do, for example:
<!--#include virtual="includes/my_file.html" -->
You could use a little PHP to do this using includes.
Header, footer etc could be created as new .php files where you place everything you want to be displayed in that section in.
Then, in say your index.php file you do something like
<?php
include ('header.php');
?>
<html>
<head>
</head>
<body>
</body>
<?php
include ('footer.php');
?>
Everything inside the header and footer PHP files will be included.
I developing my new website in HTML5/CSS3.
When converting my PSD files to HTML5 / CSS3 I wonder what the correct markup for an HTML5 website.
Below is a simple wireframe of my website, as you can see I want the website to make full width, at least in the different areas.
This is the layout:
As you can see here, I want to have some different section on my homepage for the information.
And I came up with this markup:
Because when I copy all the list no longer be seen, I have the
content, text and images in this code omitted. Where an image or a
text would face with a comment below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<!-- Meta Tags -->
<!-- Stylesheets -->
<link href="css/style.css" rel="stylesheet">
<link href="css/960.css" rel="stylesheet">
<!-- Icons -->
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-retina.png">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Start container website -->
<header id="header">
<div class="container_12">
<div class="grid_12">
<!-- // Here will be position the logo with a link \\ -->
<nav id="primary-navwrapper">
<!-- // Here will be an unordered list with menu items \\ -->
</nav>
</div><!-- End .grid_12 -->
<div class="clear"></div><!-- End .clear -->
</div><!-- End .container_12 -->
</header><!-- End header -->
<section id="hero">
<div class="sliderbox">
<!-- // An list of image for a slider \\ -->
</div><!-- End .sliderbox -->
</section><!-- End section#hero -->
<section id="introduce">
<article class="container_12">
<!-- // 3 colomn with a h-tag and some text inside a paragraph \\ -->
<!-- // 3 colomn with a h-tag and some text inside a paragraph \\ -->
<!-- // 3 colomn with a h-tag and some text inside a paragraph \\ -->
</article><!-- End article.container_12 -->
<article class="container_12">
<div class="grid_12">
<!-- // A image tag \\ -->
</div><!-- End .grid_12 -->
</article><!-- End article.container_12 -->
</section><!-- End section#introduce -->
<hr class="dark-grey"> <!-- Divider for the section -->
<section id="work" class="alt">
<article class="container_12">
<!-- // a h-tag and some text inside a paragraph + 3 column portfolio items \\ -->
</article><!-- End article.container_12 -->
</section><!-- End section#work.alt -->
<hr> <!-- Divider for the section -->
<section id="blog" class="even">
<article class="container_12">
<aside class="grid_4">
<!-- Sidebar with some text -->
</aside><!-- End aside.grid_4 -->
<ul class="recentbox">
<!-- List of 2 latest blog items -->
</ul><!-- End ul.recentbox -->
</article><!-- End article.container_12 -->
<article class="container_12">
<div class="grid_12">
<!-- Contact banner -->
</div><!-- End .grid_12 -->
</article><!-- End article.container_12 -->
</section><!-- End section#blog.even -->
<footer id="footer">
<!-- Footer markup here -->
</footer><!-- End footer -->
</body>
</html>
Some extra information. As you can see I start with the <header> -tag for the header, after that I set some areas up with the <section> -tag inside that I will at the <article> -tag with a class of <article class="container_12"> to be able to use the grid 960. Inside that <article> -tag I will be set text, image etc.
Good to know is that I tag the article in some sections often use, I do this because for several articles in a specific section to distinguish. With Articles do have a connection with each other but are different in one article to post.
I love to hear your opinions regarding my markup so far and how you would tackle.
Thank you.
You're mark up is totally acceptable. I would suggest maybe not going so heavy with the id tags, but instead going for a more OO approach to come of your CSS. For information go here: http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
Otherwise your mark up is fine.
In my jQuery mobile (v 1.2) web site, I have several separate pages (i.e. each page has one header, content and footer). The problem is I can't link the pages. The following line is not working.
Another Page shows "Error loading page".
If I add rel="external" to the <a> element, it works. However, it turns off the automatic loading via Ajax. But I want to use the Ajax loading as well as keep the pages separate. Just wondering whether it's possible.
Code Page 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
click me
</div>
<div data-role="footer">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>
Code Page 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">
page 2 content
</div>
<div data-role="footer">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>
The problem is that you are trying to load your pages from the filesystem.
Chrome settings prevents that, assuming that a security risk.
Serve your pages with a web server. You can use IIS on Windows XP Pro for that.
or
You can start chrome with --allow-file-access-from-file command line option
I believe you are supposed to give each 'data-role="page" and id like "page2 so in effect it would be:
<div data-role="page" id="page"> <!--Home Page-->
<div data-role="page" id="page2"> <!--2nd Page-->
<div data-role="page" id="page3"> <!--3rd Page-->
Im not sure if that is what you are looking for in this case though...