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.
Related
I am working on a small project, trying to build a simple snake game.
However, my javascript will not run. I have passed a lot of code in the file, but somehow it only runs the index.html file. I have looked at the debugger in Mozilla and it finds the javascript.
Here is my index.html:
<html>
<head>
<title>Welcome to CSnake50</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<section id="playHUD">
<h2 id="scoreboard"> Length </h2>
</section>
<section id="gameOver">
<h1 class="title">GAME OVER!</h1>
<h3 id="restartButton">Restart?</h3>
</section>
<canvas id="game-screen"></canvas>
<script src="snake.js"></script>
</body>
</html>
Image when running Index.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>
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>