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>
Related
On my index page, when I click a button the page background turns to black but not on the other pages, even if I link the .js file to all html documents. How do I make it so that the background turns black to all pages on a button click.
Here is what I've got so far
function myFunction() {
document.getElementsByTagName("body")[0].style.cssText = "background: black;"
}
<!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" href="style.css">
<style>
body {
background: white;
}
</style>
</head>
<body>
<button id="button" onclick="myFunction()">Change to black</button>
</body>
</html>
You could save the background color in localStorage and read it upon page load. Whenever you navigate to another page of your site - which loads that script - it will read the stored value and change the background color accordingly.
Script (customize.js):
function setBGColor() {
var bgColor = localStorage.getItem("bgColor");
document.body.style.backgroundColor = bgColor;
}
function changeBGColor(newColor) {
localStorage.setItem("bgColor", newColor);
setBGColor();
}
setBGColor();
In your HTML:
...
<body>
<button id="button" onclick="changeBGColor('black')">Change to black</button>
</body>
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 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?
So I have the following in my page which is a textarea with some text in it:
and what i want to do now is to replace the BR in the text with newline \r such that i would get the following displayed in the textarea:
Hi
I
Am
Jake
Here's what I tried so far:
console.log(document.getElementById("sample").value);
document.getElementById("sample").value = document.getElementById("sample").value.replace("<BR>","\n");
html, body {
height: 100%;
}
textarea {
resize: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<textarea id="sample">Hi<BR>I<BR>Am<BR>Jake</textarea>
</div>
<script src="test.js"></script>
</body>
</html>
However, it doesn't seem to be displaying properly. Would appreciate some help on this.
Use replaceAll() instead of replace(). The replace function will replace only the first match, replaceAll() will replace all the occurrences in the given string.
I also suggest escaped strings in the replace parameters. Add backslash (\) in your < > characters.
console.log(document.getElementById("sample").value);
document.getElementById("sample").value = document.getElementById("sample").value.replaceAll("\<BR\>","\n");
html, body {
height: 100%;
}
textarea {
resize: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<textarea id="sample">Hi<BR>I<BR>Am<BR>Jake</textarea>
</div>
<script src="test.js"></script>
</body>
</html>
JavaScript's replace function only replaces the first instance. You can, however, use regex with the /g flag. I replaced "<BR>" with /<BR>/g, and it works (you just have to scroll). If you're interested, there is also String.prototype.replaceAll, but that doesn't have that good browser support.
console.log(document.getElementById("sample").value);
document.getElementById("sample").value = document.getElementById("sample").value.replace(/<BR>/g,"\n");
html, body {
height: 100%;
}
textarea {
resize: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<textarea id="sample">Hi<BR>I<BR>Am<BR>Jake</textarea>
</div>
<script src="test.js"></script>
</body>
</html>
Use .value.split("<BR>").join("\n") instead of .value.replace("<BR>", "\n")
document.getElementById("sample").value = document.getElementById("sample").value.split("<BR>").join("\n");
html, body {
height: 100%;
}
textarea {
resize: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" href = "style.css">
<title>Document</title>
</head>
<body>
<div id = "outer">
<textarea id="sample">Hi<BR>I<BR>Am<BR>Jake</textarea>
</div>
<script src="test.js"></script>
</body>
</html>
Here is my solution:
document.getElementById("sample").value = document.getElementById("sample").value.replace(/\<BR\>/g,"\n").trim();
I am trying to set loading page and I set timeout to 5 seconds before moving to the index.html page.
I want to transfer to this page with some basic fade in transition and I would like to know how I can do this ?
My currently code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Go Post - HomePage </title>
<link rel="stylesheet" href="includes/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
setTimeout(function(){
window.location='index.html';
}, 3000);
</script>
</head>
<body>
<div class="load"></div>
</body>
</html>
You can simply do this by jquery fadeOut.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Go Post - HomePage </title>
<link rel="stylesheet" href="includes/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Import jquery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
setTimeout(function(){
$('html').fadeOut(
500, // animation time
function(){
// action will do after the animation
window.location='index.html';
}
);
}, 3000);
</script>
</head>
<body>
<div class="load"></div>
</body>
</html>
Try the below
In HTML add the div
<div id="preloader">
</div>
jQuery
$(function() {
setTimeout(function() {
$('#preloader').fadeOut('slow', function() {
window.location = "https://google.com";
});
}, 5000);
});
CSS:
div#preloader {
background: url("http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_blue_512.gif") no-repeat scroll center center #000000;
height: 100%;
position: fixed;
width: 100%;
z-index: 999;
}
Demo : http://codepen.io/anon/pen/gPqLPX