Hello I'm working on a frontend mentor challenge and encountered a bug when I click my hamburger menu it seems to remove the middle bar, my intentions were to make an X appear and have the li's come easing in from the left, can anyone tell me what I did wrong? I'm teaching myself how to develop and maintain sites.
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<title>Angel News</title>
</head>
<body>
<div id="con">
<nav class="navbar">
W.
<ul class="nav-menu">
<li class="nav-menu">
Home
</li>
<li class="nav-menu">
News
</li>
<li class="nav-menu">
Popular
</li>
<li class="nav-menu">
Trending
</li>
<li class="nav-menu">
Catergories
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
<div class="section1">
<img src="" alt="">
<h2 class="section1-h2">The Bright Future of Web 3.0?</h2>
<p class="section1-p">We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people. But is it really fulfilling it's promise?</p>
Read More
</div>
<div class="section2">
<div class="section2-inside">
<h3 class="section2-h3">New</h3>
<div class="insidesection2-1">
<h4>Hydrogen VS Electric Cars</h4>
<p>Will hydrogen-fueled cars ever catch up to EV's?</p>
</div>
<div class="insidesection2-2">
<h4>The Downsides og AI Artistry</h4>
<p>What are the possible adverse effects of on-demand AI image generation?</p>
</div>
<div class="insidesection2-3">
<h4>Is VC Funding Drying Up?</h4>
<p>Private funding by VC firms is down 50% YOY. We take a look at what that means.</p>
</div>
</div>
</div>
<div class="section3">
<div class="section3-1">
<img src="" alt="">
<div class="insidesection3-1">
<h4 class="insidesection3-1-h4">01</h4>
<h5 class="insidesection3-1-h5">Reviving Retro PCs</h5>
<p>What happens when old PCs are given modern upgrades?</p>
</div>
</div>
<div class="section3-2">
<img src="" alt="">
<div class="insidesection3-2">
<h4 class="insidesection3-2-h4">02</h4>
<h5 class="insidesection3-2-h5">Top 10 Laptops of 2023</h5>
<p>Our best picks for various needs and budgets.</p>
</div>
</div>
<div class="section3-3">
<img src="" alt="">
<div class="insidesection3-3">
<h4 class="insidesection3-3-h4">03</h4>
<h5 class="insidesection3-3-h5">The Growth of Gaming</h5>
<p>How the pandemic has sparked fresh opportunities.</p>
</div>
</div>
</div>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
li {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
.navbar {
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
gap: 60px;
}
.nav-branding {
font-size: 2rem;
}
.nav-link {
transition: 0.7s ease;
}
.nav-link:hover {
color: hsl(35deg, 77%, 62%);
}
.hamburger {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background-color: black;
}
#media (max-width: 768px) {
.hamburger {
display: block;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: rotateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: rotateY(-8px) rotate(-45deg);
}
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
gap: 0;
flex-direction: column;
width: 100%;
background-color: black;
text-align: center;
transition: 0.3s;
}
.nav-item {
margin: 16px 0;
}
.nav-menu.active {
left: 0;
}
}
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active')
navMenu.classList.toggle('active')
})
Please try to use translateY instead of RotateY in your css #media tag as follows:
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
Related
im making my profile websites want make scroll transition like here https://olaolu.dev,how can I do that?There will be 5 pages, and transition between them should be like in link above, also it should relater to buttons as well, when I press button it should have this scroll effect too
my html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/b/cs.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<section class="section-top active">
<div class="details">
<div class="top">
<h2>Faxraddin</h2>
<div class="lists">
<button><i class="bi bi-list-check"></i></button>
</div>
</div>
<div class="first-info">
<div class="first-sec">
<h1>Frontend</br> Developer.</h1>
<h3 class="profession-info">I like to craft solid and scalable frontend products with great user experiences.</h3>
</div>
<img class="my-img" src="/b/images/Screenshot 2022-11-04 at 19.35.20.png">
</div>
<div class="some-info">
<div class="a1">
<span>Highly skilled at progressive
enhancement, design systems &
UI Engineering.
</span>
<span>Over a decade of experience
building products for clients
across several countries.
</span>
</div>
<div class="btn-container">
<ul>
<button class="btn active"><i class="bi bi-app"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
<button class="btn"><i class="bi bi-diamond-fill"></i></button>
</ul>
</div>
</div>
</div>
</section>
<section class="what-do" id="s2">
</section>
<script src="/b/js.js"></script>
</body>
</html>
HTML + CSS can be achieved, but the scrolling effect is slow
body {
margin: 0;
height: 100vh;
overflow-x: hidden;
}
.wrap {
scroll-behavior: smooth;
overflow-x: hidden;
height: 100%;
scroll-snap-type: y mandatory;
}
.section {
color: #fff;
font-size: 30px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
scroll-snap-align: start;
}
.section1 {
background-color: #111;
}
.section2 {
background-color: #333;
}
.section3 {
background-color: #555;
}
.section4 {
background-color: #777;
}
.section5 {
background-color: #999;
}
.point {
position: absolute;
bottom: 30px;
right: 30px;
display: flex;
flex-direction: column;
}
.point a {
display: block;
width: 8px;
height: 8px;
margin: 8px 0;
background-color: #fff;
}
<div class="wrap">
<section id="s1" class="section section1">page 1</section>
<section id="s2" class="section section2">page 2</section>
<section id="s3" class="section section3">page 3</section>
<section id="s4" class="section section4">page 4</section>
<section id="s5" class="section section5">page 5</section>
<div class="point">
</div>
</div>
Here is a Fiddle of my problem (Click the image next to the 'Werknemers' or 'Verzuimdossiers').
I got a sidebar in which some items have subcontent and some don't. So I made an accordion with subnav items. The problem is that the opening animation works fine. However, the closing animation is not being fired.
What could be the issue here?
Code for reference
openSubnav = (evt, subNavName) => {
let i, subnavContent, subnavLinks;
//Check if the current accordion is clicked again to close it.
const subNav = document.getElementById(subNavName)
if (getComputedStyle(subNav).display === 'block') {
subNav.style.display = 'none'
evt.currentTarget.className = evt.currentTarget.className.replace(" subnav-isActive", "");
subNav.style.maxHeight = null;
return
}
//hide alle subnav content
subnavContent = document.getElementsByClassName("subnav-content");
for (i = 0; i < subnavContent.length; i++) {
subnavContent[i].style.display = "none";
}
//delete the subnav-isActive class
subnavLinks = document.getElementsByClassName("subnav-item");
for (i = 0; i < subnavLinks.length; i++) {
subnavLinks[i].className = subnavLinks[i].className.replace(" subnav-isActive", "");
}
//Display the content
subNav.style.display = "block";
//Add the subnav-isActive class
evt.currentTarget.className += " subnav-isActive";
//If there currently is a max-height on the element, delete it.
if (subNav.style.maxHeight) {
subNav.style.maxHeight = null;
}
subNav.style.maxHeight = subNav.scrollHeight + "px";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.root {
display: flex;
font-family: 'Poppins', sans-serif;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
.icon-container {
width: 60px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
/* .sidebar:hover {
width: 250px;
overflow: visible;
} */
.sidebar {
width: 250px;
}
.sidebar {
background-color: #8dc4d9;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
/* width:60px; */
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
}
.sidebar>ul {
margin: 10px 0;
}
.sidebar li {
width:250px;
}
.sidebar li>span {
position: relative;
display: table;
border-collapse: collapse;
border-spacing: 0;
font-size: 14px;
transition: all .1s linear;
}
.sidebar .nav-text {
display: table-cell;
vertical-align: middle;
/* 250px breed totaal - 60px breed icoon = 190 */
width: 190px;
}
.sidebar .nav-dropdown {
display: table-cell;
vertical-align: middle;
cursor: pointer;
padding-right: 20px;
padding-top: 8px;
}
.sidebar .nav-dropdown img {
transform: rotate(270deg);
transition: transform .3s ease;
}
.sidebar .nav-dropdown.subnav-isActive img {
transform: rotate(360deg);
}
.user {
margin-bottom: 20px;
}
.sidebar li:hover>span {
background-color:#76abbf;
}
.subnav-content {
display: none;
/* 17px omdat de afbeelding 24x24 is en de breedte van de sidebar 60px.
Met de afbeelding houd je dus 17px aan beiden kanten over. */
padding: 10px 17px;
background-color:#76abbf;
list-style: none;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.content {
width: calc(50% - 30px);
background-color: #f3f6f9;
}
.preview {
width: calc(50% - 30px);
background-color: #f3f6f9;
}
<!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">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>Sidebar</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="root">
<nav class="sidebar">
<ul>
<li class="user">
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/user32.png" alt="">
</div>
<span class="nav-text">
Mijn account
</span>
</span>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/bureaublad24.png" alt="">
</div>
<span class="nav-text">
Dashboard
</span>
</span>
</li>
<li class="has-subnav">
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/werknemers24.png" alt="">
</div>
<span class="nav-text">
Werknemers
</span>
<span class="nav-dropdown subnav-item" onclick="openSubnav(event, 'Werknemers')">
<img src="./icons24/DropdownArrow16.png">
</span>
</span>
<ul id="Werknemers" class="subnav-content">
<li>kaas</li>
<li>brood</li>
<li>eieren</li>
</ul>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/verzuimdossiers24.png" alt="">
</div>
<span class="nav-text">
Verzuimdossiers
</span>
<span class="nav-dropdown subnav-item" onclick="openSubnav(event, 'Verzuimdossiers')">
<img src="./icons24/DropdownArrow16.png">
</span>
</span>
<ul id="Verzuimdossiers" class="subnav-content">
<li>boter</li>
<li>friet</li>
<li>pasta</li>
</ul>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/trajecten24.png" alt="">
</div>
<span class="nav-text">
Trajecten
</span>
</span>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/projecten24.png" alt="">
</div>
<span class="nav-text">
Projecten
</span>
</span>
</li>
</ul>
</nav>
<div class="content">
Content
</div>
<div class="preview">
Preview
</div>
</div>
</body>
</html>
You need to set timeout before the display: none so it has time to prosecute the closing animation.
Like in this code:
const subNav = document.getElementById(subNavName)
if (getComputedStyle(subNav).display === 'block') {
evt.currentTarget.className = evt.currentTarget.className.replace(" subnav-isActive", "");
subNav.style.maxHeight = null;
setTimeout(function(){subNav.style.display = 'none';}, 100);
return
}
Here you have the right code complete (idk why, but you need to expand the snippet to see it working, click on Run code snippet and then Full page link):
openSubnav = (evt, subNavName) => {
let i, subnavContent, subnavLinks;
//Check if the current accordion is clicked again to close it.
const subNav = document.getElementById(subNavName)
if (getComputedStyle(subNav).display === 'block') {
evt.currentTarget.className = evt.currentTarget.className.replace(" subnav-isActive", "");
subNav.style.maxHeight = null;
setTimeout(function(){subNav.style.display = 'none';}, 100);
return
}
//hide alle subnav content
subnavContent = document.getElementsByClassName("subnav-content");
for (i = 0; i < subnavContent.length; i++) {
subnavContent[i].style.display = "none";
}
//delete the subnav-isActive class
subnavLinks = document.getElementsByClassName("subnav-item");
for (i = 0; i < subnavLinks.length; i++) {
subnavLinks[i].className = subnavLinks[i].className.replace(" subnav-isActive", "");
}
//Display the content
subNav.style.display = "block";
//Add the subnav-isActive class
evt.currentTarget.className += " subnav-isActive";
//If there currently is a max-height on the element, delete it.
if (subNav.style.maxHeight) {
subNav.style.maxHeight = null;
}
subNav.style.maxHeight = subNav.scrollHeight + "px";
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.root {
display: flex;
font-family: 'Poppins', sans-serif;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
.icon-container {
width: 60px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
/* .sidebar:hover {
width: 250px;
overflow: visible;
} */
.sidebar {
width: 250px;
}
.sidebar {
background-color: #8dc4d9;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
/* width:60px; */
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
}
.sidebar>ul {
margin: 10px 0;
}
.sidebar li {
width:250px;
}
.sidebar li>span {
position: relative;
display: table;
border-collapse: collapse;
border-spacing: 0;
font-size: 14px;
transition: all .1s linear;
}
.sidebar .nav-text {
display: table-cell;
vertical-align: middle;
/* 250px breed totaal - 60px breed icoon = 190 */
width: 190px;
}
.sidebar .nav-dropdown {
display: table-cell;
vertical-align: middle;
cursor: pointer;
padding-right: 20px;
padding-top: 8px;
}
.sidebar .nav-dropdown img {
transform: rotate(270deg);
transition: transform .3s ease;
}
.sidebar .nav-dropdown.subnav-isActive img {
transform: rotate(360deg);
}
.user {
margin-bottom: 20px;
}
.sidebar li:hover>span {
background-color:#76abbf;
}
.subnav-content {
display: none;
/* 17px omdat de afbeelding 24x24 is en de breedte van de sidebar 60px.
Met de afbeelding houd je dus 17px aan beiden kanten over. */
padding: 10px 17px;
background-color:#76abbf;
list-style: none;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.content {
width: calc(50% - 30px);
background-color: #f3f6f9;
}
.preview {
width: calc(50% - 30px);
background-color: #f3f6f9;
}
<!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">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>Sidebar</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="root">
<nav class="sidebar">
<ul>
<li class="user">
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/user32.png" alt="">
</div>
<span class="nav-text">
Mijn account
</span>
</span>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/bureaublad24.png" alt="">
</div>
<span class="nav-text">
Dashboard
</span>
</span>
</li>
<li class="has-subnav">
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/werknemers24.png" alt="">
</div>
<span class="nav-text">
Werknemers
</span>
<span class="nav-dropdown subnav-item" onclick="openSubnav(event, 'Werknemers')">
<img src="./icons24/DropdownArrow16.png">
</span>
</span>
<ul id="Werknemers" class="subnav-content">
<li>kaas</li>
<li>brood</li>
<li>eieren</li>
</ul>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/verzuimdossiers24.png" alt="">
</div>
<span class="nav-text">
Verzuimdossiers
</span>
<span class="nav-dropdown subnav-item" onclick="openSubnav(event, 'Verzuimdossiers')">
<img src="./icons24/DropdownArrow16.png">
</span>
</span>
<ul id="Verzuimdossiers" class="subnav-content">
<li>boter</li>
<li>friet</li>
<li>pasta</li>
</ul>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/trajecten24.png" alt="">
</div>
<span class="nav-text">
Trajecten
</span>
</span>
</li>
<li>
<span>
<div class="icon-container">
<img class="nav-icon" src="./icons24/projecten24.png" alt="">
</div>
<span class="nav-text">
Projecten
</span>
</span>
</li>
</ul>
</nav>
<div class="content">
Content
</div>
<div class="preview">
Preview
</div>
</div>
</body>
</html>
The reason is because your animation takes some time to execute, but you assign display: none before your animation has any chance to be rendered.
I'm building an HTML chat app template, and I ran into two major issues when trying to complete it.
The chat names on the side are not showing ellipses despite me using text-overflow: ellipse;
When anyone of the chats are clicked, I would like them to stay on an active color until I click on another one, but I'm not sure how to go about it.
Here's my HTML and CSS:
body{
background-image: url("../img/gradientBackgroundOne.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.wrapper{
display: grid;
grid-template-columns: 1fr 2fr;
width: 85vw;
height: 80vh;
margin: auto;
margin-top: 2%;
}
/*
* This section will style the sidebar, which will contain all of the users chats that they're in
*
*/
.sidebar{
display: grid;
grid-template-rows: 80px 60vh auto;
background-color: purple;
}
.sidebar > .chats-title{
background-color: violet;
}
.sidebar > .group-chats{
overflow-y: auto;
background-color: white;
}
.sidebar > .group-chats > .group-chat-name{
padding: 15px;
background-color: chocolate;
border: 1px solid black;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sidebar > .group-chats > div:hover{
background-color:burlywood;
}
.sidebar > .group-chats > div:active{
background-color:rgb(122, 184, 235);
}
.sidebar > .add-new-chat{
background-color: turquoise;
}
/**************************************/
/* END OF SIDE BAR STYLING! */
/**************************************/
/*
* This section will style the chat, which will contain all of the users messages that they're in
*
*/
.chat-container{
display: grid;
grid-template-rows: 1fr 8fr auto;
}
.chat-container > .chat{
background-color: red;
}
.chat-container > .message-container{
display: grid;
grid-template-columns: 5% auto;
}
.chat-container > .chat-title{
display: grid;
background-color: chartreuse;
border: 2px solid black;
}
.chat-container > .message-container > .image-bk{
display: grid;
background-color: blue;
}
.chat-container > .chat-title > .title-text{
color: white;
margin-left: 0px;
margin: auto;
}
/**************************************/
/* END OF CHAT STYLING! */
/**************************************/
/* Icon styling */
i{
margin: auto;
/* font-size: 1.6rem; */
color: rgb(240, 240, 240);
}
<!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">
<link rel="shortcut icon" href="../static/img/fav.png" type="image/x-icon">
<link rel="stylesheet" href="../static/css/example.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Mini-Messenger</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">DM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Message History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log Out</a>
</li>
</ul>
</div>
</nav>
<div class="wrapper">
<div class="sidebar">
<div class="chats-title">
<h1>Chats</h1>
</div>
<div class="group-chats">
<div class="group-chat-name">
<div> <b>L.R.D.D </b> </div>
<div>Luis: They weren't fresh, but boy they were high quality</div>
</div>
<div class="group-chat-name">
<div> <b>Munckin and Me!</b> </div>
<div>Denise: Hey DD</div>
</div>
<div class="group-chat-name">
<div> <b>The boiz</b></div>
<div>Vincent: Hehehe Steve dumb hehehe</div>
</div class="group-chat-name">
<div class="group-chat-name">
<div> <b>Example2</b> </div>
<div> Fred: I am fred, look at me! </div>
</div>
<div class="group-chat-name">
<div> <b>Example3</b> </div>
<div>Mark: Woah dude, farizzle! </div>
</div>
<div class="group-chat-name">
<div> <b>Magical School Bus </b> </div>
<div>Arthur: Oh dear god, Please let this be a normal field trip! :( </div>
</div>
</div>
<div class="add-new-chat">
<h3>Add new chat!</h3>
</div>
</div>
<div class="chat-container">
<div class="chat-title">
<div class="title-text">
<b>L.R.D.D </b>
</div>
</div>
<div class="chat">
</div>
<div class="message-container">
<div class="image-bk">
<i class="bi bi-image"></i>
</div>
<form>
<input type="text" class="form-rounded form-control form-control-md" required name="send-message" placeholder="Send message" aria-label="Recipient's username" aria-describedby="basic-addon2">
</form>
</div>
</div>
</div>
</body>
</html>
What should I do? Thanks.
You probably have to use javascript to achieve this. The default functioning for the :active state is to snap back to the :hover state as soon as you click and release the mouse button.
.sidebar > .group-chats > div:active {
background-color: red;
}
If you remove the :hover state you'll make it stay red, but it's as far as I am concerned impossible to keep :active as long as :hover immediately takes over once the click is finished.
body{
background-image: url("../img/gradientBackgroundOne.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
.wrapper{
display: grid;
grid-template-columns: 1fr 2fr;
width: 85vw;
height: 80vh;
margin: auto;
margin-top: 2%;
}
/*
* This section will style the sidebar, which will contain all of the users chats that they're in
*
*/
.sidebar{
display: grid;
grid-template-rows: 80px 60vh auto;
background-color: purple;
}
.sidebar > .chats-title{
background-color: violet;
}
.sidebar > .group-chats{
overflow-y: auto;
background-color: white;
}
.sidebar > .group-chats > .group-chat-name{
padding: 15px;
background-color: chocolate;
border: 1px solid black;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sidebar > .group-chats > div:hover{
background-color:burlywood;
}
.sidebar > .group-chats > div:active,
.sidebar > .group-chats > div:focus {
background-color: red;
}
.sidebar > .add-new-chat{
background-color: turquoise;
}
/**************************************/
/* END OF SIDE BAR STYLING! */
/**************************************/
/*
* This section will style the chat, which will contain all of the users messages that they're in
*
*/
.chat-container{
display: grid;
grid-template-rows: 1fr 8fr auto;
}
.chat-container > .chat{
background-color: red;
}
.chat-container > .message-container{
display: grid;
grid-template-columns: 5% auto;
}
.chat-container > .chat-title{
display: grid;
background-color: chartreuse;
border: 2px solid black;
}
.chat-container > .message-container > .image-bk{
display: grid;
background-color: blue;
}
.chat-container > .chat-title > .title-text{
color: white;
margin-left: 0px;
margin: auto;
}
/**************************************/
/* END OF CHAT STYLING! */
/**************************************/
/* Icon styling */
i{
margin: auto;
/* font-size: 1.6rem; */
color: rgb(240, 240, 240);
}
<!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">
<link rel="shortcut icon" href="../static/img/fav.png" type="image/x-icon">
<link rel="stylesheet" href="../static/css/example.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Mini-Messenger</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">DM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Message History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log Out</a>
</li>
</ul>
</div>
</nav>
<div class="wrapper">
<div class="sidebar">
<div class="chats-title">
<h1>Chats</h1>
</div>
<div class="group-chats">
<div class="group-chat-name">
<div> <b>L.R.D.D </b> </div>
<div>Luis: They weren't fresh, but boy they were high quality</div>
</div>
<div class="group-chat-name">
<div> <b>Munckin and Me!</b> </div>
<div>Denise: Hey DD</div>
</div>
<div class="group-chat-name">
<div> <b>The boiz</b></div>
<div>Vincent: Hehehe Steve dumb hehehe</div>
</div class="group-chat-name">
<div class="group-chat-name">
<div> <b>Example2</b> </div>
<div> Fred: I am fred, look at me! </div>
</div>
<div class="group-chat-name">
<div> <b>Example3</b> </div>
<div>Mark: Woah dude, farizzle! </div>
</div>
<div class="group-chat-name">
<div> <b>Magical School Bus </b> </div>
<div>Arthur: Oh dear god, Please let this be a normal field trip! :( </div>
</div>
</div>
<div class="add-new-chat">
<h3>Add new chat!</h3>
</div>
</div>
<div class="chat-container">
<div class="chat-title">
<div class="title-text">
<b>L.R.D.D </b>
</div>
</div>
<div class="chat">
</div>
<div class="message-container">
<div class="image-bk">
<i class="bi bi-image"></i>
</div>
<form>
<input type="text" class="form-rounded form-control form-control-md" required name="send-message" placeholder="Send message" aria-label="Recipient's username" aria-describedby="basic-addon2">
</form>
</div>
</div>
</div>
</body>
</html>
Edit: Forgot your ellipsis question. For this to work your element has to have a width. However, I am not able to solve it, your markup and css are confusing and adding width to what I think is the correct element doesn't work.
Edit 2: You could try a JS solution like this to make the active background color stick when you click the chat room divs. I have simplified. You can change this to use the container class that you already have and just add a unique class to all the divs inside of it that you want to make work with this JS:
const container = document.querySelector('.container')
const activeState = (e) => {
document.querySelectorAll('.active-color').forEach(link => link.classList.remove('clicked-color'))
if (e.target.className.toLowerCase() === 'active-color' )
e.target.classList.add('clicked-color')
}
container.addEventListener('click', (e) => {
activeState(e)
})
div.active-color {
padding: 2rem;
width: 300px;
background: #ddd;
margin: 1rem 0;
border-radius: 6px;
}
div.active-color:hover,
div.active-color:focus {
background: purple;
cursor: pointer;
}
div.active-color:active {
background: red;
}
div.active-color.clicked-color {
background: red;
}
<div class="container">
<div class="active-color">DIV 1</div>
<div class="active-color">DIV 2</div>
<div class="active-color">DIV 3</div>
<div class="active-color">DIV 4</div>
</div>
I've got little issue with finding right class. I'm making slider and I want to set margin-left on the last element of class called "is-active". I'm not able to find this class in js, but in the web's console it's avabile. What's the reason and how Can I get last class of elements?
document.addEventListener('DOMContentLoaded', function () {
new Splide('.splide', {
perPage: 5,
perMove: 1,
breakpoints: {
500: {
perPage: 2,
},
640: {
perPage: 3,
},
780: {
perPage: 4,
}
}
// autoWith: true,
}).mount();
});
const list = document.querySelectorAll('.splide__slide')
list.forEach(li => {
console.log(li.classList.contains('is-visible'));
});
.splide img {
height: 20vh;
}
.splide__arrow--prev {
margin-right: 100px;
}
.splide__slide__container {
text-align: center;
}
.splide__list {
width: 100px;
}
.info {
display: grid;
grid-template-columns: 57.12vw 14.28vw 28.56vw;
grid-template-rows: 20vh;
}
.info__logo-wrapper {
background: #cecece;
justify-self: center;
width: 100%;
}
.info__logo {
height: 100%;
width: 100%;
padding: 0 2vw;
}
.description {
display: flex;
flex-direction: column;
text-transform: uppercase;
}
.description--flex {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.description__header {
font-weight: 700;
font-family: 'Lato', sans-serif;
color: grey;
font-size: 1.25rem;
}
#media (min-width: 1000px) {
.description__header {
font-size: 1.75rem;
}
}
.description__color {
font-size: 0.75rem;
}
#media (min-width: 1000px) {
.description__color {
font-size: 1.25rem;
}
}
.description__size {
font-weight: 700;
font-size: 1rem;
color: black;
}
#media (min-width: 1000px) {
.description__size {
font-size: 1.5rem;
}
}
.description--background {
background-color: #ebebeb;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#splidejs/splide#latest/dist/css/splide.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="info">
<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<div class="splide__slide__container">
<img src="https://via.placeholder.com/150/0000FF ">
</div>
</li>
<li class="splide__slide">
<div class="splide__slide__container">
<img src="https://via.placeholder.com/150/FF0000">
</div>
</li>
<li class="splide__slide">
<div class="splide__slide__container">
<img src="https://via.placeholder.com/150/0000FF/808080 ">
</div>
</li>
<li class="splide__slide">
<div class="splide__slide__container">
<img src="https://via.placeholder.com/150/FF0000">
</div>
</li>
<li class="splide__slide">
<div class="splide__slide__container">
<img src="https://via.placeholder.com/150/0000FF/808080 ">
</div>
</li>
<li class="splide__slide">
<div class="splide__slide__container">
<img src="https://via.placeholder.com/150/FF0000">
</div>
</li>
<li class="splide__slide">
<div class="splide__slide__container">
<img src="https://via.placeholder.com/150/0000FF/808080 ">
</div>
</li>
</ul>
</div>
</div>
<div class="info__logo-wrapper">
</div>
<div class="description">
<div class="description--flex">
</div>
<div class="description--flex">
</div>
<div class="description--flex description--background">
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/#splidejs/splide#latest/dist/js/splide.min.js"></script>
</body>
</html>
If I type the same what's in js to the console there're 5 true and 2 false. Why these elements aren't available in script?
My "home" button goes up into the div as I condense the page. What is the best way to stabilize the button so that it will stay in center of the div as the page is condensed? I've tried many different things and so far nothing has worked so I'm hoping someone on this site could help me answer this problem. I've tried many different things without success.
JS/CSS/HTML
$(document).ready(function () {
//mouseenter overlay
$('ul#gallery li').on('mouseenter', function () {
// Get data attribute values
var title = $(this).children().data('title');
var desc = $(this).children().data('desc');
//validation
if (desc == null) {
desc = 'Click To Enlarge';
}
if (title == null) {
title = '';
}
//Create overlay div
$(this).append('<div class="overlay"></div>');
//Get the overlay div
var overlay = $(this).children('.overlay');
// Add html to overlay
overlay.html('<h3>' + title + '</h3><p>' + desc + '</p>');
// Fade in overlay
overlay.fadeIn(400);
});
$('ul#gallery li').on('mouseleave', function () {
//Create overlay div
$(this).append('<div class="overlay"></div>');
//Get the overlay div
var overlay = $(this).children('.overlay');
//Fade out overlay
overlay.fadeOut(200);
});
});
body{
background-color: white;
font-family:Orbitron;
color:white;
width:100%
}
.fa-stack-overflow{
color: #f48024
}
.fa-github{
color:rgb(102,43,129);
}
.fa-linkedin{
color:rgb(0,127,178);
}
.fa-facebook-official{
color:rgb(59, 89, 153);
}
.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
color:white;
}
.block{
background-color: #337ab7;
opacity: .7;
padding:10px;
width:50%;
margin-right: auto;
margin-left: auto;
border-radius:5px;
}
h1{
padding:0;
margin-top: 0px;
font-size: 5.0em;
}
.btn-default{
font-size:1.7em;
color:#337ab7;
}
.pageOne{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 1000px;
}
/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/*
parallax effect end
*/
.pageTwo{
background: white;
color:#337ab7;
background-repeat:no-repeat;
background-size: cover;
height: 400px;
padding-top: 5%;
border-bottom:#00bfff 3px solid;
border-top:#00bfff 3px solid;
background-attachment: fixed;
}
.boxed{
font-size: 1.7em;
text-align: center;
margin-right: auto;
margin-left: auto;
margin-bottom: 100px;
}
.me{
height: 850px;
display:block;
margin-right: auto;
margin-left: auto;
}
.pageThree{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 800px;
padding-top:6%;
background-attachment: fixed;
}
.button{
background-size: contain;
}
.container{
width:80%;
margin:auto;
overflow:auto;
}
section{
padding:20px 0;
overflow:hidden;
padding-bottom: 5%;
margin-top: 2.5%;
}
#gallery{
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#gallery li{
display: block;
float: left;
width: 23%;
cursor: pointer;
border: 5px;
box-sizing: border-box;
margin: 0 12px 7px 0;
position: relative;
}
#gallery img{
width:100%;
border-radius:5%
}
.overlay{
display:none;
background:#337ab7 url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb) no-repeat top center;
color:#fff;
position:absolute;
top:0;
z-index:100;
width:100%;
height:100%;
padding:20px;
border-radius:5%;
box-sizing: border-box;
pointer-events: none;
opacity: .7;
}
.overlay h3{
margin: 0;
padding: 0;
}
.pageThreeFooter{
background: black;
color:#337ab7;
background-repeat: none;
background-size: cover;
height: 150px;
padding-top: 2.5%;
background-attachment: fixed;
}
.pageFour{
background: white;
color:#337ab7;
background-repeat: none;
background-size: cover;
height: 300px;
padding-top: 2.5%;
}
.black{
color:black;
}
<!DOCTYPE html>
<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/font-awesome.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pageOne text-center">
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
<div class="block text-center" id="p1">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Web Projects</h2>
</div>
<div class = "btnList text-center">
<a class = "btn btn-default" href="https://stackoverflow.com/users/7024823/daniel"><i class="fa fa-stack-overflow" aria-hidden="true"></i>Stack Overflow</a>
<a class = "btn btn-default" href="https://github.com/casteyes"><i class="fa fa-github" aria-hidden="true"></i>GitHub</a>
<a class = "btn btn-default" href="https://www.linkedin.com/in/daniel-collins-927b1ab0/"><i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin</a>
<a class = "btn btn-default" href="https://www.facebook.com/daniel.p.collins1"><i class="fa fa-facebook-official" aria-hidden="true"></i>Facebook</a>
</div>
</div>
<div class= "pageTwo text-center" id="p2">
<h2>Daniel Collins</h2>
<div class="boxed">
<p class="black">
I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
different areas of web development from back end programming (MySQL, PHP, C#, Java) to front end engineering
(HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
</p>
</div>
</div>
<div class= "pageThree" id="p3">
<header>
<div class="block text-center">
<h1 class = "logo">Portfolio</h1>
</div>
</header>
<section>
<div class="container">
<h1 id="heading">Projects</h1>
<ul id="gallery">
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
</ul>
</div>
</div>
</section>
<div class="pageThreeFooter text-center">
<div class="row">
Home
</div>
</div>
<div class= "pageFour text-center" id="p4">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Let's Get In Touch!</h2>
<hr class="primary">
<p class="black">Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!</p>
</div>
<div class="col-lg-4 col-lg-offset-2 text-center">
<i class="fa fa-phone fa-3x sr-contact"></i>
<p class="black">555-5555</p>
</div>
<div class="col-lg-4 text-center">
<i class="fa fa-envelope-o fa-3x sr-contact"></i>
<p class="black"><a class="black" href="mailto:casteyestothesun#gmail.com">myemail.com</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
You are missing the important responsive meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
But you are using Bootstrap, which is a responsive framework. So, the answer to your question is to study and understand Bootstrap, along with more general studying of what it means for a site to be responsive.
There is a lot more to making a website responsive than just changing one or two things. You really need to plan on how each element or container of those elements is going to be responsive in their own right. Also, how your wrap or container of all content will behave as well as how your images, text/font, etc... will also be responsive.
This is too broad a question to be answered simply.
Since you are already using bootstrap, I would research how to utilize this to it's full potential and you can easily make your website responsive.
As you guessed, media queries are a good way to do this.
You'll need to add this tag in your header for these to work:
<meta name="viewport" content="width=device-width, initial-scale=1">
There are two ways you can go about setting your breakpoints - by min width or max width.
Since you've already written most of the styles, min-width probably makes more sense. If you have multiple breakpoints you can combine min-width and max-width into a single query to avoid conflicts with other media queries.
As for the home button, I recommend looking up how to vertically center an element. This guide is pretty handy: https://css-tricks.com/centering-css-complete-guide/