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.
Related
I am experimenting with bootstrap css but it just isn't loading on my browser, I've even published the page on my server, It doesn't even render the css styles. Now other example pages load fine on my browser. Just the ones I download locally are giving me an error.
Here's what I've tried out so far:
Validated the HTML to see if I'm making some sort of syntax error but thats not the case. It came clean as a whistle.
Downloaded the bootstrap.css and locally referenced it in the html just in case it was something with my server fetching the file but that didn't worked either.
Lastly, I thought that this might had something to do with my text editor's text encoding or perhaps the end-of-line character incompatibility so I went to codeply.com and executed the damn thing in their online editor and good lord, it didn't worked there.
To clarify further, this is how the page is supposed to look like
against how It does look like
I can see that the css styles are partially applied as the page is not showing default html fonts and styles. I even tried changing permissions of the index.html file to 777 in case that was causing trouble but all in vain so far.
Here's a link to my raw html in codeply.com
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class='site-wrapper'>
<div class='site-wrapper-inner'>
<div class='cover-container'>
<div class='masthead clearfix'>
<div class='inner'>
<h3 class='masthead-brand'> NileSoft </h3>
<nav>
<ul class='nav masthead-nav'>
<li>Our Clients</li>
<li>Our Services</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="inner cover">
<h1 class="cover-heading">Cover your page.</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
Learn more
</p>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.main.js"></script>
</body>
</html>
Might try writing the script tag such as this:
<script src="./js/bootstrap.main.js"></script>
Also, the same for the link tags which includes your bootstrap file locally:
<link rel="stylesheet" href="./css/bootstrap.min.css">
Also, the preferred order for CSS and JS files are as follows:
<html>
<head>
<!-- Bootstrap stylesheet -->
<link rel="stylesheet" href="./css/bootstrap.css" />
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
...
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<!-- Bootstrap JS File -->
<script src="./js/bootstrap.min.js"></script>
<!-- Custom JS File -->
<script src="./js/custom.js"></script>
</body>
</html>
Script imported at the bottom has a http, it might have got blocked by your browser. Also writing <script src="js/bootstrap.main.js"></script> might not work in codeply. Also, try importing other js files after standard libraries like jquery.
To get Bootstrap into your page, simply paste the code below into the <head> section of your template.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
I validated my website using: https://validator.w3.org/#validate_by_upload
and I got no errors. However, the website recently changed and now I get these 2 messages:
Info: The Content-Type was application/octet-stream. Using the XML parser (not resolving external entities).
Fatal Error: Empty document, with no root element.
What do these messages mean? How do I correct the error?
The settings I used were: Encoding: utf-8 document type: HTML5
SIMPLE HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/omnicode.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div class="container">
<header>
<h1>Header</h1>
</header>
<hr>
<p> TEXT </p>
<hr>
<footer>Footer</footer>
</div>
</body>
</html>
It could be because you have opening tags that are not closed. I put your code in to the checker and it complained about the body element being found before the div is closed:
<body>
<div class="container"> <!-- no closing tag for this div -->
<header>
<h1>Header</h1>
</header>
<hr>
<p> TEXT </p>
<div>
<hr>
<footer>Footer</footer>
</div>
</body>
Message filtering
Info: The Content-Type was text/html. Using the HTML parser.
Info: Using the schema for HTML with SVG 1.1, MathML 3.0, RDFa 1.1, and ITS 2.0 support.
Error: End tag for body seen, but there were unclosed elements.
From line 27, column 1; to line 27, column 7
Error: Unclosed element div.
From line 17, column 1; to line 17, column 23
Fix that and rerun the tests.
This is an issue when using the old w3 validator and Safari as the uploading Browser; If you upload using Chrome it should work fine, or if you cut and paste it should work fine. Also, if you upload using Safari to the "new school" validator it will work as well.
http://html5.validator.nu/
It looks fine but some tags need to be closed like your hr's
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/omnicode.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div class="container">
<header>
<h1>Header</h1>
</header>
<hr />
<div>
<p> TEXT </p>
</div>
<hr />
<footer>Footer</footer>
</div>
</body>
</html>
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
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.
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...