Do we need to include CSS and JS files in every html page of mobile site developed in JQueryMobile?
<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>
I think it's not in the documentation or I just missed it.
You should have a single html document with a <div data-role="page"> for each page that you need in your application. Check out source code of Multi page template.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<!-- CSS and JS files here-->
<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" id="first">
<!-- Code for your first page -->
</div>
<div data-role="page" id="second">
<!-- Code for your second page -->
</div>
</body>
</html>
Related
When I'm running the HTML on android, chrome is not loading the external CSS and js files, all the files are in the same folder. Repo
Beginner here.
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.0">
<title>Palindrome Checker</title>
<link rel="stylesheet" href="/pali.css">
<!-- Before <link rel="stylesheet" href="pali.css">
also tried <link rel="stylesheet" href="./pali.css"> -->
</head>
<body>
<h1>Palindrome Checker</h1>
<div class="main">
<div class="holder">
<div class="bgimg">
<span>Type in here-</span>
<input type="text" name="textin" label ="textin" id="Udt1" placeholder="Eg-Racecar">
<button class="btn" onclick="tex()">Check</button>
</div>
</div>
<span class="anshold"><p id="udans"> </p>
</span>
</div>
</body>
<script src="/palindrome.js"></script>
</html>
use ./ to your css link, not /,
ex:
./pali.css
If the files are in the same folder like you said, the slash isn't necessary - simply <link rel="stylesheet" href="pali.css"> and <script src="palindrome.js"></script>. If that doesn't work, I would also advise looking for spelling errors in the filenames.
So I'm not sure if it's just because I'm a noob at this or what, but I can't get the bootstrap CDN to work. I copied the CDN from their website and pasted it into the code I was working on, and then a fresh page, as shown below and it's not applying on either. The weird thing is that the CDN from freecodecamp on their bootstrap portion works. What am I doing wrong?
Heres the code
<!doctype HTML>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar navbar-default">
</div>
</body>
</html>
You need to import jQuery as well (bootstrap uses it) and its best to load it just before your closing tag so that it doesn't block other loading and is then called with a $(document).ready() wrapper.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>
</html>
I'm attempting to make use of the DataTables plugin, and when using the example code on https://datatables.net/examples/data_sources/js_array.html as a starting point I'm having difficulty having the table display, if any suggestions could be made where I'm going wrong.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>DataTables Site</title>
<meta name="viewport" content="width=device-width, minimum-scale-1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="jquery.DataTables.min.css">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="DataTablesCSS.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css"/>
</head>
<body>
<script src="DataTablesJS.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="jquery-1.12.0.min.js"</script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js"></script>
<script type="text/javascript" class="init"></script>
<div id="container" class="width">
<header>
<h1>Data<span> Tables</span></h1>
</header>
<div id="body">
<section id="content">
<br>
<article>
<h2>DataTables H2</h2>
</br>
<html>
<body>
<div>
<table id="example" class="display" width="100%"></table>
</div>
</body>
</html>
</article>
</section>
<div class="clear"></div>
</div>
<footer>
</footer>
</div>
</body>
</html>
Thanks in advance, let me know if adding in the CSS, or javascript files would be useful.
First of all, please try using some HTML code validator like: https://validator.w3.org/
It might not be about DataTables.
Use some reasonable IDE (it might be helpful) or command-line validation tool to get quick info on errors.
Include the data tables javascript at the end of the body instead, this way the HTML is generated before the js can search for the table.
I've just created this theme with the jquery mobile theme rooler, and included it in my page like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="themename.min.css" />
<link rel="stylesheet" href="jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<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/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div class="container" data-role="page" data-theme="a">
<div class="title" data-role="header">Title</div>
<div class="box" data-role="content">
Content
</div> <div class="footer" data-role="footer">
Some other content
</div>
</div>
</body>
</html>
But the default theme is displayed:
The chrome console isn't reporting any errors.
What could be the problem?
Move your theme which I'm presuming is themename.min.css below jquery.mobile-1.4.5.min.css. The way themes work in CSS is usually by overriding selectors, such as class names. If two stylesheets apply styles to the same selector, the last defined instance is the one that's used. Currently, you're defining your theme and overriding it with the main jQuery theme. Reverse the order and your problem should be fixed. Below would be an optimal loading scenario.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<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" />
<link rel="stylesheet" href="jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="themename.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
For CSS:
Load the default jQuery Mobile Theme
Load the jQuery Mobile Icon overrides
Load your custom theme `thememain.min.css`
In addition, it's wise to move the JavaScript below the CSS files. CSS Files are downloaded in parallel whereas JavaScript files are usually downloaded and parsed one at a time.
I want to change dynamically the content of a div.
My html page looks somehow like this
<!DOCTYPE HTML>
<html>
...
<body>
<div data-role="page">
<div data-role="header">
//Image
</div>
<!-- This is a placeholder for dynamic page content -->
<div id="pagePort"></div>
</div>
</body>
</html>
in wlCommonInit() I call this:
$("#pagePort").load("page2.html", function(){
});
and nothing happen but if I include a timeout it works fine. So my intuition is that I have to wait for the div to be ready?
But on which event can I wait to call the .load() statement?
I cannot reproduce your claim.
I have tested the following in both Worklight 6.1.0.01-20140821-0406 (this is actually 6.1.0.2) and 6.2.0.00-20140918-1910 , and in both page2.html loaded right away as the application was displayed while previewing it via Worklight Console:
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link href="jqueryMobile/jquery.mobile-1.4.4.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="jqueryMobile/jquery.mobile-1.4.4.js"></script>
</head>
<body style="display: none;">
<div data-role="page" id="page">
<div data-role="content" style="padding: 15px">
<div data-role="header">
Header
</div>
<div id="pagePort"></div>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
main.js:
function wlCommonInit(){
$("#pagePort").load("page2.html");
}
page2.html resides on the same level as index.html and contains only <h1>Success</h1>