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>
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'm a beginner to HTML and JavaScript.
I'm building a tabs bar, in which I want to have the option to scroll it horizontally, not with a traditional browser scroll, but with arrow buttons that I've created.
Here is how my tabs bar looks like:
This is the best I've managed to do:
function clickLeft(){
arrowLeft.style.color="white";
setTimeout(function(){
arrowLeft.style.color="black";
},420);
}
function clickRight(){
arrowRight.style.color="white";
setTimeout(function(){
arrowRight.style.color="black";
},420);
}
#outer_container{
margin: auto;
}
#tabs_container{
display: flex;
overflow-x: auto;
left: 0;
right: 0;
margin: auto;
margin-top: 10px;
width: 60vh;
height: 70px;
border: 2px solid black;
border-bottom: 0;
border-radius: 10px;
padding: 4px;
}
#inner_wrap{
display: flex;
border-bottom: 2px solid black;
height: 50px;
}
#inner_wrap div{
text-align: center;
background-color: gray;
padding: 10px;
height: 20px;
border-radius: 5px;
margin: 2px;
width: max-content;
}
#tabs_container::-webkit-scrollbar{
width: 0;
}
#tabs_container::-webkit-scrollbar-track {
margin-top: 20px;
width: 20px;
padding: 20px;
-webkit-box-shadow:
inset 0 0 30px rgba(0, 0, 0, 0);
border-radius: 10px;
background-color: transparent;
}
#tabs_container::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .3);
background-color: #666666;
}
#icon_tab{
display: inline-block;
background-color: none;
border:0;
color:white;
float: right;
width: 20px;
margin:5px;
}
.arrow{
font-size: 34px;
margin: 15px;
transition: color 0.4s;
}
<div id="main_container">
<table id=outer_container>
<tr>
<td>
<div>
<i class="arrow fas fa-arrow-circle-left" onclick="clickLeft()"></i>
</div>
</td>()
<td>
<div id="tabs_container">
<div id=inner_wrap>
<div>
geisha ch 1
</div>
<div>
geisha ch 2
</div>
<div>
geisha ch 3
</div>
<div>
work
</div>
<div>
hobby
</div>
<div>
music
</div>
<div>
movie
</div>
<div>
book1
</div>
<div>
book2
</div>
<div>
game
</div>
</div>
<div id=icon_tab>
<i class=" fa fa-plus-circle "aria-hidden="true"></i>
</div>
</div>
</td>
<td>
<div>
<i class="arrow fas fa-arrow-circle-right" onclick="clickRight()"></i>
</div>
</td>
</tr>
</table>
</div>
I manage to go to the JavaScript function, but have no idea how to scroll horizontally by JS code. Also I would like to hide the OOTB scroll.
I've also created a fiddle: https://jsfiddle.net/b40c19h6/1/
Use overflow-x: hidden to hide the scrollbar and you can use the scrollLeft or scrollBy function on your tabs element to move the content.
Here how you can do it:
const arrowLeft = document.getElementsByClassName('arrow')[0];
const arrowRight = document.getElementsByClassName('arrow')[1];
const tabs = document.getElementById('tabs_container');
console.log("here")
function clickLeft(){
arrowLeft.style.color="white";
setTimeout(function(){
arrowLeft.style.color="black";
},420);
tabs.scrollLeft -= 30;
}
function clickRight(){
arrowRight.style.color="white";
setTimeout(function(){
arrowRight.style.color="black";
},420);
tabs.scrollLeft += 30;
}
body{
height:100vh;
width:100%;
margin: 0;
}
#main_container{
background-color: #3f51b5;
height:100%;
}
#outer_container{
margin: auto;
}
#tabs_container{
display: flex;
overflow-x: auto;
left: 0;
right: 0;
margin: auto;
margin-top: 10px;
width: 60vh;
height: 70px;
border: 2px solid black;
border-bottom: 0;
border-radius: 10px;
padding: 4px;
}
#inner_wrap{
display: flex;
border-bottom: 2px solid black;
height: 50px;
}
#inner_wrap div{
text-align: center;
background-color: gray;
padding: 10px;
height: 20px;
border-radius: 5px;
margin: 2px;
width: max-content;
}
#tabs_container{
overflow-x: hidden;
}
#tabs_container::-webkit-scrollbar{
width: 0;
}
#tabs_container::-webkit-scrollbar-track {
margin-top: 20px;
width: 20px;
padding: 20px;
-webkit-box-shadow:
inset 0 0 30px rgba(0, 0, 0, 0);
border-radius: 10px;
background-color: transparent;
}
#tabs_container::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .3);
background-color: #666666;
}
#icon_tab{
display: inline-block;
background-color: none;
border:0;
color:white;
float: right;
width: 20px;
margin:5px;
}
.arrow{
font-size: 34px;
margin: 15px;
transition: color 0.4s;
}
<!DOCTYPE html>
<html>
<head>
<title>vacabulary</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">
</head>
<body>
<div id="main_container">
<table id=outer_container>
<tr>
<td>
<div>
<i class="arrow fas fa-arrow-circle-left" onclick="clickLeft()"></i>
</div>
</td>()
<td>
<div id="tabs_container">
<div id=inner_wrap>
<div>
geisha ch 1
</div>
<div>
geisha ch 2
</div>
<div>
geisha ch 3
</div>
<div>
work
</div>
<div>
hobby
</div>
<div>
music
</div>
<div>
movie
</div>
<div>
book1
</div>
<div>
book2
</div>
<div>
game
</div>
</div>
<div id=icon_tab>
<i class=" fa fa-plus-circle "aria-hidden="true"></i>
</div>
</div>
</td>
<td>
<div>
<i class="arrow fas fa-arrow-circle-right" onclick="clickRight()"></i>
</div>
</td>
</tr>
</table>
</div>
<script src="main.js"></script>
</body>
</html>
This should work by using element.scrollBy.
The scrollBy() method of the Element interface scrolls an element by the given amount.
Also, you should set overflow-x to hidden instead of auto. overflow:auto will assign scrollbar to it
The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.
function clickLeft(){
arrowLeft.style.color="white";
setTimeout(function(){
arrowLeft.style.color="black";
},420);
}
function clickRight(){
arrowRight.style.color="white";
setTimeout(function(){
arrowRight.style.color="black";
},420);
}
let left = document.querySelector('#left')
let right = document.querySelector('#right')
left.addEventListener('click',function(){
document.querySelector('#tabs_container').scrollBy(-20,0);
});
right.addEventListener('click',function(){
document.querySelector('#tabs_container').scrollBy(20,0);
});
#outer_container{
margin: auto;
}
#tabs_container{
display: flex;
overflow-x: hidden;
left: 0;
right: 0;
margin: auto;
margin-top: 10px;
width: 60vh;
height: 70px;
border: 2px solid black;
border-bottom: 0;
border-radius: 10px;
padding: 4px;
}
#inner_wrap{
display: flex;
border-bottom: 2px solid black;
height: 50px;
}
#inner_wrap div{
text-align: center;
background-color: gray;
padding: 10px;
height: 20px;
border-radius: 5px;
margin: 2px;
width: max-content;
}
#tabs_container::-webkit-scrollbar{
width: 0;
}
#tabs_container::-webkit-scrollbar-track {
margin-top: 20px;
width: 20px;
padding: 20px;
-webkit-box-shadow:
inset 0 0 30px rgba(0, 0, 0, 0);
border-radius: 10px;
background-color: transparent;
}
#tabs_container::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .3);
background-color: #666666;
}
#icon_tab{
display: inline-block;
background-color: none;
border:0;
color:white;
float: right;
width: 20px;
margin:5px;
}
.arrow{
font-size: 34px;
margin: 15px;
transition: color 0.4s;
}
<div id="main_container">
<table id=outer_container>
<tr>
<td>
<div>
<i class="arrow fas fa-arrow-circle-left" onclick="clickLeft()"></i>
</div>
</td>()
<td>
<div id="tabs_container">
<div id=inner_wrap>
<div>
geisha ch 1
</div>
<div>
geisha ch 2
</div>
<div>
geisha ch 3
</div>
<div>
work
</div>
<div>
hobby
</div>
<div>
music
</div>
<div>
movie
</div>
<div>
book1
</div>
<div>
book2
</div>
<div>
game
</div>
</div>
<div id=icon_tab>
<i class=" fa fa-plus-circle "aria-hidden="true"></i>
</div>
</div>
</td>
<td>
<div>
<button id='left'>Left </button>
<button id='right'>Right</button>
<i class="arrow fas fa-arrow-circle-right" onclick="clickRight()"></i>
</div>
</td>
</tr>
</table>
</div>
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>
I am currently trying to make a tribute page with collapsible content. My problem is that when you click on the first collapsible, the rest of them open. I would like for a collapsible to only open when it is clicked. They are 9 in total and it makes no sense for all of them to open when user clicks just one.
body {
margin: 0px 0px 0px 0px;
}
header {
width: 100%;
height: 100px;
background-color: silver;
text-align: center;
}
#main {
background-color: silver;
width: 100%;
margin: auto;
}
body {
padding: 10px;
}
#img-div {
width: 60%;
margin: auto;
display: flex;
justify-content: center;
height: 400px;
background-color: white;
flex-direction: column;
text-align: center
}
#tribute-info {
width: 100%;
height: 300px;
background-color: white;
}
body {
font-family: "Roboto";
font-size: 15px;
padding: 20px;
}
.collapse-list {
margin-bottom: 0;
padding-left: 0;
list-style: none;
border-bottom: 1px solid #e0e0e0;
}
.collapse-open {
display: none;
}
.collapse-panel {
visibility: hidden;
max-height: 0;
opacity: 0;
transition: max-height .1s, visibility .3s, opacity .3s;
}
.collapse-open:checked~.collapse-panel {
max-height: 100%;
opacity: 100;
visibility: visible
}
.collapse-list li {
margin-bottom: 0;
}
.collapse-list .collapse-btn {
border-top: 1px solid #e0e0e0;
cursor: pointer;
display: block;
padding: 15px 10px;
margin-bottom: 0;
color: #4285f4;
font-weight: normal;
transition: background-color .2s ease;
}
.collapse-list .collapse-btn:hover {
background: #eee;
}
.collapse-open~.collapse-btn:before {
content: "↓";
float: right;
}
.collapse-open:checked~.collapse-btn:before {
content: "↑";
}
.collapse-list .collapse-inner {
padding: 10px
}
<header>
<h1>Remembering Dr. Stella Ameyo Adadevoh</h1>
<h4>The Woman Who Saved Nigeria From Ebola</h4>
</header>
<main id="main">
<div id="img-div">
<img id="image" src="./resources/images/adadevoh.jpg" alt="an image of the late Dr Adadevoh">
<h5>Dr. Stella Ameyo Adadevoh</h5>
</div>
</main>
<section>
<div class="collapse-list" id="tribute-info">
<input class="collapse-open" type="checkbox" id="collapse-1">
<label class="collapse-btn" for="collapse-1">Early Life And Family</label>
<div class="collapse-panel">
<div class="collapse-inner">
<p>Ameyo Adadevoh was born in Lagos, Nigeria in October 1956. She spent the majority of her life in Lagos, Nigeria. Her father and great-grandfather, s</p>
</div>
</div>
<input class="collapse-open" type="checkbox" id="collapse-2">
<label class="collapse-btn" for="collapse-2">Education</label>
<div class="collapse-panel">
<div class="collapse-inner">
<p>She went to preschool at the Mainland Preparatory Primary School in Yaba, Lagos (1961-1962). </p>
</div>
</div>
<input class="collapse-open" type="checkbox" id="collapse-3">
<label class="collapse-btn" for="collapse-3">Medical Education And Career</label>
<div class="collapse-panel">
<div class="collapse-inner">
<p>Dr. Adadevoh graduated from the University of Lagos, </p>
</div>
</div>
</div>
</section>
This is the culprit clause: .collapse-open:checked ~ .collapse-panel - all successor sibling elements of class collapse-panel open when a checkbox is checked.
The remedy is a move to the adjacent sibling selector + modifying the selector that opens the panel on the way:
/* old */ .collapse-open:checked ~ .collapse-panel
/* new */ .collapse-open:checked + label + .collapse-panel
The selectors controlling the display of the arrow have been altered to use the adjacent sibling selector as well.
body {
margin: 0px 0px 0px 0px;
}
header {
width: 100%;
height: 100px;
background-color: silver;
text-align: center;
}
#main {
background-color: silver;
width: 100%;
margin: auto;
}
body {
padding: 10px;
}
#img-div {
width: 60%;
margin: auto;
display: flex;
justify-content: center;
height: 400px;
background-color: white;
flex-direction: column;
text-align: center
}
#tribute-info {
width: 100%;
height: 300px;
background-color: white;
}
body {
font-family: "Roboto";
font-size: 15px;
padding: 20px;
}
.collapse-list {
margin-bottom: 0;
padding-left: 0;
list-style: none;
border-bottom: 1px solid #e0e0e0;
}
.collapse-open {
display: none;
}
.collapse-panel {
visibility: hidden;
max-height: 0;
opacity: 0;
transition: max-height .1s,
visibility .3s,
opacity .3s;
}
.collapse-open:checked + label + .collapse-panel {
max-height: 100%;
opacity: 100;
visibility: visible
}
.collapse-list li {
margin-bottom: 0;
}
.collapse-list .collapse-btn {
border-top: 1px solid #e0e0e0;
cursor: pointer;
display: block;
padding: 15px 10px;
margin-bottom: 0;
color: #4285f4;
font-weight: normal;
transition: background-color .2s ease;
}
.collapse-list .collapse-btn:hover {
background: #eee;
}
.collapse-open + .collapse-btn:before {
content: "↓";
float: right;
}
.collapse-open:checked + .collapse-btn:before {
content: "↑";
}
.collapse-list .collapse-inner {
padding: 10px
}
<html>
<body>
<header>
<h1>Remembering Dr. Stella Ameyo Adadevoh</h1>
<h4>The Woman Who Saved Nigeria From Ebola</h4>
</header>
<main id ="main">
<div id="img-div">
<img id ="image" src="./resources/images/adadevoh.jpg" alt="an image of the late Dr Adadevoh">
<h5>Dr. Stella Ameyo Adadevoh</h5>
</div>
</main>
<section>
<div class="collapse-list" id="tribute-info">
<input class="collapse-open" type="checkbox" id="collapse-1">
<label class="collapse-btn" for="collapse-1">Early Life And Family</label>
<div class="collapse-panel">
<div class="collapse-inner">
<p>Ameyo Adadevoh was born in Lagos, Nigeria in October 1956. She spent the majority of her life in Lagos, Nigeria. Her father and great-grandfather, s</p>
</div>
</div>
<input class="collapse-open" type="checkbox" id="collapse-2">
<label class="collapse-btn" for="collapse-2">Education</label>
<div class="collapse-panel">
<div class="collapse-inner">
<p>She went to preschool at the Mainland Preparatory Primary School in Yaba, Lagos (1961-1962). </p>
</div>
</div>
<input class="collapse-open" type="checkbox" id="collapse-3">
<label class="collapse-btn" for="collapse-3">Medical Education And Career</label>
<div class="collapse-panel">
<div class="collapse-inner">
<p>Dr. Adadevoh graduated from the University of Lagos, </p>
</div>
</div>
</div>
</section>
</body>
</html>
I want to create a homepage with 5 card elements.
I want to have 4 items surrounding the 5th element that is centered.
This is a picture of what I'm trying to do. https://imgur.com/a/3jvHicq
I have tried searching but I haven't found an example that talks about breaking the "wrap" text on the next row as it shows in the picture. I just don't know what else to search for.
I tried absolute position but that was NOT what I needed. I tried changing left: 100px and such to align the items but they wouldn't even move without the absolute position (I don't understand why). I tried using floats but it just created a mess.
.hp-container {
background: rgb(139, 174, 250);
flex: flex;
justify-content: center
}
/* Left Side */
.home-card-1 {
margin: 10px;
background: gray;
border-radius: 5px;
border: solid;
border-color: green;
Color: white;
text-align: center;
width: 500px;
height: 380px;
}
.home-card-4 {
margin: 10px;
background: rgb(93, 130, 207);
border-radius: 5px;
border: solid;
border-color: green;
Color: white;
text-align: center;
width: 500px;
height: 380px;
}
/* Right Side */
.home-card-3 {
margin: 10px;
background: rgb(231, 126, 126);
border-radius: 5px;
border: solid;
border-color: rgb(25, 0, 255);
Color: white;
text-align: center;
width: 500px;
height: 380px;
}
.home-card-5 {
margin: 10px 10px 10px 550px;
background: rgb(87, 0, 29);
border-radius: 5px;
border: solid;
border-color: green;
Color: white;
text-align: center;
width: 500px;
height: 380px;
}
/* Middle */
.home-card-2 {
margin: 10px;
background: rgb(122, 177, 165);
border-radius: 5px;
border: solid;
border-color: rgb(37, 0, 0);
Color: white;
text-justify: justify;
text-align: center;
width: 500px;
height: 600px;
}
<div class="hp-container d-flex flex-wrap animated fadeIn">
<div class="home-card-1">
<div>
<h2>Explainer Video</h2>
</div>
</div>
<div class="home-card-2">
<div>
<h2>Game Hub Center</h2>
</div>
</div>
<div class="home-card-3">
<div>
<h2>Twitter Feed</h2>
</div>
</div>
<div class="home-card-4">
<div>
<h2>Giveaway</h2>
</div>
</div>
<div class="home-card-5">
<div>
<h2>Gofundme</h2>
</div>
</div>
</div>
You can use css grid system. This example shows the basics but you can modify it and make it work as required
.hp-container {
background: rgb(139, 174, 250);
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}
[class^='home-card-'] {
background: grey;
color: white;
text-align: center;
}
.home-card-2 {
margin: 10px 0;
}
<div class="hp-container d-flex flex-wrap animated fadeIn">
<div class='col-1'>
<div class="home-card-1">
<div>
<h2>Explainer Video</h2>
</div>
</div>
<div class="home-card-4">
<div>
<h2>Giveaway</h2>
</div>
</div>
</div>
<div class="home-card-2">
<div>
<h2>Game Hub Center</h2>
</div>
</div>
<div class='col-3'>
<div class="home-card-3">
<div>
<h2>Twitter Feed</h2>
</div>
</div>
<div class="home-card-5">
<div>
<h2>Gofundme</h2>
</div>
</div>
</div>
</div>
If you are using flex, then you need to modify your html structure a little bit. CSS flex works in 1-d only (for 2-d you should use css grid). Still, if you want to use flex, you need to modify the html structure in such a manner that there are 3 columns with left containing 2 divs, mid containing 1 div and right containing 2 divs:
.hp-container {
background: rgb(139, 174, 250);
display: flex;
justify-content: center;
flex-direction: row;
}
/* Left Side */
.home-card-1 {
margin: 10px;
background: gray;
border-radius: 5px;
border: solid;
border-color: green;
color: white;
text-align: center;
width: 500px;
height: 380px;
}
.home-card-4 {
margin: 10px;
background: rgb(93, 130, 207);
border-radius: 5px;
border: solid;
border-color: green;
color: white;
text-align: center;
width: 500px;
height: 380px;
}
/* Right Side */
.home-card-3 {
margin: 10px;
background: rgb(231, 126, 126);
border-radius: 5px;
border: solid;
border-color: rgb(25, 0, 255);
color: white;
text-align: center;
width: 500px;
height: 380px;
}
.home-card-5 {
margin: 10px;
background: rgb(87, 0, 29);
border-radius: 5px;
border: solid;
border-color: green;
color: white;
text-align: center;
width: 500px;
height: 380px;
}
/* Middle */
.home-card-2 {
margin: 10px;
background: rgb(122, 177, 165);
border-radius: 5px;
border: solid;
border-color: rgb(37, 0, 0);
color: white;
text-justify: justify;
text-align: center;
width: 500px;
height: 600px;
}
<div class="hp-container d-flex flex-wrap animated fadeIn">
<div class="left-wrap">
<div class="home-card-1">
<div>
<h2>Explainer Video</h2>
</div>
</div>
<div class="home-card-4">
<div>
<h2>Giveaway</h2>
</div>
</div>
</div>
<div class="mid-wrap">
<div class="home-card-2">
<div>
<h2>Game Hub Center</h2>
</div>
</div>
</div>
<div class="right-wrap">
<div class="home-card-3">
<div>
<h2>Twitter Feed</h2>
</div>
</div>
<div class="home-card-5">
<div>
<h2>Gofundme</h2>
</div>
</div>
</div>
</div>
for css grid, #brk as given a good answer.
Hope it helps. Revert for any doubts.
You can use flex like this:
.hp-container{
display: flex;
flex-direction: row;
}
.card{
color: red;
width: 150px;
height: 200px;
background: yellow;
margin: 10px;
text-align: center;
padding: 5px;
}
.home-card-3{
height: 420px;
}
<div class="hp-container">
<div class="col1">
<div class="card home-card-1">
<div>
<h2>Explainer Video</h2>
</div>
</div>
<div class="card home-card-2">
<div>
<h2>Giveaway</h2>
</div>
</div>
</div>
<div class="col2">
<div class="card home-card-3">
<div>
<h2>Game Hub Center</h2>
</div>
</div>
</div>
<div class="col3">
<div class="card home-card-4">
<div>
<h2>Twitter Feed</h2>
</div>
</div>
<div class="card home-card-5">
<div>
<h2>Gofundme</h2>
</div>
</div>
</div>
</div>