HTML: Show/Hide different divs with same function but not simultaneously

HTML: Show/Hide different divs with same function but not simultaneously - javascript

I have a problem with my structure, I want to have different divs, each one of those with a header and a body, which is hidden by defect. There's a button in each div's header to show each div's body if it's button is clicked. If you press the same button again, the body hides again. I want to do it with the same function because I will generate more and more of this divs, that's why I can't be copying the same function again and again. Is there any way to do that? There is my code:
function OpenHideFlexColumn() {
var x = document.getElementById("Body");
if (x.style.display === "flex") {
x.style.display = "none";
} else {
x.style.display = "flex";
}
}
body {
background-color: lightblue;
}
a {
outline: 0;
text-decoration: none;
}
.area {
width: 100%;
display: flex;
flex-direction: column;
}
.module {
height: auto;
width: auto;
margin: 11px;
padding: 11px;
display: flex;
flex-direction: column;
background-color: white;
}
.header {
height: auto;
width: 100%;
display: inline-flex;
font-size: 24px;
}
.options {
height: auto;
width: auto;
margin-left: auto;
margin-right: 0;
display: inline-flex;
}
.button {
height: 20px;
width: auto;
padding: 5px;
background-color: lightgrey;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 8px;
}
.body {
height: auto;
width: auto;
display: none;
flex-direction: column;
}
<div id="infocontent-1" class="area">
<!--MODULE-->
<div class="module">
<div class="header">
<b>Title</b>
<div class="options">
<!-- Other function button-->
<a class="button">
..
</a>
<!--Hide/Show button-->
<a class="button" onclick="OpenHideFlexColumn();">
<b>Push me to Open/Hide</b>
</a>
</div>
</div>
<div class="body" id="Body">
Body text.....
</div>
</div>
<!--MODULE 2-->
<div class="module">
<div class="header">
<b>Title</b>
<div class="options">
<!-- Other function button-->
<a class="button">
..
</a>
<!--Hide/Show button-->
<a class="button" onclick="OpenHideFlexColumn();">
<b>Push me to Open/Hide</b>
</a>
</div>
</div>
<div class="body" id="Body">
Body text.....
</div>
</div>
</div>

Use this inside function and parentNode
<!DOCTYPE html>
<html lang="es">
<head>
<style>
body{
background-color: lightblue;
}
a {
outline: 0;
text-decoration: none;
}
.area{
width: 100%;
display: flex;
flex-direction: column;
}
.module{
height: auto;
width: auto;
margin: 11px;
padding: 11px;
display: flex;
flex-direction: column;
background-color: white;
}
.header{
height: auto;
width: 100%;
display: inline-flex;
font-size: 24px;
}
.options{
height: auto;
width: auto;
margin-left: auto;
margin-right: 0;
display: inline-flex;
}
.button{
height: 20px;
width: auto;
padding: 5px;
background-color: lightgrey;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 8px;
}
.body{
height: auto;
width: auto;
display: none;
flex-direction: column;
}
</style>
</head>
<body>
<div id="infocontent-1" class="area">
<!--MODULE-->
<div class="module">
<div class="header">
<b>Title</b>
<div class="options">
<!-- Other function button-->
<a class="button">
..
</a>
<!--Hide/Show button-->
<a class="button" onclick="OpenHideFlexColumn(this);">
<b>Push me to Open/Hide</b>
</a>
</div>
</div>
<div class="body" id="Body">
Body text.....
</div>
</div>
<!--MODULE 2-->
<div class="module">
<div class="header">
<b>Title</b>
<div class="options">
<!-- Other function button-->
<a class="button">
..
</a>
<!--Hide/Show button-->
<a class="button" onclick="OpenHideFlexColumn(this);">
<b>Push me to Open/Hide</b>
</a>
</div>
</div>
<div class="body" id="Body">
Body text.....
</div>
</div>
</div>
<script>
function OpenHideFlexColumn(e) {
var x = e.parentNode.parentNode.parentNode.querySelector('.body');
if (x.style.display === "flex") {
x.style.display = "none";
} else {
x.style.display = "flex";
}
}
</script>
</body>
</html>

Anytime you have an onclick you automatically have access to the event. if we look at event.target.parentNode we get the element needed.
function OpenHideFlexColumn() {
var e = event.target.parentNode
var x = e.parentNode.parentNode.parentNode.querySelector('.body');
if (x.style.display === "flex") {
x.style.display = "none";
} else {
x.style.display = "flex";
}
}
body{
background-color: lightblue;
}
a {
outline: 0;
text-decoration: none;
}
.area{
width: 100%;
display: flex;
flex-direction: column;
}
.module{
height: auto;
width: auto;
margin: 11px;
padding: 11px;
display: flex;
flex-direction: column;
background-color: white;
}
.header{
height: auto;
width: 100%;
display: inline-flex;
font-size: 24px;
}
.options{
height: auto;
width: auto;
margin-left: auto;
margin-right: 0;
display: inline-flex;
}
.button{
height: 20px;
width: auto;
padding: 5px;
background-color: lightgrey;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 8px;
}
.body{
height: auto;
width: auto;
display: none;
flex-direction: column;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="infocontent-1" class="area">
<!--MODULE-->
<div class="module">
<div class="header">
<b>Title</b>
<div class="options">
<!-- Other function button-->
<a class="button">
..
</a>
<!--Hide/Show button-->
<a class="button" onclick="OpenHideFlexColumn();">
<b>Push me to Open/Hide</b>
</a>
</div>
</div>
<div class="body" id="Body">
Body text.....
</div>
</div>
<!--MODULE 2-->
<div class="module">
<div class="header">
<b>Title</b>
<div class="options">
<!-- Other function button-->
<a class="button">
..
</a>
<!--Hide/Show button-->
<a class="button" onclick="OpenHideFlexColumn(this);">
<b>Push me to Open/Hide</b>
</a>
</div>
</div>
<div class="body" id="Body">
Body text.....
</div>
</div>
</div>
</body>
</html>

Related

Wrapping text (numbers) to expand a div

I am currently learning HTML, CSS and JS, for my first project I am working on making a basic calculator using these languages and so far I have almost completed the UI of the calculator. It looks like this so far:
Image of calculator display (sorry I still cant posts pictures directly with questions)
My question is: that say the user inputs a large number, I want the display to expand and have the number split across 2 lines, but no matter what I have tried I can't seem to get it working. (I have tried: word-wrap: breakword, word-break: break-all, overflow-wrap: break-word etc.)
What the display looks like when a large number is hardcoded to appear
How I want large numbers to appear on the display (a screenshot from someone else's calculator)
Can anyone help me figure this out.
My code:
* {
padding: 0;
margin: 0;
}
#font-face {
font-family: "calcFont";
src: url(./Calculator.ttf);
}
.main-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.body {
display: flex;
flex-direction: column;
gap: 30px;
background-color: #ccc5be;
min-height: 40vh;
width: 20%;
border-radius: 20px;
padding: 30px 40px;
min-width: 300px;
}
.display {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #ebe6e1;
height: 100px;
border-radius: 20px;
padding: 0 15px;
word-wrap: break-word;
}
.buttons-container {
width: 100%;
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: stretch;
gap: 10px;
}
.row {
width: 100%;
display: flex;
flex-direction: row;
gap: 10px;
}
.button {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
border-radius: 5px;
text-align: center;
font-family: Helvetica;
color: white;
transition: all 0.2s ease-in-out;
flex-grow: 1;
}
.number {
/* background-color: #00b3ff; */
background-image: linear-gradient(to bottom left, #7ad7ff, #00b3ff);
}
.action {
background-color: #d16f24;
}
.operation {
background-color: black;
}
.button:hover {
/* background-color: white; */
background-image: linear-gradient(to bottom left, white, rgb(231, 231, 231));
}
.button.number:hover {
color: #00b3ff;
}
.button.operation:hover {
color: black;
}
.button.action:hover {
color: #d16f24;
}
.display-text {
/* white-space: normal; */
font-family: "calcFont", Helvetica;
font-size: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>MY CALC</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="calc.css" />
</head>
<body>
<div class="main-wrapper">
<div class="body">
<div class="display">
<h2 class="display-text">7,000000000145,236,450</h2>
</div>
<div class="buttons-container">
<div class="row">
<div class="button number">7</div>
<div class="button number">8</div>
<div class="button number">9</div>
<div class="button action">DEL</div>
<div class="button action">AC</div>
</div>
<div class="row">
<div class="button number">4</div>
<div class="button number">5</div>
<div class="button number">6</div>
<div class="button operation">X</div>
<div class="button operation">÷</div>
</div>
<div class="row">
<div class="button number">1</div>
<div class="button number">2</div>
<div class="button number">3</div>
<div class="button operation">+</div>
<div class="button operation">-</div>
</div>
<div class="row">
<div class="button number">0</div>
<div class="button number">.</div>
<div class="button action">=</div>
</div>
</div>
</div>
</div>
</body>
</html>
I haven't actually added any JS yet because I'm just trying to make sure the UI is good first then I'll move on to it.
Any help would be much appreciated. Thanks!

You can try word-break: break-all; this break the numbers into a separate when overflowed
* {
padding: 0;
margin: 0;
}
#font-face {
font-family: "calcFont";
src: url(./Calculator.ttf);
}
.main-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.body {
display: flex;
flex-direction: column;
gap: 30px;
background-color: #ccc5be;
min-height: 40vh;
width: 20%;
border-radius: 20px;
padding: 30px 40px;
min-width: 300px;
}
.display {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #ebe6e1;
height: 100px;
border-radius: 20px;
padding: 0 15px;
word-wrap: break-word;
}
.buttons-container {
width: 100%;
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: stretch;
gap: 10px;
}
.row {
width: 100%;
display: flex;
flex-direction: row;
gap: 10px;
}
.button {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
border-radius: 5px;
text-align: center;
font-family: Helvetica;
color: white;
transition: all 0.2s ease-in-out;
flex-grow: 1;
}
.number {
/* background-color: #00b3ff; */
background-image: linear-gradient(to bottom left, #7ad7ff, #00b3ff);
}
.action {
background-color: #d16f24;
}
.operation {
background-color: black;
}
.button:hover {
/* background-color: white; */
background-image: linear-gradient(to bottom left, white, rgb(231, 231, 231));
}
.button.number:hover {
color: #00b3ff;
}
.button.operation:hover {
color: black;
}
.button.action:hover {
color: #d16f24;
}
.display-text {
/* white-space: normal; */
font-family: "calcFont", Helvetica;
font-size: 40px;
word-break: break-all;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>MY CALC</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="calc.css" />
</head>
<body>
<div class="main-wrapper">
<div class="body">
<div class="display">
<h2 class="display-text">7,000000000145,236,450</h2>
</div>
<div class="buttons-container">
<div class="row">
<div class="button number">7</div>
<div class="button number">8</div>
<div class="button number">9</div>
<div class="button action">DEL</div>
<div class="button action">AC</div>
</div>
<div class="row">
<div class="button number">4</div>
<div class="button number">5</div>
<div class="button number">6</div>
<div class="button operation">X</div>
<div class="button operation">÷</div>
</div>
<div class="row">
<div class="button number">1</div>
<div class="button number">2</div>
<div class="button number">3</div>
<div class="button operation">+</div>
<div class="button operation">-</div>
</div>
<div class="row">
<div class="button number">0</div>
<div class="button number">.</div>
<div class="button action">=</div>
</div>
</div>
</div>
</div>
</body>
</html>

You can use word-wrap: anywhere; to achieve this effect.
* {
padding: 0;
margin: 0;
}
#font-face {
font-family: "calcFont";
src: url(./Calculator.ttf);
}
.main-wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.body {
display: flex;
flex-direction: column;
gap: 30px;
background-color: #ccc5be;
min-height: 40vh;
width: 20%;
border-radius: 20px;
padding: 30px 40px;
min-width: 300px;
}
.display {
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #ebe6e1;
height: 100px;
border-radius: 20px;
padding: 0 15px;
word-wrap: break-word;
}
.buttons-container {
width: 100%;
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: stretch;
gap: 10px;
}
.row {
width: 100%;
display: flex;
flex-direction: row;
gap: 10px;
}
.button {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 50px;
border-radius: 5px;
text-align: center;
font-family: Helvetica;
color: white;
transition: all 0.2s ease-in-out;
flex-grow: 1;
}
.number {
/* background-color: #00b3ff; */
background-image: linear-gradient(to bottom left, #7ad7ff, #00b3ff);
}
.action {
background-color: #d16f24;
}
.operation {
background-color: black;
}
.button:hover {
/* background-color: white; */
background-image: linear-gradient(to bottom left, white, rgb(231, 231, 231));
}
.button.number:hover {
color: #00b3ff;
}
.button.operation:hover {
color: black;
}
.button.action:hover {
color: #d16f24;
}
.display-text {
font-family: "calcFont", Helvetica;
font-size: 40px;
word-wrap: anywhere;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>MY CALC</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="calc.css" />
</head>
<body>
<div class="main-wrapper">
<div class="body">
<div class="display">
<h2 class="display-text">7,000000000145,236,450</h2>
</div>
<div class="buttons-container">
<div class="row">
<div class="button number">7</div>
<div class="button number">8</div>
<div class="button number">9</div>
<div class="button action">DEL</div>
<div class="button action">AC</div>
</div>
<div class="row">
<div class="button number">4</div>
<div class="button number">5</div>
<div class="button number">6</div>
<div class="button operation">X</div>
<div class="button operation">÷</div>
</div>
<div class="row">
<div class="button number">1</div>
<div class="button number">2</div>
<div class="button number">3</div>
<div class="button operation">+</div>
<div class="button operation">-</div>
</div>
<div class="row">
<div class="button number">0</div>
<div class="button number">.</div>
<div class="button action">=</div>
</div>
</div>
</div>
</div>
</body>
</html>

(JavaScript) removeAttribute didn't remove the Attribute

I currently make a tab which the tab content is containing iframe. I want it to every time the tab is clicked, the iframe reload the page.
But when I inspected, the source attributes exist in every iframe, and the issues shows up that states: Uncaught TypeError: Cannot read properties of undefined (reading 'setAttribute'). I'm very new in JavaScript, and have no idea to code. Please help me through this. Thank you so much.
So, here's the code :
let tabs = document.querySelectorAll('.tab');
let content = document.querySelectorAll('.content-item');
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', () => tabClick(i));
}
function tabClick(currentTab) {
removeActive();
tabs[currentTab].classList.add('active');
content[currentTab].classList.add('active');
content[currentTab].removeAttribute('src');
}
function removeActive() {
for (let i = 0; i < tabs.length; i++) {
tabs[i].classList.remove('active');
content[i].classList.remove('active');
content[i].setAttribute('src', content[i].getAttribute('data-src'));
}
}
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tabs {
display: flex;
justify-content: center;
width: 100%;
}
.tab {
font-size: 16px;
padding: 5px 15px;
cursor: pointer;
}
.tab.active {
background-color: rgb(250, 97, 9);
}
.content {
width: 100vw;
margin-top: 50px;
}
.content-item {
display: none;
padding: 0px;
border: none;
}
.content-item.active {
display: flex;
justify-content: center;
}
.content-iframe {
border: none;
padding: 0px;
margin: 0px;
width: 100vw;
height: 50vh;
}
<div class="container">
<div class="tabs">
<div class="tab active">Tokyo</div>
<div class="tab">Paris</div>
<div class="tab">Washington</div>
<div class="tab">Jakarta</div>
<div class="tab">London</div>
</div>
<div class="content">
<div class="content-item active">
<iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Tokyo" src="https://en.wikipedia.org/wiki/Tokyo" loading="lazy"></iframe>
</div>
<div class="content-item">
<iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Paris" src="https://en.wikipedia.org/wiki/Paris" loading="lazy"></iframe>
</div>
<div class="content-item">
<iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Washington" src="https://en.wikipedia.org/wiki/Washington" loading="lazy"></iframe>
</div>
<div class="content-item">
<iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Jakarta" src="https://en.wikipedia.org/wiki/Jakarta" loading="lazy"></iframe>
</div>
<div class="content-item">
<iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/London" src="https://en.wikipedia.org/wiki/London" loading="lazy"></iframe>
</div>
</div>
</div>

First, I think you were doing the two iframe operations in the wrong place. I've reversed them so the iframe is cleared in removeActive(). Then, you weren't targeting the iframes with your source updates.
Otherwise you're doing great. Keep it up!
let tabs = document.querySelectorAll('.tab');
let content = document.querySelectorAll('.content-item');
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', () => tabClick(i));
}
function tabClick(currentTab) {
const iframe = content[currentTab].querySelector('iframe');
removeActive();
tabs[currentTab].classList.add('active');
content[currentTab].classList.add('active');
iframe.setAttribute('src', iframe.getAttribute('data-src'));
}
function removeActive() {
for (let i = 0; i < tabs.length; i++) {
tabs[i].classList.remove('active');
content[i].classList.remove('active');
content[i].querySelector('iframe').removeAttribute('src');
}
}
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tabs {
display: flex;
justify-content: center;
width: 100%;
}
.tab {
font-size: 16px;
padding: 5px 15px;
cursor: pointer;
}
.tab.active {
background-color: rgb(250, 97, 9);
}
.content {
width: 100vw;
margin-top: 50px;
}
.content-item {
display: none;
padding: 0px;
border: none;
}
.content-item.active {
display: flex;
justify-content: center;
}
.content-iframe {
border: none;
padding: 0px;
margin: 0px;
width: 100vw;
height: 50vh;
}
<div class="container">
<div class="tabs">
<div class="tab active">Tokyo</div>
<div class="tab">Paris</div>
<div class="tab">Washington</div>
<div class="tab">Jakarta</div>
<div class="tab">London</div>
</div>
<div class="content">
<div class="content-item active">
<iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Tokyo" src="https://en.wikipedia.org/wiki/Tokyo" loading="lazy"></iframe>
</div>
<div class="content-item">
<iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Paris" src="https://en.wikipedia.org/wiki/Paris" loading="lazy"></iframe>
</div>
<div class="content-item">
<iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Washington" src="https://en.wikipedia.org/wiki/Washington" loading="lazy"></iframe>
</div>
<div class="content-item">
<iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Jakarta" src="https://en.wikipedia.org/wiki/Jakarta" loading="lazy"></iframe>
</div>
<div class="content-item">
<iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/London" src="https://en.wikipedia.org/wiki/London" loading="lazy"></iframe>
</div>
</div>
</div>

Problem when using display none with divs and footer

Ok, let's say that I have two buttons, a container with two divs and below I have my footer, like this:
<button id="bt1">Show all</button>
<button id="bt2">Show curses</button>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
<footer></footer>
I'm displaying content inside my divs. Div "one" has more height, much more. In order to hide div "two" and don't overlap content, I use opacity:0.
I have two buttons, to show or to hide div "one" or "two" (using jQuery).
But if I only use opacity:0 to hide div "one" when I show div "two", the page leaves a big space empty (due to div "one" has more height than div "two"). As here:
enter image description here
So I decided to use display:none to hide div "one", in order to don't leave space and just show the necessary space for div "two". But my footer goes up!! And overlaps content with div "two".
Here is the image: enter image description here
How can I solve this? Any ideas? I realized that my footer moves because not finding the content of div "one", it goes up. Sorry for my english haha
Here I leave you guys an excelent example of what happens to me, you can COPY and run:
HTML:
var cont_all = $('.one');
var bt1 = $('#bt1');
var cont_curses = $('.two');
var bt2 = $('#bt2');
bt2.click(function(){
cont_all.css('display', 'none');
cont_curses.css('opacity', '1');
});
bt1.click(function(){
cont_curses.css('opacity', '0');
cont_all.css('display', 'flex');
});
h2 {
text-align: center;
font-size: 40px;
}
.container {
margin-top: 50px;
position: relative;
height: auto;
padding-bottom: 50px;
}
.one, .two {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
height: auto;
}
.one {
overflow: hidden;
}
.two {
width: 100%;
position: absolute;
top: 0px;
opacity: 0;
}
.chart {
width: 30%;
height: 200px;
margin: 15px;
background: #2096CE;
}
.curse {
width: 30%;
height: 200px;
margin: 15px;
background: #23AD5A;
}
footer {
height: 200px;
background: black;
color: white;
display: flex;
justify-content: center;
text-align: center;
}
p {
text-align: center;
font-size: 35px;
margin: auto 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<h2>Problem with divs</h2>
</header>
<button id="bt1">Show all</button>
<button id="bt2">Show curses</button>
<div class="container">
<div class="one">
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
</div>
<div class="two">
<div class="curse"></div>
<div class="curse"></div>
<div class="curse"></div>
<div class="curse"></div>
</div>
</div>
<footer>
<p>I'm the footer</p>
</footer>
Well it's not the same at all, because it's a big project, but basically is that.

Full answer
check the max-height toggles
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display None</title>
<link rel="stylesheet" href="estilos.css">
<style>
h2 {
text-align: center;
font-size: 40px;
}
.container {
margin-top: 50px;
position: relative;
height: auto;
padding-bottom: 50px;
}
.one, .two {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
height: auto;
overflow: hidden;
}
.chart {
width: 30%;
height: 200px;
margin: 15px;
background: #2096CE;
}
.curse {
width: 30%;
height: 200px;
margin: 15px;
background: #23AD5A;
}
footer {
height: 200px;
background: black;
color: white;
display: flex;
justify-content: center;
text-align: center;
}
p {
text-align: center;
font-size: 35px;
margin: auto 0;
}
</style>
</head>
<body>
<header>
<h2>Problem with divs</h2>
</header>
<button id="bt1">Show all</button>
<button id="bt2">Show curses</button>
<div class="container">
<div class="one">
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
</div>
<div class="two">
<div class="curse"></div>
<div class="curse"></div>
<div class="curse"></div>
<div class="curse"></div>
</div>
</div>
<footer>
<p>I'm the footer</p>
</footer>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var cont_all = $('.one');
var bt1 = $('#bt1');
var cont_curses = $('.two');
var bt2 = $('#bt2');
bt2.click(function(){
cont_all.css('max-height', '0px');
cont_curses.css('max-height', '100%');
});
bt1.click(function(){
cont_curses.css('max-height', '0px');
cont_all.css('max-height', '100%');
});
</script>
</body>
</html>

I am slightly changed #alexkarpen answer. Instead of max-height you can also use fadeIn() and fadeOut() jquery function. it looks a little bit cool
var cont_all = $('.one');
var bt1 = $('#bt1');
var cont_curses = $('.two');
var bt2 = $('#bt2');
var cont_project = $('.three');
var bt3 = $('#bt3');
bt2.click(function(){
cont_all.fadeOut("slow");
cont_project.fadeOut();
cont_curses.fadeIn("slow");
});
bt3.click(function(){
cont_all.fadeOut();
cont_curses.fadeOut();
cont_project.fadeIn("slow");
});
bt1.click(function(){
cont_curses.fadeIn("slow");
cont_project.fadeIn("slow");
cont_all.fadeIn("slow");
});
.container {
margin-top: 30px;
position: relative;
height: auto;
padding-bottom: 50px;
}
.one, .two, .three {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
height: auto;
overflow: hidden;
}
.card {
width: 25%;
height: 200px;
margin: 15px;
}
.chart {
background: #2096CE;
}
.curse {
background: #23AD5A;
}
.project {
background: pink;
}
footer {
height: 200px;
background: black;
color: white;
display: flex;
justify-content: center;
text-align: center;
}
p {
text-align: center;
font-size: 35px;
margin: auto 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="bt1">Show All</button>
<button id="bt2">Show Curses</button>
<button id="bt3">Show Projects</button>
<div class="container">
<div class="one">
<div class="card chart"></div>
<div class="card chart"></div>
<div class="card chart"></div>
<div class="card chart"></div>
<div class="card chart"></div>
<div class="card chart"></div>
</div>
<div class="two">
<div class="card curse"></div>
<div class="card curse"></div>
<div class="card curse"></div>
</div>
<div class="three">
<div class="card project"></div>
<div class="card project"></div>
</div>
</div>
<footer>
<p>I'm the footer</p>
</footer>

Try this:
footer { height: 200px; background: black; color: white; display: flex; justify-content: center; text-align: center; position:fixed; bottom: 0px; }

Margin auto doesn't work even if I have width and height defined

I want to make the hero title even with the navbar. However, I ran into some responsive issues. Right now I'm doing frontend mentor challenges and they advised that the max width for desktop should be 1440px. Here's where I'm not sure how to do it correctly.
I need the hero title and the logo be in one line.
I want to apply margin auto to navbar but that doesn't seem to work at all.
Any idea how to fix this? My idea is to set the width of the container and navbar both to 1440px= 90em but not sure if that's a right way.
header {
position: absolute;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 90em;
width: 100%;
padding: 2em;
min-height: 8vh;
top: 0;
left: 0;
margin: 0 auto;
}
header img {
width: 10em;
height: 2em;
}
header ul {
list-style: none;
}
header ul a {
text-decoration: none;
}
header ul a li {
display: inline-block;
padding: 2em;
color: white;
}
header ul a li:hover {
color: #000;
}
header .burger {
display: none;
}
#media only screen and (max-width: 996px) {
header {
padding: 2.5em;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
header ul {
display: none;
}
header .burger {
display: block;
}
header .burger img {
width: 3em;
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: Alata;
}
.container {
min-height: 100vh;
width: 100%;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: -ms-grid;
display: grid;
place-items: center;
background-image: url("../images/desktop/image-hero.jpg");
-webkit-box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
}
.container__intro {
max-width: 90em;
padding: 2em;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.container__intro__desc {
padding: 2em 5em 2em 2em;
border: 1px solid white;
}
.container__intro__desc p {
color: white;
font-size: 4rem;
font-family: Josefin Sans;
}
img {
width: 100%;
height: auto;
}
/*# sourceMappingURL=main.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing page</title>
<link rel="stylesheet" href="/css/main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<header>
<a href="">
<img src="images/logo.svg" alt="logo">
</a>
<nav>
<ul>
<a href="">
<li>About</li>
</a>
<a href="">
<li>Careers</li>
</a>
<a href="">
<li>Events</li>
</a>
<a href="">
<li>Products</li>
</a>
<a href="">
<li>Support</li>
</a>
</ul>
<div class="burger">
<img src="images/icon-hamburger.svg" alt="">
</div>
</nav>
</header>
<div class="container">
<div class="container__intro">
<div class="container__intro__desc">
<p>
Immersive
</p>
<p>
Experiences
</p>
<p>
That Deliver
</p>
</div>
</div>
</div>
<div class="container">
<div class="img-container">
</div>
<div class="__desc">
</div>
</div>
<div class="container">
<div class="__top">
<p>Our Creations</p>
See All
</div>
<div class="__grid">
<div class="item">
<img src="" alt="">
<p>Deep</p>
<p>Earth</p>
</div>
<div class="item">
<img src="" alt="">
<p>Night</p>
<p>Arcade</p>
</div>
<div class="item">
<img src="" alt="">
<p>Soccer</p>
<p>Team VR</p>
</div>
<div class="item">
<img src="" alt="">
<p>The</p>
<p>Grid</p>
</div>
<div class="item">
<img src="" alt="">
<p>From Up</p>
<p>Above VR</p>
</div>
<div class="item">
<img src="" alt="">
<p>Pocket </p>
<p>Borealis</p>
</div>
<div class="item">
<img src="" alt="">
<p>The</p>
<p>Curiosity</p>
</div>
<div class="item">
<img src="" alt="">
<p>Make It</p>
<p>Fisheye</p>
</div>
</div>
</div>
</body>
</html>

flexbox, flexbox, flexbox!
#container{
max-width:1440px;
display:flex;
margin:0 auto;
}
#header{
border:solid 2px black;
flex-grow:1;
text-align:center;
}
<div id='container'>
<img src='https://via.placeholder.com/160x32.png' alt='log'>
<div id='header'>
here's to all the girls I...</div>
</div>

Flexbox grow inside anchor

I'm facing a problem where I would like an anchor flexbox child to take all remaining height available. I thought that adding flex-grow: 1 would suffice but it is not working. The div inside the anchor does not take the full height.
Question: Is there a way to make it work without converting my plain anchor to a flexbox element?
Here is a codepen illustrating the issue:
https://codepen.io/alansouzati/pen/YVpYeO
I've created 3 tiles where the first one has the anchor to exemplify. You can see that the price does not align with the other siblings.

.plain is not a flex parent, so setting flex-grow: 1 on .service doesn't do anything.
Just add display: flex to .plain
.tiles {
display: flex;
flex-wrap: wrap;
background-color: #d3d3d3;
padding: 12px;
justify-content: center;
}
.tile {
display: flex;
border: 1px solid #333;
flex-basis: 200px;
background-color: white;
margin: 12px;
flex-direction: column;
}
.tile:hover {
background-color: #f1f1f1;
}
.service {
display: flex;
flex-direction: column;
padding: 12px;
flex-grow: 1;
}
.service-body {
flex-grow: 1;
}
p {
color: #a8a8a8;
}
.plain {
margin: 0;
color:inherit;
text-decoration:none;
flex-grow: 1;
display: flex;
}
<div class='tiles'>
<div class='tile'>
<a href="http://google.com" class='plain' target="_blank">
<div class='service'>
<h2>Service 1</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</a>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 2</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 3</h2>
<div class='service-body'>
<p>This is a sample service with a long text that will make things render differently</p>
</div>
<span>$9.99</span>
</div>
</div>
</div>

See Below. I made the ".service" after the anchor tag absolute and relative to the main container. Hope it helps
.tiles {
display: flex;
flex-wrap: wrap;
background-color: #d3d3d3;
padding: 12px;
justify-content: center;
}
.tile {
display: flex;
border: 1px solid #333;
flex-basis: 200px;
background-color: white;
margin: 12px;
flex-direction: column;
position: relative;/**Added Code**/
}
.tile:hover {
background-color: #f1f1f1;
}
.service {
display: flex;
flex-direction: column;
padding: 12px;
flex-grow: 1;
}
.service-body {
flex-grow: 1;
}
p {
color: #a8a8a8;
}
.plain {
margin: 0;
color:inherit;
text-decoration:none;
flex-grow: 1;
}
/**Added Code**/
.plain > .service {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class='tiles'>
<div class='tile'>
<a href="http://google.com" class='plain' target="_blank">
<div class='service'>
<h2>Service 1</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</a>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 2</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 3</h2>
<div class='service-body'>
<p>This is a sample service with a long text that will make things render differently</p>
</div>
<span>$9.99</span>
</div>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

HTML: Show/Hide different divs with same function but not simultaneously - javascript

Related

Wrapping text (numbers) to expand a div

(JavaScript) removeAttribute didn't remove the Attribute

Problem when using display none with divs and footer

Margin auto doesn't work even if I have width and height defined

Flexbox grow inside anchor

Categories

Resources