I have a styles problem when loading headers, content and footers with jquery.
For some unknown problem, only the content is loaded, regardless of the styles.
The current code:
index.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function () {
$("#header").load("header/header.html");
$("#footer").load("footer/footer.html");
$("#content").load("content/content.html");
});
</script>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
Header.html
I get a error js:
(Refused to apply style from 'http://127.0.0.1:XXXX/project/css.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.)
Although neither "src" or "href" works
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" type="text/css" href="../css.css">
</head>
<body class="bodyHeader">
<hr>
HEADER
<hr>
</body>
</html>
css.css
.bodyHeader {
background-color: lightblue;
}
.bodyFooter {
background-color: lightslategray;
}
.bodyContent {
background-color: lightyellow;
}
I currently display text without styles.
HEADER
CONTENT
FOOTER
I want to visualize:
DIV [all content, measurements and styles] HEADER
DIV [all content, measurements and styles] CONTENT
DIV [all content, measurements and styles] FOOTER
Without any of them overlapping and respecting the distances.
Is it jquery problem?
Related
Video:
https://youtu.be/aOtayR8LOuc
Essential when I click a button on my nav it will go there but since I have the same nav bar on each page it will try to go to pages/about even if im already there (ex. pages/about/pages/about)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FFA Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="app.js"></script>
<div class="topnav">
<a class="active" href="">Home</a>
News
Animals
About Me
Credits
</div>
</body>
</html>
CSS:
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #04AA6D;
color: white;
}
Replace your HTML code like below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FFA Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="app.js"></script>
<div class="topnav">
<a class="active" href="">Home</a>
News
Animals
About Me
Credits
</div>
</body>
</html>
this is not working as you expected because you provided false paths since the pages files are in a different folder not the parent so here is what you need to do
for the index.html:
<body>
<script src="app.js"></script>
<div class="topnav">
<a class="active" href="/src/index.html">Home</a>
News
Animals
About Me
Credits
</div>
</body>
for any other page inside the pages folder for example News.html:
<body>
<script src="app.js"></script>
<div class="topnav">
<a class="active" href="../index.html">Home</a>
News
Animals
About Me
Credits
</div>
<h1>News</h1>
</body>
Well there seems no issues with your index.html file except missing the .html extension after each page name, and you just need to fix the redirection in the pages/News , pages/Animals , pages/About, pages/Credits html files, as when you click on any one of them you are no longer in the root of your project instead you are inside pages/ so the redirection changes.
so your other pages(About/Credits/Animals/News) should look like this.
make whatever page you wish to make active.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FFA Website</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<script src="../app.js"></script>
<div class="topnav">
<a class="active" href="">Home</a>
News
Animals
About Me
Credits
</div>
</body>
</html>
Can you try adding "../" before the path? So News ...
Maybe this works?
I have an HTML file linked to a script. A button defined in the HTML has an onclick function 'incrementLabel()' but the function in the script throws the warning:
'incrementLabel' is declared but its value is never read.
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
<!DOCTYPE HTML>
<html lang="en">
<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">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
</body>
</html>
I can't find any solutions to the problem other than writing the function in a in HTML. Any help would be much appreciated.
Thanks!
<!DOCTYPE HTML>
<script>
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
</script>
<html lang="en">
<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">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
</body>
</html>
This works perfectly fine. Check if you are importing your JS script correctly.
You can put the javascript code into a before the closing tag .
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">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
<script>
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
</script>
</body>
Some of online tools like https://playcode.io don't recognise your code but I have tested in vscode and works fine.
Maybe have to use other online tool or can test if you have imported the code well with a console.log("Works fine") into your javascript file.
Sorry for my english.
This question already has answers here:
Attaching click event to a JQuery object not yet added to the DOM [duplicate]
(10 answers)
Closed last year.
I want to switch once a button is pressed. This is the code. It would not be for something so simple, but I can't even get this to work.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Test</title>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page-section page-1 active"><h1>I'm page 1</h1></div>
<div class="page-section page-2"><h1>I'm page 2</h1></div>
<button class="link link-1">Page 1 link</button>
<button class="link link-2">Page 2 link</button>
</body>
</html>
CSS
.page-section {
width: 200px;
height: 200px;
display: none;
}
.page-1 {
background-color: blue;
}
.page-2 {
background-color: red;
}
.page-section.active {
display: block;
}
JS
function pageActivator(page) {
$('.page-section').removeClass('active');
page.addClass('active');
}
$('.link').click(function() {
var pageNum = parseInt($(this).attr('class').match(/\d+/g)[0]);
pageActivator($('.page-' + pageNum));
});
This is the codepen, on the website it works, while locally it doesn't I have no idea why.
I really don't understand because the code is the same from the codepen, maybe I am missing something on the HTML file? Even if the .js file is correctly connected, I have verified it. And the CSS file too.
You use JQuery codes but you did not call JQuery library. Do the following:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Test</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
I´ve got this problem. Is there someone that can point me in the right direction?
I´m using the npm http-server.
This is my html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.test {
background-color: black;
}
</style>
</head>
<body>
<div class="test">
<img class="duck" src="/assets/anka.png" alt="Fin Anka">
</div>
<script type="module" src="node_modules/gsap/all.js"></script>
<script type="module" src="/app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.test {
background-color: black;
}
</style>
</head>
<body>
<div class="test">
<img class="duck" src="/assets/anka.png" alt="Fin Anka">
</div>
<script type="module" src="node_modules/gsap/all.js"></script>
<script type="module" src="/app.js"></script>
</body>
</html>
This is my js file:
import {gsap} from './node_modules/gsap'
gsap.to(".duck", {duration: 2, x: 300})
AND this is the problem:
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
Hi I am trying to add a start button via jquery to appear when the page loads. However, the button is not loading.
Here is my code:
$(window).on('load', function() {
const startPage = $("<button id='start'>Go</button>");
$('main').append(startPage);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Quiz</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="app.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1>Objective London Quiz</h1>
</header>
<main class="questions"></main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>