Why won't my Jquery fade function work?

Why won't my Jquery fade function work? - javascript

I'm new to Jquery and am trying to implement it into my website. I am trying to fadein (upwards) my first row of pictures when scrolling. But for some reason they will not scroll. Can't seem to find the solution, any help?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
<!-- HEADER -->
<section id="header">
<h1 class="name">Jessica Shae</h1>
<div class="container heading">
<div class="row">
<div class="col-md-4">
<img src="img/7.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/2.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/9.jpg" class="display">
</div>
<div class="row">
<div class="col-md-12 text-xs-center">
</i>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<h2 class="title">The Dark Room</h2>
<div class="container photo-collection">
<div class="row js--wp-1">
<div class="col-md-4 affect">
<img src="img/1.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/10.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/4.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/18.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/6.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/8.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/12.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/11.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/14.jpg" class="work">
</div>
</div>
</div>
</section>
<section class="contact-me">
<div class="contact">
<h3><span class="white">Conta</span><span class="black">ct Me</span></h3>
</div>
<form method="post" action="#" class="contact-form">
<div class="row">
<div class="col span-1-of-3">
<label for="name">Name</label>
</div>
<div class="col span-2-of-3">
<input type="text" name="name" id="name" placeholder="Your name" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="email">Email</label>
</div>
<div class="col span-2-of-3">
<input type="email" name="email" id="email" placeholder="Your email" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Drop me a line</label>
</div>
<div class="col span-2-of-3">
<textarea name="message" placeholder="Your message"></textarea>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label> </label>
</div>
<div class="col span-2-of-3">
<input type="submit" value="Send it!">
</div>
</div>
</div>
</form>
</section>
<section class="copywrite">
<h6>Copywrite © 2016 built by Temple Cerulean Naylor</h6>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>
CSS:
body {
/*background-color: rgb(0, 0, 0);*/
background: #070606;
}
/* HEADER */
.display {
height: auto;
width: 500px;
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
max-width: 100%;
border: 4px solid white;
border-radius: 6%;
}
.heading {
max-width: 100%;
}
.name {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 500%;
font-weight: 100;
text-align: center;
color: whitesmoke;
width: 100%;
margin-bottom: 20px;
margin-top: 15px;
}
h1:after {
display: block;
height: 2px;
background-color: #e62222; /*Great way to give single line color */
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 20px;
}
.fa {
margin-top: 18px;
}
.fa:link, /*Prevents color change when clicked */
.fa:visited {
text-decoration: none;
color: #bdc3c7;
}
.fa:hover,
.fa:active {
color: #ebedee;
}
/* GALLERY */
.work {
width: 300px;
height: 100%;
margin-top: 60px;
margin-bottom: 60px;
border: 3px solid white;
}
.title {
font-family: 'Prociono', serif;
font-size: 350%;
color: whitesmoke;
text-align: center;
padding-top:40px;
}
.affect img {
opacity: 0.2;
background-color: #070606;
transition: opacity .35s, transform .35s;
transform: scale(1.0);
}
.affect:hover img {
opacity: 1;
transform: scale(1.15);
}
/* CONTACT */
.contact-me {
background: linear-gradient(to right, black 50%, white 50%);
overflow-x: hidden;
}
h3 {
color: white;
text-align: center;
}
.white {
color: white;
font-family: 'Oswald', sans-serif;
font-size: 240%;
}
.black {
color: black;
font-family: 'Oswald', sans-serif;
font-size: 240%;
}
.contact-form {
width: 40%;
margin: 0 auto;
float: left;
padding-left: 8%;
padding-top: 4%;
padding-bottom: 4%;
}
input[type=text],
input[type=email],
select,textarea {
width: 100%;
padding: 7px;
border-radius: 3px;
border: 1px solid #e62222;
}
textarea {
height: 100px;
}
input[type=submit] {
background-color: #e62222;
border: 1px solid #e62222;
color: #fff;
margin-right: 15px;
border-radius: 5px;
}
input[type=submit]:hover,
input[type=submit]:active {
background-color: #e94141;
}
/* *:focus {outline: none;} */
/* ------Copywrite----- */
.copywrite {
margin-top: 25px;
margin-bottom: 25px;
}
.copywrite h6 {
text-align: center;
font-size: 150%;
}
/* -----ANIMATIONS-----*/
.js--wp-1 {
opacity: 0;
}
.js--wp-1.animated {
opacity: 1;
}
JavaScript:
$(document).ready(function() {
// SCROLL ------------------------
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
// GALLERY FADEIN ----------------
$('.js--wp-1').waypoint(function(direction) {
$('.js--wp-1').addClass('animated fadeIn');
}, {
offset: '50%'
});
});

Try this:-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut()
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
</body>
</html>
or
$('#message').hide().html("You clicked on a checkbox.").fadeIn('slow');
link:-Why doesn't jquery fadeIn() work with .html()?

Related

Active Navigation Bar section

I am trying to make a website for my f1 in schools team and I want to know how I can make a button in my nav bar change bg and font color when I am on that part of the page even with scrolling and clicking on the button. If I am right I need CSS and JS right??
I need help only in the navbar else my website is completely responsive and perfect according to me.
HTML
<html>
<button onclick="topFunction()" id="myBtn" title="Back to top">Back to Top</button>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="main">
<head>
<title>Night Wolves</title>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Sans Pro">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="w3-light-white w3-margin">
<!-- Navigation bar -->
<nav class="navbar" id="thebar" style="position: relative; top: -1px; position: sticky;">
<div class="content">
<div class="logo">
<a style="position: relative; top: -7px;" href="#Home">Night Wolves</a>
</div>
<ul class="menu-list">
<div class="icon cancel-btn">
<i class="fas fa-times"></i>
</div>
<li><a class="btn" href="#Home">Home</a></li>
<li><a class="btn active" href="#Members">Members</a></li>
<li><a class="btn" href="#About us">About Us</a></li>
<li><a class="btn" href="#Portfolio">Portfolio</a></li>
<li><a class="btn" href="#Contact us">Contact Us</a></li>
</ul>
<div class="icon menu-btn">
<i class="fas fa-bars" style="position: relative; right: -10px; top: -6px;"></i>
</div>
</div>
</nav>
<div class="w3-content" style="max-width:1500px">
<!-- Image and background with title -->
<header class="w3-display-container w3-wide" style="padding-bottom:32px;" id="Home">
<img class="w3-image"
src="F1CarBG.png"
alt="Photo by Jamie Street" width="1600" height="1060">
<div class="w3-display-left w3-padding-large">
<h1 class="F1teamtext"><b style="font-size: 6vw; color: #8B008B;">F1 TEAM</b></h1>
<h1 class="nightwolvestext"><b style="color: yellow; font-size: 6vw;">NIGHT
WOLVES</b>
</h1>
</div>
</header>
<!-- Members -->
<div class="w3-row-padding" id="Members">
<div class="w3-center w3-padding-32">
<h2 style="color: yellow; position: relative; bottom: -40px;" ,class="w3-wide w3-center">MEMBERS</h2>
<p style="color: yellow; position: relative; bottom: -40px;" ,class="w3-opacity w3-center"><i>"There is no 'I' in team."</i></p>
<br>
<p class="w3-white w3-text-black w3-left-align">
</p>
</div>
<div class="w3-third w3-margin-bottom" id="Arnav">
<div class="w3-card-4" style="position: relative; left: -15px;">
<div class="w3-container">
<h3 style="color: white; position: relative; bottom: -5px;">Arnav</h3>
<p style="color: white;" ,class="w3-opacity">Marketing Manager</p>
<p> </p>
</div>
</div>
</div>
<div class="w3-third w3-margin-bottom">
<div class="w3-card-4">
<div class="w3-container">
<h3 style="color: white; position: relative; bottom: -5px;">Kevin</h3>
<p style="color: white;" ,class="w3-opacity">Team Manager</p>
</div>
</div>
</div>
<div class="w3-third w3-margin-bottom">
<div class="w3-card-4" style="position: relative; right: -10px;">
<div class="w3-container">
<h3 style="color: white; position: relative; bottom: -5px;">Chislon</h3>
<p style="color: white;" ,class="w3-opacity">Resource Manager</p>
</div>
</div>
</div>
</div>
<div class="w3-third w3-margin-bottom">
<div class="w3-card-4">
<div class="w3-container">
<h3 style="color: white; position: relative; bottom: -5px;">Kiran</h3>
<p style="color: white;" ,class="w3-opacity">Manufacturing Engineer</p>
</div>
</div>
</div>
<div class="w3-third w3-margin-bottom">
<div class="w3-card-4" style="position: relative; right: -5px;">
<div class="w3-container">
<h3 style="color: white; position: relative; bottom: -5px;">Aaron</h3>
<p style="color: white;" ,class="w3-opacity">Design Engineer</p>
</div>
</div>
</div>
<div class="w3-third w3-margin-bottom">
<div class="w3-card-4" style="position: relative; right: -10px;">
<div class="w3-container">
<h3 style="color: white; position: relative; bottom: -5px;">Fadil</h3>
<p style="color: white;" ,class="w3-opacity">Graphic Designer</p>
<p> </p>
</div>
</div>
</div>
<!-- About Us-->
<div class="w3-row-padding" id="About us">
<div class="w3-center w3-padding-32">
<h2 style="color: yellow;" ,class="w3-wide w3-center">ABOUT US</h2>
<p class="w3-white w3-text-black w3-left-align">
</p>
<p style="font-size: 30px; color: white; text-align: center; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;"> We are the Night Wolves</p>
<p style="font-size: 30px; color: white; text-align: center; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;"> This is our team of 6 racers Kevin, Arnav,
Chislon,
Fadil,
<br>
Aaron
and Kiran.
</p>
<p style="font-size: 30px; color: white; text-align: center; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;">We will never give up in the field of
racing.
</p>
<!-- Portfolio -->
<div style="position: relative; bottom: -400px;" class="w3-row-padding" id="Portfolio">
<div class="w3-center w3-padding-32">
<div style="position: relative; top: -350px;">
<h2 style="color: yellow; text-align: top;" ,class="w3-wide w3-center">PORTFOLIO</h2>
<p class="w3-white w3-text-black w3-left-align">
</div>
</p>
<!-- Contact us-->
<div class="w3-row-padding" id="Contact us">
<div class="w3-center w3-padding-32">
<h2 style="color: yellow;" ,class="w3-wide w3-center">CONTACT US!</h2>
<!doctype html>
<html lang="en" style="background-color: #5518AB;">
<head style="background-color: #5518AB;">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body style="background-color: #5518AB;">
<div class="container mt-5" style="background-color: #5518AB;">
<form class="row g-3" action="https://formsubmit.co/a19d9c2e5e9b57c704f25be5e736c312" method="POST">
<input type="text" name="_honey" style="display: none;">
<input type="hidden" name="_captcha" value="false">
<div class="col-md-6" style="color: white;">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" name="name" id="firstName" required>
</div>
<div class="col-md-6" style="color: white;">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" name="Last Name" id="lastName" required>
</div>
<div class="col-md-8" style="color: white;">
<label for="emailInfo" class="form-label">Email</label>
<input type="email" class="form-control" name="email" id="emailInfo" required>
</div>
<div class="col-md-12" style="color: white;">
<label for="comments" class="form-label">Comments, questions?</label>
<textarea class="form-control" id="comments" name="comments, questions" rows="3" required></textarea>
</div>
<div class="col-md-12" style="color: white;">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
-->
<button onclick="topFunction()" id="myBtn" title="Go to top"> Back to Top</button>
</body>
</html>
<script>
function myFunction() {
var x = document.getElementById("demo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
const body = document.querySelector("body");
const navbar = document.querySelector(".navbar");
const menuBtn = document.querySelector(".menu-btn");
const cancelBtn = document.querySelector(".cancel-btn");
menuBtn.onclick = ()=>{
navbar.classList.add("show");
menuBtn.classList.add("hide");
body.classList.add("disabled");
}
cancelBtn.onclick = ()=>{
body.classList.remove("disabled");
navbar.classList.remove("show");
menuBtn.classList.remove("hide");
}
window.onscroll = ()=>{
this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
}
// Get the button:
let mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>
</body>
</div>
CSS
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* custom scroll bar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #5518Ab;
}
::-webkit-scrollbar-thumb {
background: yellow;
}
::selection{
background: yellow;
}
.content{
max-width: 1250px;
margin: auto;
padding: 0 30px;
}
.navbar{
position: fixed;
width: 100%;
z-index: 2;
padding: 25px 0;
transition: all 0.3s ease;
background: yellow;
}
.navbar.sticky{
background: yellow;
padding: 10px 0;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbar .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: purple;
font-size: 30px;
font-weight: 600;
text-decoration: none;
}
.navbar .menu-list{
display: inline-flex;
}
.menu-list li{
list-style: none;
}
.menu-list li a{
color: purple;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
text-decoration: none;
transition: all 0.3s ease;
}
.menu-list li a:hover{
color: orange;
background-color: purple;
}
.logo:hover{
background-color: orange;
}
.banner{
height: 100vh;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.about{
padding: 30px 0;
}
.about .title{
font-size: 38px;
font-weight: 700;
}
.about p{
padding-top: 20px;
text-align: justify;
}
.icon{
color: purple;
font-size: 20px;
cursor: pointer;
display: none;
}
.menu-list .cancel-btn{
position: absolute;
right: 30px;
top: 20px;
}
#media (max-width: 1230px) {
.content{
padding: 0 60px;
}
}
#media (max-width: 1100px) {
.content{
padding: 0 40px;
}
}
#media (max-width: 900px) {
.content{
padding: 0 30px;
}
}
#media (max-width: 868px) {
body.disabled{
overflow: hidden;
}
.icon{
display: block;
}
.icon.hide{
display: none;
}
.navbar .menu-list{
position: fixed;
height: 100vh;
width: 100%;
max-width: 400px;
left: -100%;
top: 0px;
display: block;
padding: 40px 0;
text-align: center;
background: yellow;
transition: all 0.3s ease;
}
.navbar.show .menu-list{
left: 0%;
}
.navbar .menu-list li{
margin-top: 45px;
}
.navbar .menu-list li a{
font-size: 23px;
margin-left: -100%;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navbar.show .menu-list li a{
margin-left: 0px;
}
}
#media (max-width: 380px) {
.navbar .logo a{
font-size: 27px;
}
}
#media (max-width: 380px) {
.aboutustext {
position: relative;
bottom: -225px;
}
}
#media (max-width: 380px) {
.tlogo {
position: relative;
right: -300px;
left: -10px;
}
}
.tlogo {
width: 25%;
height: auto;
position: relative;
left: -350px;
}
.carbg {
width: 25%;
height: auto;
position: relative;
right: -400px;
}
#media (max-width: 380px) {
.tlogo {
position: relative;
right: -400px
}
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: yellow;
cursor: pointer;
font-size: 18px;
color: purple;
}
/* Style the active class, and buttons on mouse-over */
.active, .thebar:hover {
background-color: yellow;
color: purple;
}
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: yellow; /* Set a background color */
color: purple; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
}
#myBtn:hover {
background-color: orange; /* Add a dark-grey background on hover */
}
html {
scroll-behavior: smooth;
background-color: #5518AB;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Roboto"
}
body {
font-family: "Source Sans Pro"
}

Try using a style based on the body class. If you're on the Home page for example, you might see <body class="home"> and then you can create a style like
body.home button {
background-image: ...;
color: #fff;
}

CSS body tag not working after inserting bootstrap navbar

I have added bootstrap to my HTML file with handlebars and added CSS customizations to it. However, after adding the navbar, my body {} customizations which have background color and font are not working. The rest of the customizations in CSS are working How do I solve this?
My CSS code:
body {
padding: 50px;
font: 1rem/1.3 "Roboto", sans-serif;
background-color: rgba(7, 31, 31, 0.664);
}
.heading {
font-weight: heavy;
color: #1a0b0b;
font-size: 2.4rem;
letter-spacing: 0.05em;
padding: 0 0 30px 0;
}
.menubar {
background-image: linear-gradient(-90deg, #573b11b6, #adcad85d);
color:rgb(255, 255, 255)
}
.nav-link {
font-size: 20px;
margin: 3px;
color:rgba(255, 255, 255, 0.445);
font-weight: 500;
}
.nav-bar {
font-family: 'Nunito Sans', sans-serif;
text-align: right;
margin-right: 20px;
}
.nav-link:hover {
font-weight: 400;
border-bottom: 1px solid rgb(255, 255, 255);
}
body {
padding: 50px;
font: 1rem/1.3 "Roboto", sans-serif;
background-color: rgba(7, 31, 31, 0.664);
}
a {
color: #134d66;
}
section {
float: left;
background: #bdc3c7;
padding: 10px;
margin: 30px;
width: 300px;
box-shadow: 10px 10px 10px #363c42;
min-height: 400px;
border-radius: 20px;
}
section:first-of-type {
margin-left: 0;
}
section:last-of-type {
margin-right: 0;
}
section h3 {
border-bottom: 1px solid black;
padding-bottom: 5px;
}
.insert {
background: #6fb68cbb;
}
.get {
background: #ecf0f1;
}
.update {
background: #6b97b4ce;
}
.delete {
background: #c2736a9d;
}
.input label {
display: block;
font-weight: bold;
padding: 2px 0;
}
input,
button {
font: inherit;
}
button {
margin-top: 10px;
border: none;
box-shadow: 1px 1px 1px #34495e;
border-radius: 0;
background: #ecf0f1;
cursor: pointer;
}
button:hover {
background: #bdc3c7;
}
.item {
margin: 10px 0;
padding: 5px;
background: #95a5a6;
border: 1px solid black;
}
My HTML with handlebars code:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css">
/* <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght#200&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<h5 >Name: Syeda Fatima, Student ID: 500840365</h5>
<h1 class="heading">CAR-PARTS Tooling Inventory</h1>
<body>
<header>
<div class="menubar">
<nav class="navbar navbar-expand-md navbar-light">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
Home
About
Contact Us
</div>
<div class="navbar-nav ml-auto">
</div>
</div>
</nav>
</div>
</header>
<section class="insert">
<h3>Insert Data</h3>
<form action="/insert" method="post">
<div class="input">
<label for="PN">PN</label>
<input type="text" id="PN" name="PN">
</div>
<div class="input">
<label for="partname">PartName</label>
<input type="text" id="partname" name="partname">
</div>
<div class="input">
<label for="description">Description</label>
<input type="text" id="description" name="description">
</div>
<button type="submit">INSERT</button>
</form>
</section>
<section class="get">
<h3>Get Data</h3>
LOAD DATA
<div>
{{# each items }}
<article class="item">
<div>PN: {{ this.PN }}</div>
<div>partname: {{ this.partname }}</div>
<div>description: {{ this.description }}</div>
<div>ID: {{ this._id }}</div>
</article>
{{/each}}
</div>
</section>
<section class="update">
<h3>Update Data</h3>
<form action="/update" method="post">
<div class="input">
<label for="id">ID</label>
<input type="text" id="id" name="id">
</div>
<div class="input">
<label for="PN">PN</label>
<input type="text" id="PN" name="PN">
</div>
<div class="input">
<label for="content">partname</label>
<input type="text" id="partname" name="partname">
</div>
<div class="input">
<label for="author">description</label>
<input type="text" id="description" name="description">
</div>
<button type="submit">UPDATE</button>
</form>
</section>
</section>
<section class="delete">
<h3>Delete Data</h3>
<form action="/delete" method="post">
<div class="input">
<label for="id">ID</label>
<input type="text" id="id" name="id">
</div>
<button type="submit">DELETE</button>
</form>
</section>
</body>
</html>

Try adding:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
and point it to the data-target="#bs-example-navbar-collapse-1". It should work now.

Vertically centering a group of buttons in bootstrap

I've been trying to center the buttons to the middle of its parent's div, but have no idea how. I've tried adding margin: 0 auto and bootstrap's special class 'center-block' but it doesn't seem to be working. I suspect it may be clashing with the display:flex part of the css, but other than that, I don't know what to do.
Here's a picture of the problem.
/*--CSS--*/
* {
background-color: rgba(0, 0, 0, 0.1);
}
h1 {
font-family: "Raleway", "sans-serif" !important;
}
h2 {
font-family: "Raleway", "sans-serif" !important;
}
.page {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.table_cell {
text-align: center;
}
/*--Page1--*/
.title {}
#mainTitle {
font-size: 8em;
font-weight: 900 !important;
letter-spacing: -3px;
text-transform: uppercase;
}
#mainSub {}
/*--Button--*/
.introButtons {
margin: 0 auto !important;
}
.buttonBox {}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="firstPage" class="page col-md-12">
<div class="table_cell col-md-8">
<div class="introButtons col-md-8">
<div class="buttonBox col-md-3">
Who Are We?
</div>
<div class="buttonBox col-md-3">
Our Projects
</div>
<div class="buttonBox col-md-3">
Our Team
</div>
<div class="buttonBox col-md-3">
Contact Us
</div>
</div>
</div>
</div>

Solution 1 (If you want to change your HTML part)
You can use bootstrap offset classes. More help on offset
Replace introButtons col-sm-8 to introButtons col-sm-8 col-sm-offset-2
* {
background-color: rgba(0, 0, 0, 0.1);
}
h1 {
font-family: "Raleway", "sans-serif" !important;
}
h2 {
font-family: "Raleway", "sans-serif" !important;
}
.page {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.table_cell {
text-align: center;
}
#mainTitle {
font-size: 8em;
font-weight: 900 !important;
letter-spacing: -3px;
text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="firstPage" class="page col-md-12">
<div class="table_cell col-md-8">
<div class="introButtons col-sm-8 col-sm-offset-2">
<div class="buttonBox col-md-3">
Who Are We?
</div>
<div class="buttonBox col-md-3">
Our Projects
</div>
<div class="buttonBox col-md-3">
Our Team
</div>
<div class="buttonBox col-md-3">
Contact Us
</div>
</div>
</div>
</div>
Solution 2 (If you want to change your CSS part)
Just add below css in your custom css file
.introButtons.col-md-8 {
margin: auto;
float: none;
}
* {
background-color: rgba(0, 0, 0, 0.1);
}
h1 {
font-family: "Raleway", "sans-serif" !important;
}
h2 {
font-family: "Raleway", "sans-serif" !important;
}
.page {
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.table_cell {
text-align: center;
}
#mainTitle {
font-size: 8em;
font-weight: 900 !important;
letter-spacing: -3px;
text-transform: uppercase;
}
.introButtons.col-md-8 {
margin: 0 auto;
float: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="firstPage" class="page col-md-12">
<div class="table_cell col-md-8">
<div class="introButtons col-md-8">
<div class="buttonBox col-md-3">
Who Are We?
</div>
<div class="buttonBox col-md-3">
Our Projects
</div>
<div class="buttonBox col-md-3">
Our Team
</div>
<div class="buttonBox col-md-3">
Contact Us
</div>
</div>
</div>
</div>

Why not correctly displayed button?

Here is an example with a standard theme.
.hotpink {
width: 100%;
height: 100vh;
border: 1px solid #999;
}
.pink {
width: 100%;
height: 100vh;
border: 1px solid #999;
}
.deeppink {
width: 100%;
height: 100vh;
border: 1px solid #999;
}
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 hotpink">
<div class="row">
<div class="left-side pink col-md-10"></div>
<div class="right-side deeppink col-md-2">
отправить
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
duplicate on codepen where the result is displayed on the entire width of the display.
And here is an example with the subject material-design.
.hotpink {
width: 100%;
height: 100vh;
border: 1px solid #999;
}
.pink {
width: 100%;
height: 100vh;
border: 1px solid #999;
}
.deeppink {
width: 100%;
height: 100vh;
border: 1px solid #999;
}
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/bootstrap-material-design.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/ripples.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/js/material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/js/ripples.js"></script>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 hotpink">
<div class="row">
<div class="left-side pink col-md-10"></div>
<div class="right-side deeppink col-md-2">
отправить
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
duplicate on codepen. Why and how to fix it?

Well the stylesheets you added for ripples.css and bootstrap-material-design.css are causing unwanted behaviour for you.
Removing both of these stylesheets from the second sample( the one with issue ), you can see there will be no differnce between the samples you provided.
Layout and style issues can arise when you are refering to different stylesheets.

White space and background moves

There is a faq on my website for a school project created with Javascript animations.
The problem is:
1; The background moves when 2 or more faqs are opened.
2; There is a white space beneath the background.
The faq on my website (click for the image)
The javascript
var main = function() {
$('.article').click(function() {
$('.article').removeClass('current');
$('.description').hide();
$(this).addClass('current');
$(this).children('.description').show();
});
$(document).keypress(function(event) {
if(event.which === 111) {
$('.current').children('.description').toggle();
}
else if(event.which === 110) {
var currentArticle = $('.current');
var nextArticle = currentArticle.next();
currentArticle.removeClass('current');
nextArticle.addClass('current');
}
});
};
$(document).ready(main);
The Css
Body {
background: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png');
}
.articles_title {
color:white;
font-size: 250%;
position: fixed;
top: 30px;
right: 50%;
}
p {
margin: 0;
}
.row {
margin: 0;
}
.articles {
margin-top: 16px;
margin-bottom: 16px;
}
.article {
color: #222;
background: rgba(255,255,255,.9);
border-spacing: 2px;
border-color: gray;
font-family: arial,sans-serif;
border-bottom: 1px #e5e5e5 solid;
}
.current .item {
background: rgba(206,220,206,.9);
}
.item {
cursor: pointer;
padding-top: 7px;
padding-bottom: 7px;
}
.item .source {
margin-left: 16px;
}
.item .title {
font-weight: bold;
}
.item .pubdate {
margin-right: 16px;
}
.item .pubdate {
text-align: right;
}
.description {
display: none;
padding-top: 10px;
padding-bottom: 10px;
}
.description h1 {
margin-top: 0px;
font-size: 16px;
}
/* the index.php css */
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
/* Initial menu */
.menu {
background: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
left: -285px; /* start off behind the scenes */
height: 100%;
position: fixed;
width: 285px;
}
/* Basic styling */
.jumbotron {
background-image: url('http://i.imgur.com/JvdPG8h.png?1');
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu ul {
border-top: 1px solid #636366;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636366;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.icon-menu {
color: #fff;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
}
.icon-menu i {
margin-right: 5px;
}
The index.php in the faq.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles/faq.css">
</head>
<body>
<div class="articles container">
<div class="article current">
<div class="item row">
<div class="col-xs-3">
<p class="source">FLIGHT</p>
</div>
<div class="col-xs-6">
<p class="title">Embraer adds third Legacy 500 prototype to flight test campaign</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 23</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>Embraer adds third Legacy 500 prototype to flight test campaign</h1>
<p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">AW Commercial Aviation</p>
</div>
<div class="col-xs-6">
<p class="title">CSeries Supplier Scramble</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>CSeries Supplier Scramble</h1>
<p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">AW Commercial Aviation</p>
</div>
<div class="col-xs-6">
<p class="title">CSeries Supplier Scramble</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>CSeries Supplier Scramble</h1>
<p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production
</div>
<div class="col-xs-3"> </div>
</div>
</div>
<div class="article">
<div class="item row">
<div class="col-xs-3">
<p class="source">AW Commercial Aviation</p>
</div>
<div class="col-xs-6">
<p class="title">CSeries Supplier Scramble</p>
</div>
<div class="col-xs-3">
<p class="pubdate">Mar 22</p>
</div>
</div>
<div class="description row">
<div class="col-xs-3"> </div>
<div class="col-xs-6">
<h1>CSeries Supplier Scramble</h1>
<p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/faq.js"></script>
</body>
</html>

I jsfiddle your question http://jsfiddle.net/wz7eojqp/
I couldn't find the problems you described.
but I think that regarding the white space in the bottom of your page the problem is default browser margin. try to body{margin: 0;} or even better reset code.
http://meyerweb.com/eric/tools/css/reset/

Please close all (!) your html tags. It will fix many problems.
I've created a jsfiddle: http://jsfiddle.net/7ypk522y/
I have deleted your css class .jumbotron because you don't use it and changed it with the following lines. I hope this fixes your problem.
body {
background: url("http://i.imgur.com/JvdPG8h.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
padding: 20px;
}

Develop Reference

JavaScript is the programming language of the Web.

Why won't my Jquery fade function work? - javascript

Related

Active Navigation Bar section

CSS body tag not working after inserting bootstrap navbar

Vertically centering a group of buttons in bootstrap

Why not correctly displayed button?

White space and background moves

Categories

Resources