Jquery Fadein appears to be pushing down the div, after fading in the hidden one.
What would
be the best way to tackle this? I have read a few of the old solutions, but they haven't helped. I've also tried removing the div class(the div class I want hidden, when it fades in) but that hasn't appeared to have helped either.
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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="itemWithin">
<div class="hiddenOne">
<h2 class="center2">Mining & Resources</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Mining & Resources</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin2">
<div class="hiddenOne">
<h2 class="center2">Defence</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Defence</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin3">
<div class="hiddenOne">
<h2 class="center2">Energy & Water</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Energy & Water</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin4">
<div class="hiddenOne">
<h2 class="center2">Public & Private Infrastucture</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Public & Private Infrastucture</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin5">
<div class="hiddenOne">
<h2 class="center2">Commercial & Residential Building</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Commercial & Residential Building</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin6">
<div class="hiddenOne">
<h2 class="center2">Industrial Manufacturing</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Industrial Manufacturing</h2>
<button class="button">View More</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
CSS
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.centerThis{
text-align: center;
margin-top:20px;
}
.center2{
text-align: center;
background-color:red;
}
.container{
margin-top: 20px;
display: flex; /* establish flex container */
flex-wrap: wrap; /* enable flex items to wrap */
justify-content: space-around;
}
.button{
background: red;
color: white;
padding:10px;
}
.buttonTwo{
background: red;
color: white;
padding:10px;
}
.buttonThree{
background: red;
color: white;
padding:10px;
}
.buttonFour{
background: red;
color: white;
padding:10px;
}
.buttonFive{
background: red;
color: white;
padding:10px;
}
.buttonSix{
background: red;
color: white;
padding:10px;
}
.white{
color: white;
text-align: center;
padding-top: 50px;
}
.hiddenOne{
height:300px;
padding-top: 20px;
background-color: red;
color: white;
}
.itemWithin{
flex: 0 35%;
height: 300px;
margin-bottom: 2%;
background-color: grey;
}
.itemWithin2{
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin3{
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin4{
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin5{
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin6{
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
JavaScript/Jquery
$(document).ready(function () {
$(".hiddenOne").hide();
$(".button").hover(function () {
$(this).parent().find('.hiddenOne').fadeIn("slow");
})
$(".hiddenOne").mouseleave(function () {
$(this).fadeOut("slow");
})
});
change hiddenOne class to :
.hiddenOne{
height:300px;
padding-top: 20px;
background-color: red;
color: white;
position: absolute;
width:100%;
}
and add this class
.container > div{
position:relative;
}
full code
$(document).ready(function() {
$(".hiddenOne").hide();
$(".button").hover(function() {
$(this).parent().find('.hiddenOne').fadeIn("slow");
})
$(".hiddenOne").mouseleave(function() {
$(this).fadeOut("slow");
})
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.centerThis {
text-align: center;
margin-top: 20px;
}
.center2 {
text-align: center;
background-color: red;
}
.container {
margin-top: 20px;
display: flex;
/* establish flex container */
flex-wrap: wrap;
/* enable flex items to wrap */
justify-content: space-around;
}
.button {
background: red;
color: white;
padding: 10px;
}
.buttonTwo {
background: red;
color: white;
padding: 10px;
}
.buttonThree {
background: red;
color: white;
padding: 10px;
}
.buttonFour {
background: red;
color: white;
padding: 10px;
}
.buttonFive {
background: red;
color: white;
padding: 10px;
}
.buttonSix {
background: red;
color: white;
padding: 10px;
}
.white {
color: white;
text-align: center;
padding-top: 50px;
}
.hiddenOne {
height: 300px;
padding-top: 20px;
background-color: red;
color: white;
position: absolute;
width: 100%;
}
.itemWithin {
flex: 0 35%;
height: 300px;
margin-bottom: 2%;
background-color: grey;
}
.itemWithin2 {
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin3 {
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin4 {
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin5 {
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.itemWithin6 {
flex: 0 35%;
height: 300px;
background-color: grey;
margin-bottom: 2%;
}
.container>div {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<div class="container">
<div class="itemWithin">
<div class="hiddenOne">
<h2 class="center2">Mining & Resources</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Mining & Resources</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin2">
<div class="hiddenOne">
<h2 class="center2">Defence</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Defence</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin3">
<div class="hiddenOne">
<h2 class="center2">Energy & Water</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Energy & Water</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin4">
<div class="hiddenOne">
<h2 class="center2">Public & Private Infrastucture</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Public & Private Infrastucture</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin5">
<div class="hiddenOne">
<h2 class="center2">Commercial & Residential Building</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Commercial & Residential Building</h2>
<button class="button">View More</button>
</div>
<div class="itemWithin6">
<div class="hiddenOne">
<h2 class="center2">Industrial Manufacturing</h2>
<p class="white">
Here are the details when view more is hovered
</p>
</div>
<h2 class="centerThis">Industrial Manufacturing</h2>
<button class="button">View More</button>
</div>
</div>
<script src="app.js"></script>
Related
I want to resize my navigation bar items, so there will be enough distance between them and the sticky logo. How can I achieve that? I tried to edit the container, but it didn't resize and instead overlapping appeared. I mean, it should be put to the right side and leave enough distance between the logo and the menu bar.
body {
font-family: Arial, sans-serif;
margin: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.testmonial {
background-image: url(images/testimonial-bg.jpg);
position: relative;
background-repeat: no-repeat;
}
.testmonial:after {
content: "";
background: #1baaba;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .6;
z-index: 1;
}
.owl-wrapper {
padding: 80px 20px;
z-index: 999;
position: relative;
}
.owl-testmonial {
background: #FFF;
/* max-width: 400px; */
margin: 0 auto;
padding: 40px 25px;
position: unset;
}
.owl-testmonial:before {
content: "\f10d";
font-family: "Font Awesome 5 Free";
font-weight: 900;
text-align: center;
display: block;
font-size: 92px;
color: #e7e7e7;
margin-top: -106px;
}
.owl-testmonial .owl-prev {
position: absolute;
left: 0;
top: 45%;
font-size: 36px !important;
border: 1px solid #FFF !important;
width: 33px !important;
height: 36px !important;
line-height: 17px !important;
color: #FFF;
}
.owl-testmonial .owl-next {
position: absolute;
right: 0;
top: 45%;
font-size: 36px !important;
border: 1px solid #FFF !important;
width: 33px !important;
height: 36px !important;
color: #FFF;
line-height: 17px !important;
}
nav {
overflow: hidden;
background-color: #333;
}
nav.sticky {
position: fixed;
top: 0;
width: 100%;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
}
nav li {
margin: 0 30px;
}
nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
nav a:hover {
background-color: #ffeb3b;
color: black;
}
a.active {
background-color: #2196f3;
color: white;
}
.content {
padding: 20px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 60px;
}
.sticky ul {
height: 50px;
/* or any other desired height */
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.sticky a {
height: 100%;
/* or any other desired height */
line-height: 50px;
padding: 0 20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
background-color: #fff;
width: 30%;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
float: left;
}
input[type="text"],
input[type="email"],
input[type="tel"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 10px;
border: 1px solid #ccc;
}
button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #ffeb3b;
color: #2196f3;
border-radius: 10px;
border: 1px solid #2196f3;
margin-top: 20px;
cursor: pointer;
}
.office-map {
margin-top: 50px;
}
/* Responsive styles */
#media screen and (max-width: 992px) {
nav li {
margin: 0 10px;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 80%;
}
}
#media screen and (max-width: 768px) {
header {
height: 60vh;
}
nav {
top: 60vh;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 90%;
}
}
#media screen and (max-width: 576px) {
header {
height: 40vh;
}
nav {
top: 40vh;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 95%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Add JS for owl carousel -->
<link rel="stylesheet" href="fontawesome/css/all.min.css">
<link rel="stylesheet" href="owlcarousel/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/dist/assets/owl.theme.default.min.css">
<script src="main.js"></script>
<link rel="stylesheet" href="style.css">
<title>My Homepage</title>
</head>
<body>
<div class="testmonial">
<div class="container">
<div class="owl-wrapper">
<div class="owl-carousel owl-testmonial">
<div class="slide-item">
<img src="testimony/slider1585663811.png" alt="Slide 1">
</div>
<div class="slide-item">
<img src="testimony/slider1589942091.png" alt="Slide 2">
</div>
<div class="slide-item">
<img src="testimony/slider1590030001.png" alt="Slide 3">
</div>
</div>
</div>
</div>
</div>
<!-- 7 items sticky menu bar -->
<nav id="navbar">
<ul id="nav-ul">
<li><a class="active" href="#home">Home</a></li>
<li>About Us</li>
<li>Tabungan</li>
<li>Kredit</li>
<li>Deposito</li>
<li>Berita</li>
<li>Pengajuan Kredit</li>
</ul>
</nav>
<main class="content">
<!-- 3 static benefits -->
<section class="benefits">
<div class="card">
<h3>Benefit 1</h3>
<p>Description</p>
</div>
<div class="card">
<h3>Benefit 2</h3>
<p>Description</p>
</div>
<div class="card">
<h3>Benefit 3</h3>
<p>Description</p>
</div>
</section>
<!-- 3 types of product -->
<section class="products">
<h2>Products</h2>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</section>
<!-- ID tracking -->
<section class="id-tracking">
<h2>ID Tracking</h2>
<p>Description</p>
</section>
<!-- 3 dynamic testimonies -->
<section class="testimonies">
<h2>Testimonies</h2>
<div class="owl-carousel owl-theme">
<div class="testimony-1">Testimony 1</div>
<div class="testimony-2">Testimony 2</div>
<div class="testimony-3">Testimony 3</div>
</div>
</section>
<!-- 4 dynamic slider of news -->
<section class="news">
<h2>News</h2>
<div class="owl-carousel owl-theme">
<div class="news-1">News 1</div>
<div class="news-2">News 2</div>
<div class="news-3">News 3</div>
<div class="news-4">News 4</div>
</div>
</section>
<!-- suggestion box -->
<section class="suggestion-box">
<h2>Suggestion Box</h2>
<form action="#">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phone-number">
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
<button type="submit">Submit</button>
</form>
</section>
<!-- static map to the office -->
<section class="map">
<h2>Map to the Office</h2>
<img src="map.jpg" alt="Map to the Office">
</section>
</main>
<script src="owlcarousel/jquery.min.js"></script>
<script src="owlcarousel/dist/owl.carousel.min.js"></script>
<script>
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
var logo = document.createElement("img");
logo.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
logo.style.height = "50px";
logo.style.marginLeft = "40px";
logo.style.float = "left";
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
if (!navbar.classList.contains("logo")) {
navbar.classList.add("logo");
navbar.insertBefore(logo, navbar.firstChild);
navbar.style.height = "50px";
}
} else {
navbar.classList.remove("sticky");
navbar.classList.remove("logo");
navbar.removeChild(logo);
navbar.style.height = "auto";
}
}
window.onscroll = function() {
myFunction();
};
</script>
</body>
</html>
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;
}
I'm working on one of mine project and for that I want to make the Search Bar sticky for that I've written a JS code but the problem is that the Search Bar is appear to be sticky on the "Context Section" only, It's not sticking/ working on "Sidebar & Footer". I want to make it sticky for complete body after the OffSet.
I have also tried the "position: fixed;" instead of "position: sticky;" and It's working fine in fixed position but in fixed position the Search Bar goes outside the body (Even with "overflow: hidden;" not working) that's why I'm using the sticky position.
How can I fix this issue?
const searchBAR = document.querySelector('.search-bar');
let navTop = searchBAR.offsetTop;
function stickySearchBar() {
if (window.scrollY >= navTop) {
searchBAR.classList.add('fixed');
} else {
searchBAR.classList.remove('fixed');
}
}
window.addEventListener('scroll', stickySearchBar);
.search-bar {
width: 100%;
position: relative;
display: flex;
}
.search-term {
width: 100%;
max-height: 36px;
border: 3px solid black;
border-right: none;
padding: 5px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
}
.search-term:focus {
color: black;
}
.search-btn {
width: 40px;
height: 36px;
border: 1px solid black;
background: black;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.fixed {
position: sticky;
top: 0;
}
main .content-section,
main .sidebar-section {
background-color: skyblue;
padding: 15px;
height: auto;
}
.main-section {
margin: 0 auto;
display: grid;
grid-gap: 0px;
grid-template-columns: 70% 30%;
}
#media (max-width: 600px) {
.main-section {
grid-template-columns: 100%;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="main" style="width: 400px;">
<header style="width: 100%; height:200px; background-color: skyblue;">
HEADER SECTION
</header>
<div class="main-section">
<div class="content-section">
<div class="search-bar">
<input type="text" class="search-term" placeholder="Search Here...">
<button type="submit" class="search-btn">
<i class="fa fa-search"></i>
</button>
</div>
<div style="width: 100%; height: 1000px; background-color: pink;">
CONTENT SECTION
</div>
</div>
<div class="sidebar-section">
<div style="width: 100%; height:1000px; background-color: yellow;">
SIDE-BAR SECTION
</div>
</div>
</div>
<footer style="width: 100%; height:200px; background-color: blue;">
FOOTER SECTION
</footer>
</div>
you can put the search-bar in the outermost div so that it can include the header and footer
const searchBAR = document.querySelector('.search-bar');
let navTop = searchBAR.offsetTop;
function stickySearchBar() {
if (window.scrollY >= navTop) {
searchBAR.classList.add('fixed');
} else {
searchBAR.classList.remove('fixed');
}
}
window.addEventListener('scroll', stickySearchBar);
.search-bar {
width: 100%;
position: relative;
display: flex;
}
.search-term {
width: 100%;
max-height: 36px;
border: 3px solid black;
border-right: none;
padding: 5px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
}
.search-term:focus {
color: black;
}
.search-btn {
width: 40px;
height: 36px;
border: 1px solid black;
background: black;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.fixed {
position: sticky;
top: 0;
}
main .content-section,
main .sidebar-section {
background-color: skyblue;
padding: 15px;
height: auto;
}
.main-section {
margin: 0 auto;
display: grid;
grid-gap: 0px;
grid-template-columns: 70% 30%;
}
#media (max-width: 600px) {
.main-section {
grid-template-columns: 100%;
}
}
<div class="main" style="width: 400px;">
<div class="search-bar">
<input type="text" class="search-term" placeholder="Search Here...">
<button type="submit" class="search-btn">
<i class="fa fa-search"></i>
</button>
</div>
<header style="width: 100%; height:200px; background-color: skyblue;">
HEADER SECTION
</header>
<div class="main-section">
<div class="content-section">
<!-- <div class="search-bar">
<input type="text" class="search-term" placeholder="Search Here...">
<button type="submit" class="search-btn">
<i class="fa fa-search"></i>
</button>
</div> -->
<div style="width: 100%; height: 1000px; background-color: pink;">
CONTENT SECTION
</div>
</div>
<div class="sidebar-section">
<div style="width: 100%; height:1000px; background-color: yellow;">
SIDE-BAR SECTION
</div>
</div>
</div>
<footer style="width: 100%; height:200px; background-color: blue;">
FOOTER SECTION
</footer>
</div>
I am trying to make the second page of my Website, but some of the CSS and JS seem to not work.
I have 4 files, and 4 folders (all located in 1 same folder). The first folder is view, which contains index.html (the main page of the website), and links.html (the file that isn't working). Then there is the js folder which contains script.js. The third folder is css and inside of it is style.css. The final folder is asset which has image assets for my Website.
Here is the content of 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>Linkeld</title>
<!-- CSS Links -->
<link rel="stylesheet" href="../css/style.css">
<!-- JS Links -->
<script src="../js/script.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div id="loader">
<span>
<i class="fas fa-spinner fa-spin"></i>
</span>
</div>
<div id="topnav" class="transparent">
<div class="wrapper main">
<div class="wrapper left" id="navLogo">
<img src="../asset/9984-confusion.png" alt="logo">
</div>
<div class="wrapper right" id="navLinks">
Home
Links
Account
About
</div>
</div>
</div>
<div id="head">
<div class="wrapper">
<img src="../asset/9984-confusion.png" alt="logo">
<h1>Linkeld</h1>
<h2>With over 1.000.000 links worldwide</h2>
<div id="signup">
Sign-Up Now!
</div>
</div>
</div>
<div id="main">
<div id="aboutWebsite">
<div class="wrapper">
<div class="card">
<h1><i class="fas fa-share-alt"></i> Share</h1>
<p>Share links to people across the globe to discover, the limitation is only your imagination</p>
<div class="image" id="image1">
<img src="../asset/brooke-cagle-g1Kr4Ozfoac-unsplash-removebg-preview.png" alt="image1">
</div>
</div>
<div class="card">
<h1><i class="fas fa-search"></i> Discover</h1>
<p>Discover new websites from other people via links, you can visit all of the internet's website!
</p>
<div class="image" id="image2">
<img src="../asset/grzegorz-walczak-yoIIPcrWhjI-unsplash-removebg-preview.png" alt="image2">
</div>
</div>
<div class="card">
<h1><i class="fas fa-times-circle"></i> No Restrictions</h1>
<p>No restricted links or banned sites, share whatever you like</p>
<div class="image" id="image3">
<img src="../asset/cdd20-vR6bNYTVlpo-unsplash-removebg-preview.png" alt="image3">
</div>
</div>
</div>
</div>
<div id="whySignup">
<div class="wrapper">
<div class="section">
<h1><i class="fas fa-question-circle"></i> Why Sign-Up?</h1>
<p>Firstly, you'll be able to share links with others! Not just click them.</p>
<p>Secondly, you can like and save links to your account, so you can view at them later.</p>
<p>Thirdly, you'll be able to customize your Username! No more plain old nicknames.</p>
</div>
<div class="section">
<img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
</div>
</div>
</div>
<div id="phishing">
<div class="wrapper">
<div class="section">
<h1><i class="fas fa-question-circle"></i> Would i fall to phishing?</h1>
<p>Well technically, yes, you will at some point fall into a phishing scam.</p>
<p>But, you can check the domain first, before clicking the link.</p>
<p>Check for any typos, or weird characters. A site that has a suspicious looking domain may be a
phishing website so be careful.</p>
</div>
<div class="section">
<img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
</div>
</div>
</div>
<div id="nfsw">
<div class="wrapper">
<div class="section">
<h1><i class="fas fa-question-circle"></i> Can I post NFSW related stuff?</h1>
<p>There is no limitation to what website you want to share here.</p>
<p>So yes you absolutely can post NFSW related content here and not get banned.</p>
</div>
<div class="section">
<img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
</div>
</div>
</div>
<div id="signupCall">
<div class="wrapper">
<div class="section">
<h1>What are you waiting for?</h1>
</div>
<div class="section">
<div>
<a class="button" href="">Sign-Up Now!</a>
</div>
</div>
</div>
</div>
</div>
<div id="foot">
<div class="wrapper">
<div class="section">
<h2>Other resources</h2>
Home
Copyright
Terms
Policy
Sources
</div>
<div class="section">
<h2>About us</h2>
Team
About
Site Stats
</div>
</div>
</div>
</body>
</html>
And here is links.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>Linkeld</title>
<!-- CSS Links -->
<link rel="stylesheet" href="../css/style.css">
<!-- JS Links -->
<script src="../js/script.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div id="loader">
<span>
<i class="fas fa-spinner fa-spin"></i>
</span>
</div>
<div id="topnav" class="transparent">
<div class="wrapper main">
<div class="wrapper left" id="navLogo">
<img src="../asset/9984-confusion.png" alt="logo">
</div>
<div class="wrapper right" id="navLinks">
Home
Links
Account
About
</div>
</div>
</div>
<div id="head">
<div class="wrapper">
<img src="../asset/9984-confusion.png" alt="logo">
<h1>Links</h1>
<h2 style="margin-bottom: 100px;">This is where you'll find links to Websites!</h2>
</div>
</div>
<div id="main">
<div id="linksList">
<div class="wrapper">
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
</div>
</div>
</div>
<div id="foot">
<div class="wrapper">
<div class="section">
<h2>Other resources</h2>
Home
Copyright
Terms
Policy
Sources
</div>
<div class="section">
<h2>About us</h2>
Team
About
Site Stats
</div>
</div>
</div>
</body>
</html>
Now for the CSS (style.css) :
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
:root {
/* CSS HEX */
--lime-green: #1ec90eff;
--metallic-sunburst: #9b7e46ff;
--mellow-apricot: #f4b266ff;
--dark-liver-horses: #544343ff;
}
html {
scroll-behavior: smooth;
}
a {
color: var(--lime-green);
text-decoration: none;
transition: text-decoration 0.3s ease-in-out;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: var(--lime-green);
}
#topnav {
position: fixed;
width: 100%;
z-index: 99;
background: white;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
transition: all 0.2s ease-in-out;
}
#topnav.transparent {
background: transparent;
box-shadow: none;
}
#topnav .wrapper.main {
display: flex;
justify-content: stretch;
}
#topnav .wrapper {
display: flex;
}
#topnav .wrapper#navLogo {
width: 70%;
}
#topnav .wrapper#navLogo img {
padding: 10px;
width: 60px;
margin-left: 40px;
}
#topnav .wrapper#navLinks {
flex: 1;
justify-content: space-evenly;
}
#topnav.transparent .wrapper#navLinks a {
padding: 20px;
text-decoration: none;
color: white;
text-align: center;
transition: all 0.2s ease-in-out;
}
#topnav .wrapper#navLinks a {
color: black;
padding: 20px;
text-decoration: none;
text-align: center;
transition: all 0.2s ease-in-out;
}
#head {
background: url("../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg");
margin-bottom: 30px;
}
#head .wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#head .wrapper h1,
#head .wrapper h2 {
color: white;
}
#head .wrapper img {
width: 40px;
margin: 100px 0 20px 0;
}
#head .wrapper h1 {
font-size: 90px;
}
#head .wrapper h2 {
font-size: 18px;
}
#head #signup {
margin: 80px 0 100px 0;
}
#head #signup a {
color: white;
padding: 20px;
background: var(--mellow-apricot);
border-radius: 10px;
transition: all 0.3s ease-in-out;
display: block;
}
#head #signup a:hover {
text-decoration: none;
transform: scale(1.1);
}
#aboutWebsite .wrapper {
display: flex;
flex-direction: row;
justify-content: center;
}
#aboutWebsite .wrapper .card {
width: 400px;
margin: 20px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
padding: 80px 60px;
}
#aboutWebsite .wrapper .card h1 {
font-size: 40px;
margin-bottom: 20px;
font-weight: 300;
}
#aboutWebsite .wrapper .card p {
font-size: 18px;
}
#aboutWebsite .wrapper .card .image {
display: flex;
justify-content: center;
}
#aboutWebsite .wrapper .card .image img {
width: 300px;
}
#aboutWebsite .wrapper .card .image#image1,
#aboutWebsite .wrapper .card .image#image2 {
margin-top: 130px;
}
#foot {
margin-top: 50px;
background: rgb(235, 235, 235);
}
#foot .wrapper {
display: flex;
}
#foot .wrapper .section {
flex: 1;
padding: 50px 30px;
}
#foot .wrapper .section a {
display: block;
color: black;
margin-bottom: 30px;
width: max-content;
}
#foot .wrapper .section h2 {
margin-bottom: 30px;
}
#loader {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
background: white;
z-index: 999;
}
#loader.loaded {
display: none;
}
#loader span {
font-size: 100px;
}
a.button {
color: white;
padding: 20px;
background: var(--mellow-apricot);
border-radius: 10px;
transition: all 0.3s ease-in-out;
display: block;
}
a.button:hover {
text-decoration: none;
transform: scale(1.1);
}
#whySignup {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#whySignup .wrapper {
display: flex;
justify-content: start;
transition: all 0.5s ease-in-out;
}
#whySignup .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#whySignup .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
}
#whySignup .wrapper .section:first-child p {
font-size: 18px;
margin-bottom: 10px;
}
#whySignup .wrapper .section img {
width: 450px;
height: 500px;
}
#phishing {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#phishing .wrapper {
display: flex;
justify-content: start;
flex-direction: row-reverse;
transition: all 0.5s ease-in-out;
}
#phishing .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#phishing .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
}
#phishing .wrapper .section:first-child p {
font-size: 18px;
margin-bottom: 10px;
}
#phishing .wrapper .section img {
width: 450px;
height: 500px;
}
#nfsw {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#nfsw .wrapper {
display: flex;
justify-content: start;
transition: all 0.5s ease-in-out;
}
#nfsw .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#nfsw .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
}
#nfsw .wrapper .section:first-child p {
font-size: 18px;
margin-bottom: 10px;
}
#nfsw .wrapper .section img {
width: 450px;
height: 500px;
}
#signupCall {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#signupCall .wrapper {
display: flex;
flex-direction: column;
transition: all 0.5s ease-in-out;
}
#signupCall .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
background: transparent;
}
#signupCall .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
font-size: 50px;
}
#signupCall .wrapper .section:first-child h2 {
font-size: 20px;
margin-bottom: 10px;
}
#signupCall .wrapper .section {
background: url("../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg");
background-position: -45%;
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
height: 300px;
}
#linksList {
padding: 50px;
}
#linksList .wrapper {
display: flex;
}
#linksList .wrapper .cards {
padding: 30px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
width: 120px;
margin: 30px;
background: cyan;
}
Here's script.js :
window.addEventListener("load", () => {
const loader = document.getElementById("loader");
loader.classList.add("loaded");
})
window.addEventListener("scroll", () => {
let scrollY = window.scrollY;
let posY = 450;
let topnav = document.getElementById("topnav");
if (scrollY < posY) {
topnav.classList.add("transparent");
} else {
topnav.classList.remove("transparent");
}
});
Now the problem is that #linksList doesn't seem to change even though I've written the CSS in style.css. What's wrong about it? I can't seem to find anything that could've conflicted with the CSS. I even gave the .card in #linksList a cyan background to test if it works, but to no result.
Then there's the #topnav, the JS won't add the class .transparent when the user scrolled to the #topnav in links.html until the browser's screen was resized (I'm using Chrome). I have no actual clue about what is going on here. Maybe it's just my browser acting weird or is it because I made some kind of mistake in the scripting?
(sorry for the long question)
I got 6 divs of which they each have an image and a button (javascript). When I click on a button of one of the divs, another div will show on the exact same place of the button of the div you clicked. When I click on all buttons separate, there is no problem. But when I click by example 'auto 2' and 'auto 3', 'auto 3" will show on the right side of the screen, not on the place where it will show when you click on the button separate. I got also this problem with 'auto 4,5 and 6. I dont got this problem with the first div 'auto 1' because its has an absolute position. When I used an absolute position on the other divs i couldnt position them properly. I think the problem has to do something with the fact that a div has a block display and that by example 'auto 2' pushes 'auto 3" to the side because it is wider than it looks.
PS. srry for my bad english and I used and internal javascript with tags because an external document like .js doesnt work for me for some reason
Thanks in advance!
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
background-color: #234aa6;
}
.auto{
padding-top: 4em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
}
.auto h1{
font-size: 40px;
}
.auto img{
width: 90%;
height: auto;
padding-top: 1em;
}
.auto button{
background-color: darkblue;
color: white;
padding: 20px;
font-family: helvetica;
font-size: 20px;
text-transform: uppercase;
border: none;
border-radius: 10px;
cursor: pointer;
margin-top: 10px;
}
.auto button:hover{
transition: 0.4s;
background-color: #011b57;
}
.container {
text-align: center;
}
.auto:nth-of-type(3n+1) {
clear:left;
}
.wrapper input{
padding: 20px 100px 20px 100px;
text-align: center;
margin-top: 10em;
background-color: white;
border: none;
}
.select1{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: absolute;
display: none;
}
.select1 h1{
font-size: 40px;
}
.bg{
width: 570.83px;
height: 325px;
background-color: darkblue;
text-align: center;
margin: auto;
margin-top: 0.5em;
font-family: helvetica;
font-size: 2.5em;
padding-top: 3.5em;
}
.select2{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: relative;
left: 39.5em;
bottom: 65.5em;
}
.select2 h1{
font-size: 40px;
}
.select3{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: relative;
left: 79em;
bottom: 65.5em;
}
.select3 h1{
font-size: 40px;
}
.select4{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: relative;
left: 0.25em;
bottom: 32.9em;
}
.select4 h1{
font-size: 40px;
}
.select5{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: relative;
left: 39.5em;
bottom: 32.9em;
}
.select5 h1{
font-size: 40px;
}
.select6{
padding-top: 3.8em;
color: white;
text-align: center;
font-family: helvetica;
float: left;
width: 33.33%;
position: relative;
left: 79em;
bottom: 32.9em;
}
.select6 h1{
font-size: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>Sleutelkast</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class="autolijst">
<div class="auto">
<h1>Auto 1</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button1">SELECTEER</button>
</div>
</div>
<div class="auto" id="auto">
<h1>Auto 2</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button2">SELECTEER</button>
</div>
</div>
<div class="auto" id="auto">
<h1>Auto 3</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button3">SELECTEER</button>
</div>
</div>
<div class="auto" id="auto">
<h1>Auto 4</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button4">SELECTEER</button>
</div>
</div>
<div class="auto" id="auto">
<h1>Auto 5</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button5">SELECTEER</button>
</div>
</div>
<div class="auto" id="auto">
<h1>Auto 6</h1>
<img src="https://topgear.nl/app/uploads/2019/07/bmw-x6-m-2019.jpg">
<div class="container">
<button id="button6">SELECTEER</button>
</div>
</div>
</div>
<div class="selectlijst">
<div class="select1" id="select1">
<h1>Auto 1</h1>
<div class="bg" id="bg">
Sleutel 1
</div>
</div>
<div class="select2" id="select2">
<h1>Auto 2</h1>
<div class="bg" id="bg">
Sleutel 2
</div>
</div>
<div class="select3" id="select3">
<h1>Auto 3</h1>
<div class="bg" id="bg">
Sleutel 3
</div>
</div>
<div class="select4" id="select4">
<h1>Auto 4</h1>
<div class="bg" id="bg">
Sleutel 4
</div>
</div>
<div class="select5" id="select5">
<h1>Auto 5</h1>
<div class="bg" id="bg">
Sleutel 5
</div>
</div>
<div class="select6" id="select6">
<h1>Auto 6</h1>
<div class="bg" id="bg">
Sleutel 6
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(".select1").hide();
$("#button1").click(function(){
if($(".select1").is(':visible')){
$(".select1").slideUp(100);
}
else
{
$(".select1").slideDown(100);
}
});
});
$(document).ready(function(){
$(".select2").hide();
$("#button2").click(function(){
if($(".select2").is(':visible')){
$(".select2").slideUp(100);
}
else
{
$(".select2").slideDown(100);
}
});
});
$(document).ready(function(){
$(".select3").hide();
$("#button3").click(function(){
if($(".select3").is(':visible')){
$(".select3").slideUp(100);
}
else
{
$(".select3").slideDown(100);
}
});
});
$(document).ready(function(){
$(".select4").hide();
$("#button4").click(function(){
if($(".select4").is(':visible')){
$(".select4").slideUp(100);
}
else
{
$(".select4").slideDown(100);
}
});
});
$(document).ready(function(){
$(".select5").hide();
$("#button5").click(function(){
if($(".select5").is(':visible')){
$(".select5").slideUp(100);
}
else
{
$(".select5").slideDown(100);
}
});
});
$(document).ready(function(){
$(".select6").hide();
$("#button6").click(function(){
if($(".select6").is(':visible')){
$(".select6").slideUp(100);
}
else
{
$(".select6").slideDown(100);
}
});
});
</script>
</html>