I'm currently creating a navigation bar that expands and collapses whether the mouse is over or out of the navbar. My issue is that when the navbar is expanded, my icons are aligned to the center but I wish for them to be positioned exactly where they are before the navbar is expanded. I have them aligned to the center because the icons are not the same size and look 'out of place' without it, when the navbar is collapsed.
let sidenav = document.getElementById("sidenav");
sidenav.onmouseover = function() {
sidenav.style.width = "280px";
document.getElementById("expand-icon").classList.add("expand");
document.getElementById("sidenav-expand").style.textAlign = "right";
document.getElementById("sidenav-heading").style.display = "inline-block";
//document.getElementById("links").style.float = "left";
};
sidenav.onmouseout = function() {
sidenav.style.width = "75px";
document.getElementById("expand-icon").classList.remove("expand");
document.getElementById("sidenav-expand").style.textAlign = "center";
document.getElementById("sidenav-heading").style.display = "none";
};
#sidenav {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #1e1e2d;
overflow-x: hidden;
color: grey;
transition: 0.2s;
}
#sidenav-brand {
padding: 25px 20px;
background-color: #1a1a27;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#sidenav-heading h2 {
margin: 0;
}
#sidenav-expand {
text-align: center;
margin-left: 3px;
}
.expand {
transform: rotate(180deg);
}
#sidenav-links {
margin: 15px 0;
}
#links {
list-style-type: none;
padding: 0;
text-align: center;
}
#links li {
padding: 18px;
display: block;
}
#links li:hover {
color: white;
background-color: hotpink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Navigation Bar</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div id="sidenav">
<div id="sidenav-brand">
<div id="sidenav-heading" style="display:none;">
<h2>Expanded</h2>
</div>
<div id="sidenav-expand">
<i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
</div>
</div>
<div id="sidenav-links">
<ul id="links">
<li>
<i class="fas fa-id-card fa-2x"></i>
</li>
<li>
<i class="fas fa-graduation-cap fa-2x"></i>
</li>
<li>
<i class="fas fa-briefcase fa-2x"></i>
</li>
<li>
<i class="fas fa-smile-beam fa-2x"></i>
</li>
</ul>
</div>
</div>
</body>
</html>
And JSFiddle link:
https://jsfiddle.net/h86zf4d3/
I tried to float my icons to the left as you can see from the commented out JS code, however, for some reason, this gets rid of the block display for the list items.
To make it works, change the #links{text-align:left}
And your issue about the icon's size put the fa-fw class. it will makeall the icons the same size.
Check the snippest below:
let sidenav = document.getElementById("sidenav");
sidenav.onmouseover = function() {
sidenav.style.width = "280px";
document.getElementById("expand-icon").classList.add("expand");
document.getElementById("sidenav-expand").style.textAlign = "right";
document.getElementById("sidenav-heading").style.display = "inline-block";
//document.getElementById("links").style.float = "left";
};
sidenav.onmouseout = function() {
sidenav.style.width = "75px";
document.getElementById("expand-icon").classList.remove("expand");
document.getElementById("sidenav-expand").style.textAlign = "center";
document.getElementById("sidenav-heading").style.display = "none";
};
#sidenav {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #1e1e2d;
overflow-x: hidden;
color: grey;
transition: 0.2s;
}
#sidenav-brand {
padding: 25px 20px;
background-color: #1a1a27;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#sidenav-heading h2 {
margin: 0;
}
#sidenav-expand {
text-align: center;
margin-left: 3px;
}
.expand {
transform: rotate(180deg);
}
#sidenav-links {
margin: 15px 0;
}
#links {
list-style-type: none;
padding: 0;
text-align: left;
}
#links li {
padding: 18px;
display: block;
}
#links li:hover {
color: white;
background-color: hotpink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Navigation Bar</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div id="sidenav">
<div id="sidenav-brand">
<div id="sidenav-heading" style="display:none;">
<h2>Expanded</h2>
</div>
<div id="sidenav-expand">
<i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
</div>
</div>
<div id="sidenav-links">
<ul id="links">
<li>
<i class="fas fa-fw fa-id-card fa-2x"></i>
</li>
<li>
<i class="fas fa-fw fa-graduation-cap fa-2x"></i>
</li>
<li>
<i class="fas fa-fw fa-briefcase fa-2x"></i>
</li>
<li>
<i class="fas fa-fw fa-smile-beam fa-2x"></i>
</li>
</ul>
</div>
</div>
</body>
</html>
why not just placing them to left ?
#links li{
text-align:left;
}
I've simpy added float: left to the CSS for #links and it looks fine to me.
They are still center-aligned on the collapsed version, because I haven't removed the line directly above it which says text-align: center;. However, they no longer change position when the menu opens.
See the snippet below:
let sidenav = document.getElementById("sidenav");
sidenav.onmouseover = function() {
sidenav.style.width = "280px";
document.getElementById("expand-icon").classList.add("expand");
document.getElementById("sidenav-expand").style.textAlign = "right";
document.getElementById("sidenav-heading").style.display = "inline-block";
};
sidenav.onmouseout = function() {
sidenav.style.width = "75px";
document.getElementById("expand-icon").classList.remove("expand");
document.getElementById("sidenav-expand").style.textAlign = "center";
document.getElementById("sidenav-heading").style.display = "none";
};
#sidenav {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #1e1e2d;
overflow-x: hidden;
color: grey;
transition: 0.2s;
}
#sidenav-brand {
padding: 25px 20px;
background-color: #1a1a27;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#sidenav-heading h2 {
margin: 0;
}
#sidenav-expand {
text-align: center;
margin-left: 3px;
}
.expand {
transform: rotate(180deg);
}
#sidenav-links {
margin: 15px 0;
}
#links {
list-style-type: none;
padding: 0;
text-align: center;
float: left;
}
#links li {
padding: 18px;
display: block;
}
#links li:hover {
color: white;
background-color: hotpink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Navigation Bar</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div id="sidenav">
<div id="sidenav-brand">
<div id="sidenav-heading" style="display:none;">
<h2>Expanded</h2>
</div>
<div id="sidenav-expand">
<i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
</div>
</div>
<div id="sidenav-links">
<ul id="links">
<li>
<i class="fas fa-id-card fa-2x"></i>
</li>
<li>
<i class="fas fa-graduation-cap fa-2x"></i>
</li>
<li>
<i class="fas fa-briefcase fa-2x"></i>
</li>
<li>
<i class="fas fa-smile-beam fa-2x"></i>
</li>
</ul>
</div>
</div>
</body>
</html>
Just remove the text-align: center rule on #links element. Also I edited your css to add some :hover rules to avoid using javascript:
#sidenav {
height: 100%;
min-width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #1e1e2d;
overflow-x: hidden;
color: grey;
transition: 0.2s;
}
#sidenav:hover {
width: 280px;
}
#sidenav:hover #expand-icon {
transform: rotate(180deg);
}
#sidenav:hover #sidenav-heading {
display: inline-block;
}
#sidenav #sidenav-heading {
display: none;
}
#sidenav-brand {
padding: 25px 20px;
background-color: #1a1a27;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#sidenav-heading h2 {
margin: 0;
}
#sidenav-expand {
text-align: center;
margin-left: 3px;
}
#sidenav-links {
margin: 15px 0;
}
#links {
list-style-type: none;
padding: 0;
}
#links li {
padding: 18px 20px;
/* <-- Add some padding*/
display: block;
}
#links li:hover {
color: white;
background-color: hotpink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Navigation Bar</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</head>
<body>
<div id="sidenav">
<div id="sidenav-brand">
<div id="sidenav-heading">
<h2>Expanded</h2>
</div>
<div id="sidenav-expand">
<i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
</div>
</div>
<div id="sidenav-links">
<ul id="links">
<li>
<i class="fas fa-id-card fa-2x"></i>
</li>
<li>
<i class="fas fa-graduation-cap fa-2x"></i>
</li>
<li>
<i class="fas fa-briefcase fa-2x"></i>
</li>
<li>
<i class="fas fa-smile-beam fa-2x"></i>
</li>
</ul>
</div>
</div>
</body>
</html>
Related
I need some help, I'm currently trying to make a portfolio using HTML following a tutorial I'm watching.
I used undraw to add an image but unfortunately, the image is stuck to the right:
I want to put the image underneath my icons but not sure on how to do to this. Any advice on how to get the SVG image in the centre underneath my icons?
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700&family=Poppins:wght#400;500;600&display=swap');
*{
color:black;
font-family: 'Lato', sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6,span{
color:black;
text-align: center;
line-height: 1.25;
}
h1{
font-size: 36px;
}
p{
line-height: 1.5;
font-size: 16px;
}
li{
list-style-type: none;
}
.flex{
display: flex; /* this automatically aligns like columns or rows with auto width and auto height */
}
.flex-1{
flex: 1; /* this makes sure that it is the entire height of the page */
}
/* Navigation bar */
.row{
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.text-pink{
color: #FF69B4 ;
}
nav{
height: 100px;
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__link--list{
display: flex;
}
.nav__link--anchor{
margin: 0 12px;
color: black;
text-decoration: none;
font-weight: 700;
}
.nav__link--anchor-primary{
background-color: #FF69B4;
padding: 8px 20px;
border-radius: 50px;
color: white;
transition: all 300ms ease;
}
.nav__link--anchor-primary:hover{
background-color: #FF69B4;
}
.personal_logo{
font-size: 20px;
color: #FF69B4;
margin: 0 12px;
font-weight: bold;
}
/* About mE */
#about-me{
min-height: 100vh; /* entire height of the page */
display: flex;
flex-direction: column;
}
.about-me__info{
display: flex;
flex-direction: column;
}
.about-me__info--container {
display: flex;
flex-direction: column; /* so it is not side-by-side */
align-items: center;
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.about-me--picture--mask{
width: 180px;
height: 180px;
border-radius: 100%;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0,0,0,1);
margin-bottom: 20px;
}
.about-me__picture{
width: 100%;
transform: scale(1,1.1);
padding-top: 7px;
}
.about-me__info--para{
font-size: 15px;
margin-bottom: 28px;
}
.about-me__info--title{
margin-bottom: 15px;
}
.about-me__link{
font-size: 20px;
color:#FF69B4;
text-decoration: none;
padding: 0 16px;
}
.about-me__img--container{
flex: 1;
display: flex;
align-items: center;
}
<!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>Annette</title>
<link rel="stylesheet" href="./css/styles.css">
<script src="https://kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="about-me">
<nav>
<div class="personal_logo">Annette</div>
<ul class="nav__link--list">
<li class="nav__Link">
<a href="#languages" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black"
>Languages</a>
</li>
<li class="nav__link">
<a href="#projects" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">
Projects</a>
</li>
<li class="nav__link">
<a href="" class=
"nav__link--anchor
nav__link--anchor-primary"
>Contact</a>
</li>
</ul>
</nav>
<div class="flex flex-1">
<div class=".about-me__info row"> <!--inside the row, there is 2 sections: infromation and image-->
<div class="about-me__info--container">
<figure class="about-me--picture--mask">
<img src="./images/Annette2.JPG" class= "about-me__picture" alt="Picture of Me!">
</figure> <!--this contains my image -->
<h1 class="about-me__info--title"> Hey! I'm <span class="text-pink">Jane Doe š </span> </h1>
<h1>
<p class="about-me__info--para">
I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees, I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development and designing projects on topics that Iām interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong>
</p>
<div class="about-me__links"></div>
<a href="" class="about-me__link">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-brands fa-github"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-inbox"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-file-pdf"></i>
</a>
</div>
</div>
<figure class="about-me__img--container">
<img src="./Assests/undraw_proud_coder_re_exuy.svg" alt="">
</figure>
</div>
</section>
</body>
</html>
Just need a little to fix the mark up. And to put the image in its own div, below the flex stuff.
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700&family=Poppins:wght#400;500;600&display=swap');
* {
color: black;
font-family: 'Lato', sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
span {
color: black;
text-align: center;
line-height: 1.25;
}
h1 {
font-size: 36px;
}
p {
line-height: 1.5;
font-size: 16px;
}
li {
list-style-type: none;
}
.flex {
display: flex;
/* this automatically aligns like columns or rows with auto width and auto height */
}
.flex-1 {
flex: 1;
/* this makes sure that it is the entire height of the page */
}
/* Navigation bar */
.row {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.text-pink {
color: #FF69B4;
}
nav {
height: 100px;
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__link--list {
display: flex;
}
.nav__link--anchor {
margin: 0 12px;
color: black;
text-decoration: none;
font-weight: 700;
}
.nav__link--anchor-primary {
background-color: #FF69B4;
padding: 8px 20px;
border-radius: 50px;
color: white;
transition: all 300ms ease;
}
.nav__link--anchor-primary:hover {
background-color: #FF69B4;
}
.personal_logo {
font-size: 20px;
color: #FF69B4;
margin: 0 12px;
font-weight: bold;
}
/* About mE */
#about-me {
min-height: 100vh;
/* entire height of the page */
display: flex;
flex-direction: column;
}
.about-me__info {
display: flex;
flex-direction: column;
}
.about-me__info--container {
display: flex;
flex-direction: column;
/* so it is not side-by-side */
align-items: center;
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.about-me--picture--mask {
width: 180px;
height: 180px;
border-radius: 100%;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0, 0, 0, 1);
margin-bottom: 20px;
}
.about-me__picture {
width: 100%;
transform: scale(1, 1.1);
padding-top: 7px;
}
.about-me__info--para {
font-size: 15px;
margin-bottom: 28px;
}
.about-me__info--title {
margin-bottom: 15px;
}
.about-me__link {
font-size: 20px;
color: #FF69B4;
text-decoration: none;
padding: 0 16px;
}
.about-me__img--container {
flex: 1;
display: flex;
align-items: center;
}
<!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>Annette</title>
<link rel="stylesheet" href="./css/styles.css">
<script src="https://kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="about-me">
<nav>
<div class="personal_logo">Annette</div>
<ul class="nav__link--list">
<li class="nav__Link">
<a href="#languages" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">Languages</a>
</li>
<li class="nav__link">
<a href="#projects" class="
nav__link--anchor
link__hover-effect
link_hover-effect--black">
Projects</a>
</li>
<li class="nav__link">
<a href="" class="nav__link--anchor
nav__link--anchor-primary">Contact</a>
</li>
</ul>
</nav>
<div class="flex flex-1">
<div class=".about-me__info row">
<!--inside the row, there is 2 sections: infromation and image-->
<div class="about-me__info--container">
<figure class="about-me--picture--mask">
<img src="./images/Annette2.JPG" class="about-me__picture" alt="Picture of Me!">
</figure>
<!--this contains my image -->
<h1 class="about-me__info--title"> Hey! I'm <span class="text-pink">Jane Doe š </span> </h1>
<p class="about-me__info--para">
I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees, I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development
and designing projects on topics that Iām interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong>
</p>
<div class="about-me__links">
<a href="" class="about-me__link">
<i class="fa-brands fa-linkedin"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-brands fa-github"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-inbox"></i>
</a>
<a href="" class="about-me__link">
<i class="fa-solid fa-file-pdf"></i>
</a>
</div>
</div>
</div>
</div>
<div>
<figure class="about-me__img--container" >
<img src="https://picsum.photos/200" alt="" style="margin: auto">
</figure>
</div>
</section>
</body>
</html>
So I'm making a menu interaction on click, this is my code snippet if you want to have a look.
let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
let labels = document.querySelector('.labels');
btn.onclick = function() {
icons.classList.toggle('active');
labels.classList.toggle('active');
}
body {
background: #222;
}
.trigger {
cursor: pointer;
}
nav {
position: absolute;
top: 30px;
right: 30px;
color: #222;
}
nav ul.icons {
background: #fff;
width: 60px;
height: 60px;
overflow: hidden;
border-radius: 60px;
transition: 1s ease;
}
nav ul.icons:hover {
height: 100%;
}
nav ul li {
list-style: none;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<nav>
<ul class="icons">
<li class="trigger">
<i class="fas fa-bars"></i>
</li>
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-users"></i></li>
<li><i class="fas fa-concierge-bell"></i></li>
<li><i class="fas fa-pen"></i></li>
<li><i class="fas fa-phone-alt"></i></li>
</ul>
</nav>
</body>
</html>
The issue that I have is that the transition property doesn't work well with height in CSS. Is there a problem that I didn't noticed, and is there a quick fix to it?
So the problem is that you try to transition the height to 100% - but CSS can't handle that right away.
Fast but problematic solution:
You could set the height in the :hover to a fixed amount, e.g. 100px.
But if you want to have a new item in there or change the size of the items, you would have to adjust the height manually.
What I would do:
First I would restructure the HTML a bit and move the trigger out of the item list:
<nav>
<button class="trigger">
<i class="fas fa-bars"></i>
</button>
<ul class="icons fas-container">
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-users"></i></li>
<li><i class="fas fa-concierge-bell"></i></li>
<li><i class="fas fa-pen"></i></li>
<li><i class="fas fa-phone-alt"></i></li>
</ul>
</nav>
Then I would adjust the CSS of the .icons:
(remove the height, add a max-height and adjust the transition)
nav ul.icons {
background: #fff;
width: 60px;
overflow: hidden;
border-radius: 60px;
max-height: 0;
transition: max-height 0.2s ease-out;
}
In the end I would let JavaScript take care of getting the max-height right.
On hover:
let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
btn.onmouseover = function () {
icons.style.maxHeight = icons.scrollHeight + "px";
}
btn.onmouseout = function () {
icons.style.maxHeight = null;
}
Or on click (if you would rather do that):
let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
btn.onclick = function() {
if (icons.style.maxHeight){
icons.style.maxHeight = null;
} else {
icons.style.maxHeight = icons.scrollHeight + "px";
}
}
Here are some (maybe) helpfull links:
https://www.w3schools.com/howto/howto_js_collapsible.asp
How can I transition height: 0; to height: auto; using CSS?
https://codepen.io/felipefialho/pen/ICkwe
Snippet:
let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
btn.onmouseover = function () {
icons.style.maxHeight = icons.scrollHeight + "px";
}
btn.onmouseout = function () {
icons.style.maxHeight = null;
}
body {
background: #222;
}
.trigger {
cursor: pointer;
}
nav {
position: absolute;
top: 30px;
right: 30px;
color: #222;
}
nav ul.icons {
background: #fff;
width: 60px;
overflow: hidden;
border-radius: 60px;
max-height: 0;
transition: max-height 0.2s ease-out;
}
nav ul.icons:hover {
height: 100%;
}
nav ul li {
list-style: none;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<nav>
<button class="trigger">
<i class="fas fa-bars"></i>
</button>
<ul class="icons fas-container">
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-users"></i></li>
<li><i class="fas fa-concierge-bell"></i></li>
<li><i class="fas fa-pen"></i></li>
<li><i class="fas fa-phone-alt"></i></li>
</ul>
</nav>
</body>
</html>
The CSS transition of the "height" property works only if both values āā(starting and ending) are specified.
You can get around this by using "max-height" instead of "height". This way you can safely exceed the exact height that the element should have at the end of the transition.
let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
let labels = document.querySelector('.labels');
btn.onclick = function() {
icons.classList.toggle('active');
labels.classList.toggle('active');
}
body {
background: #222;
}
.trigger {
cursor: pointer;
}
nav {
position: absolute;
top: 30px;
right: 30px;
color: #222;
}
nav ul.icons {
background: #fff;
width: 60px;
max-height: 60px;
overflow: hidden;
border-radius: 60px;
transition: max-height 1s ease;
}
nav ul.icons:hover {
max-height: 120px;
}
nav ul li {
list-style: none;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<nav>
<ul class="icons">
<li class="trigger">
<i class="fas fa-bars"></i>
</li>
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-users"></i></li>
<li><i class="fas fa-concierge-bell"></i></li>
<li><i class="fas fa-pen"></i></li>
<li><i class="fas fa-phone-alt"></i></li>
</ul>
</nav>
</body>
</html>
The only side effect could be too much delay in the return transition if you set a final value that is too high compared to what is needed.
Just a very basic snippet of what you wanted to create on the first place.
[NOTE] : Transition is quite/bit cranky (not smooth). But it is what it is.
document.querySelector('.menu').addEventListener('click', (e) => {
document.querySelector('ul.icons').classList.toggle('active');
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.navbar {
position: relative;
width: 100%;
height: 100px;
display: flex;
padding: 0 4rem;
align-items: center;
justify-content: flex-end;
background-color: #f7f8f9;
border-bottom: 1px solid #c1c1c1;
}
.navbar .menu i {
cursor: pointer;
font-size: 2rem;
}
.navbar .icons {
opacity: 0;
list-style: none;
position: absolute;
top: calc(100% + 2px);
right: 3rem;
display: flex;
flex-direction: column;
transition: opacity 250ms ease;
}
.navbar .icons .icon {
display: grid;
padding: 1rem;
flex-shrink: 0;
min-width: 30px;
min-height: 30px;
border-radius: 50%;
place-items: center;
background-color: #f7f8f9;
border: 1px solid #c1c1c1;
transition: margin-top 250ms ease;
}
.navbar .icons .icon:not(:first-of-type) {
margin-top: 1rem;
}
.navbar .icons .icon:nth-child(2) {
margin-top: -62px;
}
.navbar .icons .icon:nth-child(3) {
margin-top: -62px;
}
.navbar .icons .icon:nth-child(4) {
margin-top: -62px;
}
.navbar .icons .icon:nth-child(5) {
margin-top: -62px;
}
.navbar .icons.active {
opacity: 1;
}
.navbar .icons.active .icon {
margin-top: 1rem;
}
.navbar .icons.active .icon:nth-child(1) {
margin-top: 0;
transition-delay: 250ms;
}
.navbar .icons.active .icon:nth-child(2) {
transition-delay: 250ms;
}
.navbar .icons.active .icon:nth-child(2) {
transition-delay: 500ms;
}
.navbar .icons.active .icon:nth-child(3) {
transition-delay: 750ms;
}
.navbar .icons.active .icon:nth-child(4) {
transition-delay: 1s;
}
.navbar .icons.active .icon:nth-child(5) {
transition-delay: 1.25s;
}
.bx {
font-size: 1.75rem;
}
<link href='https://unpkg.com/boxicons#2.0.9/css/boxicons.min.css' rel='stylesheet'>
<nav class="navbar">
<div class="menu" role="button">
<i class='bx bx-menu'></i>
</div>
<ul class="icons">
<li class="icon">
<i class='bx bx-home-alt'></i>
</li>
<li class="icon">
<i class='bx bx-user'></i>
</li>
<li class="icon">
<i class='bx bx-bell'></i>
</li>
<li class="icon">
<i class='bx bx-pen'></i>
</li>
<li class="icon">
<i class='bx bx-phone'></i>
</li>
</ul>
</nav>
If anyone can make this transition a bit more smooth edit this answer.
How do I vertically stack and align icons with their respective text, and horizontally align them center? And make it all mobile-responsive?
My attempt
li {
margin: 0 90px;
display: inline;
}
.num {
margin: 0 150px;
display: inline;
}
ul {
list-style: none outside none;
margin: 0;
padding: 50;
text-align: center;
}
ul li i {
text-align: center;
}
<!-- script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<ul>
<li><i class="fas fa-phone">
</i>
</li>
<li><i class="fas fa-map">
</i>
</li>
<li><i class="fas fa-paper-plane">
</i>
</li>
</ul>
<ul class="num">
<li>Call (555)123-4567</li>
<li>Box 564, Disneyland</li>
<li> Email.com </li>
</ul>
I hope this what you are looking for.
ul {
display:flex;
}
ul li i{
padding:10px;
}
ul li {
display:flex;
flex:1;
padding:20px;
flex-direction:column;
text-align:center;
}
#media only screen and (max-width: 600px){
ul {
flex-direction:column;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<ul>
<li>
<i class="fas fa-phone"></i>
Call (555)123-4567
</li>
<li>
<i class="fas fa-map"> </i>
<span>Box 564, Disneyland<span>
</li>
<li>
<i class="fas fa-paper-plane"></i>
Email.com
</li>
</ul>
</body>
</html>
You can use a flexbox wrapper with flex-direction row which switches to column using a media query and you could use flexboxes with flex-direction column for each item.
#flexwrapper {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
.flexbox {
width: 120px;
margin: 20px;
display: flex;
align-items: center;
flex-direction: column;
font-family: sans-serif;
font-size: 10px;
}
a {
color: #569;
text-decoration: none;
}
i {
padding: 10px;
border-radius: 100%;
background: #569;
color: white;
}
#media only screen and (max-width: 480px){
#flexwrapper {
flex-direction: column;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div id="flexwrapper">
<div class="flexbox">
<p><i class="fas fa-phone"></i></p>
<p>Call (555)123-4567</p>
</div>
<div class="flexbox">
<p><i class="fas fa-map"></i></p>
<p>Box 564, Disneyland</p>
</div>
<div class="flexbox">
<p><i class="fas fa-paper-plane"></i></p>
<p> Email.com </p>
</div>
</div>
I want to make a contact form, but my text is not displayed when I press "Submit". And my error is Cannot set property "innerHTML" of undefined. Its an external file.
I add under my code. All my external files. If you have any advice just type it, thanks :D (sorry for my bad english i'm trying to improve it)
function validation() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var message = document.getElementById("message").value;
var error_message = document.getElementById("error_message").value;
var text;
error_message.style.padding = "10px";
if (name.length < 5 ) {
text = "Te rog sa introduci un nume valid";
error_message.innerHTML = text;
return false;
}
if (message.length <= 50) {
text = "Te rog sa introduci minim 50 de caractere";
error_message.innerHTML = text;
return false;
}
if(email.indexOf('#') || email.length < 6) {
text = "Te rog sa introduci un email valid";
error_message.innerHTML = text;
return false;
}
alert("S-a trimis cu succes!");
return true;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:wght#800&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-family: 'Gloria Hallelujah', cursive;
--text-primary: #b6b6b6;
--text-secondary: #ececec;
--bg-primary: #23232e;
--bg-secondary: #141418;
}
body {
font-family: 'Gloria Hallelujah', cursive;
background-color: #363535;
display: flex;
}
.main {
margin-left: 5rem; /* 1 rem = 16 px => 5 rem = 80px */
padding: 1rem;
max-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-track {
background: #757d77;
}
body::-webkit-scrollbar-thumb {
background: #c2c2c2;
}
.navbar {
width: 5rem;
height: 100vh;
position: fixed;
background-color: #2e2e2e;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
margin-top: 225px;
}
.nav-item {
font-size: 30px;
text-align: center;
width: 85%;
padding: 10px
}
ul {
list-style-type: none;
}
li a {
display: block;
text-decoration:0;
color:#b6b8ba;
}
.nav-link {
align-items: center;
height: 3rem;
text-decoration: none;
}
.secnav-item {
font-size: 30px;
text-align: center;
padding: 5px;
width: 85%
}
.secnavbar {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
margin-top: 50px;
}
.imgnav {
margin-top: 10px;
margin-left: 27px;
position: absolute;
}
.copy {
color: white;
position: absolute;
margin-left: 50px;
}
.contact-section {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.contact-info {
position: relative;
color: #fff;
max-width: 500px;
line-height: 95px;
padding-left: 50px;
font-size: 18px;
top: 50px;
}
.contact-info i {
margin-right: 20px;
font-size: 25px;
}
.contact-form {
max-width:700px;
margin-right: 50px;
position: relative;
top: 50px;
left: 100px;
}
.contact-info, .contact-form {
flex: 1;
}
.contact-form h2 {
color: #fff;
text-align: center;
font-size: 35px;
text-transform: uppercase;
margin-bottom: 30px;
font-family: 'Poppins', sans-serif;
}
.contact-form .text-box {
background: #b8b8b8;
color: #fff;
border: none;
width: calc(50% - 10px);
height: 50px;
padding: 12px;
font-size: 15px;
border-radius: 5px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
margin-bottom: 20px;
opacity: 0.9;
}
.contact-form .text-box:first-child {
margin-right: 15px;
}
.contact-form textarea {
background: #b8b8b8;
color: #fff;
border: none;
width: 100%;
padding: 12px;
font-size: 15px;
min-height: 200px;
max-height: 400px;
resize: vertical;
border-radius: 5px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
margin-bottom: 20px;
opacity: 0.9;
}
.contact-form .send-btn {
float: right;
background: #261010;
color: #fff;
border: none;
width: 120px;
height: 40px;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
transition-property: background;
}
.contact-form .send-btn:hover {
background: #ff2a00;
}
#error_message {
padding: 0;
background: #d60000;
margin-bottom: 2px;
text-align: center;
font-size: 15px;
transition: all 0.5s ease;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Constantin Bogdan-Teodor</title>
<link rel="icon" href="https://icon-library.com/images/b-icon/b-icon-7.jpg" type = "image/x-icon">
<link rel="stylesheet" href="contactme.css" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet"
<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/af8a8677c5.js" crossorigin="anonymous"></script>
<script src="contact.js"></script>
</head>
<body>
<div class="navbar">
<div class="copy">
Ā©
</div>
<div class="imgnav">
<a href="home.html">
<svg id="logos" width="27" height="37" viewBox="0 0 27 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.96094 36H0.960938V37H1.96094V36ZM1.96094 1.875V0.875H0.960938V1.875H1.96094ZM21.4609 4.17188L20.8252 4.94381L20.8284 4.94641L21.4609 4.17188ZM22.9141 15.2109L23.7165 15.8077L23.7201 15.8027L22.9141 15.2109ZM19.2109 18.0469L18.8159 17.1282L16.2139 18.2471L18.9416 19.0099L19.2109 18.0469ZM23.5703 21L22.763 21.5903L22.7703 21.6L23.5703 21ZM6.46094 20.0391V19.0391H5.46094V20.0391H6.46094ZM6.46094 32.3203H5.46094V33.3203H6.46094V32.3203ZM18.8359 30.7031L19.5033 31.4479L19.5038 31.4474L18.8359 30.7031ZM6.46094 16.4297H5.46094V17.4297H6.46094V16.4297ZM17.9688 14.9531L17.3305 14.1832L17.3256 14.1874L17.9688 14.9531ZM18.1094 6.86719L17.4915 7.65354L17.4986 7.65897L18.1094 6.86719ZM6.46094 5.57812V4.57812H5.46094V5.57812H6.46094ZM2.96094 36V1.875H0.960938V36H2.96094ZM1.96094 2.875H13.1172V0.875H1.96094V2.875ZM13.1172 2.875C16.707 2.875 19.219 3.62101 20.8252 4.94381L22.0966 3.39994C19.9841 1.66024 16.9336 0.875 13.1172 0.875V2.875ZM20.8284 4.94641C22.4161 6.243 23.2734 8.1903 23.2734 10.9688H25.2734C25.2734 7.7472 24.2558 5.16325 22.0935 3.39734L20.8284 4.94641ZM23.2734 10.9688C23.2734 12.3589 22.8829 13.5637 22.108 14.6191L23.7201 15.8027C24.7578 14.3894 25.2734 12.7661 25.2734 10.9688H23.2734ZM22.1116 14.6142C21.3226 15.6753 20.2364 16.5174 18.8159 17.1282L19.606 18.9655C21.3104 18.2326 22.693 17.1841 23.7165 15.8076L22.1116 14.6142ZM18.9416 19.0099C20.584 19.4692 21.8417 20.3302 22.7631 21.5902L24.3775 20.4098C23.1739 18.7636 21.5253 17.6558 19.4803 17.0838L18.9416 19.0099ZM22.7703 21.6C23.704 22.8449 24.1875 24.3469 24.1875 26.1562H26.1875C26.1875 23.9656 25.5929 22.0301 24.3703 20.4L22.7703 21.6ZM24.1875 26.1562C24.1875 28.9817 23.2838 31.0955 21.5495 32.625L22.8724 34.125C25.1068 32.1545 26.1875 29.4558 26.1875 26.1562H24.1875ZM21.5495 32.625C19.8059 34.1627 17.2688 35 13.7969 35V37C17.5749 37 20.6472 36.0873 22.8724 34.125L21.5495 32.625ZM13.7969 35H1.96094V37H13.7969V35ZM5.46094 20.0391V32.3203H7.46094V20.0391H5.46094ZM6.46094 33.3203H13.8906V31.3203H6.46094V33.3203ZM13.8906 33.3203C16.1558 33.3203 18.0678 32.7343 19.5033 31.4479L18.1686 29.9584C17.1979 30.8282 15.8129 31.3203 13.8906 31.3203V33.3203ZM19.5038 31.4474C20.9693 30.1322 21.6641 28.3421 21.6641 26.2031H19.6641C19.6641 27.8766 19.1401 29.0865 18.168 29.9589L19.5038 31.4474ZM21.6641 26.2031C21.6641 23.9717 21.0535 22.1207 19.6652 20.844C18.2927 19.5819 16.3296 19.0391 13.9609 19.0391V21.0391C16.061 21.0391 17.4495 21.5236 18.3114 22.3162C19.1574 23.0941 19.6641 24.3251 19.6641 26.2031H21.6641ZM13.9609 19.0391H6.46094V21.0391H13.9609V19.0391ZM6.46094 17.4297H13.2578V15.4297H6.46094V17.4297ZM13.2578 17.4297C15.3931 17.4297 17.2135 16.8935 18.6119 15.7188L17.3256 14.1874C16.3803 14.9815 15.06 15.4297 13.2578 15.4297V17.4297ZM18.6069 15.723C20.047 14.5293 20.75 12.8987 20.75 10.9453H18.75C18.75 12.3669 18.2655 13.4082 17.3306 14.1832L18.6069 15.723ZM20.75 10.9453C20.75 8.87908 20.1402 7.17082 18.7202 6.07541L17.4986 7.65897C18.2661 8.25105 18.75 9.26155 18.75 10.9453H20.75ZM18.7272 6.08087C17.3786 5.02127 15.4493 4.57812 13.1172 4.57812V6.57812C15.2538 6.57812 16.6526 6.99435 17.4916 7.65351L18.7272 6.08087ZM13.1172 4.57812H6.46094V6.57812H13.1172V4.57812ZM5.46094 5.57812V16.4297H7.46094V5.57812H5.46094Z" fill="white"/>
</svg>
</a>
</div>
<ul class="navbar-nav">
<li class="nav-item">
<a href="home.html" class="nav-link">
<i class="fas fa-home"></i>
</a>
</li>
<li class="nav-item">
<a href="aboutme.html" class="navbar-link">
<i class="far fa-user"></i>
</a>
</li>
<li class="nav-item">
<a href="goals.html" class="navbar-link">
<i class="fas fa-bullseye"></i>
</a>
</li>
<li class="nav-item">
<a href="stiaica.html" class="navbar-link">
<i class="fas fa-code"></i>
</a>
</li>
<li class="nav-item">
<a href="contactme.html" class="navbar-link">
<i class="fas fa-at"></i>
</a>
</li>
</ul>
<div class="secondnav">
<ul class="secnavbar">
<li class="secnav-item">
<a href="https://www.facebook.com/bogdan.teodor.148/" target="_blank" class="secnavbar-link">
<i class="fab fa-facebook"></i>
</a>
</li>
<li class="secnav-item">
<a href="https://www.instagram.com/bogdanteodor1/" target="_blank" class="secnavbar-link">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="contact-section">
<div class="contact-info">
<div><i class="fas fa-map-marker-alt"></i>Str. Avram Iancu nr16, Ors. Cernavoda, jud. CT</div>
<div><i class="fas fa-envelope"></i>bogdan.constantin0110#gmail.com</div>
<div><i class="fas fa-phone"></i>+40769881692</div>
<div><i class="fas fa-university"></i>Universitatea Tehnica Gheorghe Asachi</div>
</div>
<div class="contact-form">
<h2>Contacteaza-ma</h2>
<div id="error_message"></div>
<form class="contact" onsubmit=" return validation()">
<input type="text" name="name" class="text-box" id="name" placeholder="Nume complet">
<input type="" name="email" class="text-box" id="email" placeholder="Email">
<textarea name="message" id="message" rows="5" placeholder="Mesajul tau"></textarea>
<input type="submit" class="send-btn">
</form>
</div>
</div>
</div>
</body>
</html>
I think that you cant write this line of code like this var error_message = document.getElementById("error_message").value;
It should be var error_message = document.getElementById("error_message");
Because you dont need value of div you only need div.
How do I make html content appear over the entire web page that says something like 'Hey! You've won' but the background of this content should be translucent showing the actual webPage behind?
I have designed a webPage called Memory Game, that allows a user to match its contents by unfliping the deck contents and I wanted the 'Congratulations' message to be printed over it when the user has finished matching all of it. Below is my code:
$(document).ready(function() {
var click = 1,totalClicks = 0, className1 = '',className2 = '',firstClick='',secondClick='',match=0;
$(".moves").html(totalClicks);
var deck = document.querySelector(".deck");
for (var i = deck.children.length; i >= 0; i--) {
deck.appendChild(deck.children[Math.random() * i | 0]);
}
$(".card").click(function() {
if (!$(this).hasClass("open")) {
totalClicks++;
$(".moves").html(totalClicks);
if (click === 1) {
$(this).addClass("open show");
$(this).attr('id', 'card1');
className1 = $(this).children().attr('class');
firstClick=$(this);
} else if (click === 2) {
$(this).addClass("open show");
className2 = $(this).children().attr('class');
if(className1===className2)
{
match++;
$(this).unbind("click");
firstClick.unbind("click");
}
unflip();
}
if (click === 1) {
click++;
} else {
click = 1;
}
}
else{
$(this).removeClass("open");
$(this).removeClass("show");
}
});
$(".restart").click(function() {
totalClicks = 0;
$(".moves").html(totalClicks);
$("ul.deck>li").removeClass("open");
$("ul.deck>li").removeClass("show");
var deck = document.querySelector(".deck");
for (var i = deck.children.length; i >= 0; i--) {
deck.appendChild(deck.children[Math.random() * i | 0]);
}
});
if(match===8)
{
/* This is where the 'Congragulations message must be show over the web page' */
}
function unflip() {
if (className1 !== className2) {
setTimeout(removeClasses, 1000);
function removeClasses() {
$("ul.deck>li").removeClass("open");
$("ul.deck>li").removeClass("show");
}
}
}
});
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #ffffff url('../img/geometry2.png'); /* Background pattern from Subtle Patterns */
font-family: 'Coda', cursive;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
/*
* Styles for the deck of cards
*/
.deck {
width: 660px;
min-height: 680px;
background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%);
padding: 32px;
border-radius: 10px;
box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0 0 3em;
}
.deck .card {
height: 125px;
width: 125px;
background: #2e3d49;
font-size: 0;
color: #ffffff;
border-radius: 8px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}
.deck .card.open {
transform: rotateY(0);
background: #02b3e4;
cursor: default;
}
.deck .card.show {
font-size: 33px;
}
.deck .card.match {
cursor: default;
background: #02ccba;
font-size: 33px;
}
/*
* Styles for the Score Panel
*/
.score-panel {
text-align: left;
width: 345px;
margin-bottom: 10px;
}
.score-panel .stars {
margin: 0;
padding: 0;
display: inline-block;
margin: 0 5px 0 0;
}
.score-panel .stars li {
list-style: none;
display: inline-block;
}
.score-panel .restart {
float: right;
cursor: pointer;
}
.fa.fa-star,.fa.fa-repeat{
font-size: 25px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Memory Game</title>
<meta name="description" content="">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="container">
<header>
<h1>Memory Game</h1>
</header>
<section class="score-panel">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<span class="moves"></span> Moves
<div class="restart">
<i class="fa fa-repeat"></i>
</div>
</section>
<ul class="deck">
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
</ul>
</div>
<script src="js/app.js"></script>
</body>
</html>
Figured out the solution. A different section must be added in the html whose display must be set to none.
The display can be toggled using jQuery. Below is the solution. Added a new section with class overlay, whose display is set to none it is then toggled in the java script:
$(document).ready(function() {
var click = 1,totalClicks = 0, className1 = '',className2 = '',firstClick='',secondClick='',match=0;
shuffle();
$(".moves").html(totalClicks);
$(".card").click(function() {
if (!$(this).hasClass("open")) {
totalClicks++;
$(".moves").html(totalClicks);
if (click === 1) {
$(this).addClass("open show");
/* $(this).attr('id', 'card1'); */
className1 = $(this).children().attr('class');
firstClick=$(this);
} else if (click === 2) {
$(this).addClass("open show");
className2 = $(this).children().attr('class');
secondClick=$(this);
if(className1===className2)
{
match++;
console.log(match);
secondClick.unbind("click");
firstClick.unbind("click");
firstClick.addClass("match");
secondClick.addClass("match");
}
if(match===1)
{
console.log('match is now 8');
/*document.getElementById("overlay").style.display="block";*/
$("#overlay").css("display","block");
$(".text").hide().html('Yaay!! You\'ve Won!!!!').fadeIn('slow');
}
unflip();
}
if (click === 1) {
click++;
} else {
click = 1;
}
}
else{
click=1;
$(this).removeClass("open");
$(this).removeClass("show");
}
});
$(".restart").click(function() {
$(this).children().addClass('refresh').delay(200).queue(function(next){
$(this).removeClass('refresh');
next();
});
totalClicks = 0;
$(".moves").html(totalClicks);
$("ul.deck>li").removeClass("open");
$("ul.deck>li").removeClass("show");
$("ul.deck>li").removeClass("match");
var deck = document.querySelector(".deck");
for (var i = deck.children.length; i >= 0; i--) {
deck.appendChild(deck.children[Math.random() * i | 0]);
}
});
$(".restart-overlay").click(function(){
$("#overlay").css("display","none");
totalClicks = 0;
$(".moves").html(totalClicks);
$("ul.deck>li").removeClass("open show match");
shuffle();
});
function unflip() {
if (className1 !== className2) {
setTimeout(removeClasses, 1000);
}
}
function removeClasses() {
firstClick.removeClass("open");
firstClick.removeClass("show");
secondClick.removeClass("open");
secondClick.removeClass("show");
}
function shuffle(){
var deck = document.querySelector(".deck");
for (var i = deck.children.length; i >= 0; i--) {
deck.appendChild(deck.children[Math.random() * i | 0]);
}
}
});
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #ffffff url('../img/geometry2.png'); /* Background pattern from Subtle Patterns */
font-family: 'Coda', cursive;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
/*
* Styles for the deck of cards
*/
.deck {
width: 660px;
min-height: 680px;
background: linear-gradient(160deg, #02ccba 0%, #aa7ecd 100%);
padding: 32px;
border-radius: 10px;
box-shadow: 12px 15px 20px 0 rgba(46, 61, 73, 0.5);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin: 0 0 3em;
}
.deck .card {
height: 125px;
width: 125px;
background: #2e3d49;
font-size: 0;
color: #ffffff;
border-radius: 8px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}
.deck .card.open {
transform: rotateY(0);
background: #02b3e4;
cursor: default;
}
.deck .card.show {
font-size: 33px;
}
.deck .card.match {
cursor: default;
background: #02ccba;
font-size: 33px;
}
/*
* Styles for the Score Panel
*/
.score-panel {
text-align: left;
width: 345px;
margin-bottom: 10px;
}
.score-panel .stars {
margin: 0;
padding: 0;
display: inline-block;
margin: 0 5px 0 0;
}
.score-panel .stars li {
list-style: none;
display: inline-block;
}
.score-panel .restart {
float: right;
cursor: pointer;
}
.fa.fa-star-o{
font-size: 28px;
}
.fa.fa-repeat{
font-size: 25px;
}
.refresh{
text-shadow:3px 3px 3px #272634;
}
#overlay {
position: fixed; /* Sit on top of the page content */
display: none; /* Hidden by default */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
cursor: pointer; /* Add a pointer on hover */
}
.text{
font-size: 60px;
color: yellow;
font-family:fantasy;
font-style: italic;
font-weight: bold;
position: absolute;
top: 50%;
left: 35%;
height: 30%;
width: 50%;
}
#overlay{
height: 100%;
width:100%;
}
.restart-overlay{
position: absolute;
top: 65%;
left: 50%;
height: 50%;
width: 50%;
}
.fa.fa-repeat.playagain{
font-color: grey;
font-size: 35px;
text-shadow:3px 3px 3px #272634;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Memory Game</title>
<meta name="description" content="">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section id="overlay">
<section class="text"></section>
<section class="restart-overlay">
<i class="fa fa-repeat playagain"></i>
</section>
</section>
<section class="container">
<header>
<h1>Memory Game</h1>
</header>
<section class="score-panel">
<ul class="stars">
<li><i class="fa fa-star-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
</ul>
<span class="moves"></span> Moves
<section class="restart">
<i class="fa fa-repeat"></i>
</section>
</section>
<ul class="deck">
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
<li class="card">
<i class="fa fa-anchor"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-diamond"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-leaf"></i>
</li>
<li class="card">
<i class="fa fa-bomb"></i>
</li>
<li class="card">
<i class="fa fa-bolt"></i>
</li>
<li class="card">
<i class="fa fa-bicycle"></i>
</li>
<li class="card">
<i class="fa fa-paper-plane-o"></i>
</li>
<li class="card">
<i class="fa fa-cube"></i>
</li>
</ul>
</section>
<script src="js/app.js"></script>
</body>
</html>