I am trying to get multiple dropdown menu's next to each other, however I am running into a problem. I have the two categories I want to have as dropdown in the header, however only 1 of them seems to work. With the non-working dropdown menu nothing happens when I click on it.
let click = document.querySelector('.click');
let list = document.querySelector('.list');
click.addEventListener("click", () => {
list.classList.toggle('newlist');
});
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.header {
width: 100%;
height: 100px;
display: block;
background-color: #F6D604;
border-bottom: 3px solid black;
}
.header img {
float: left;
width: 180px;
padding: 7px 20px;
height: 80%;
background: transparent;
}
img {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
.inner_header {
width: 90%;
height: 100%;
display: block;
margin: 0 auto;
}
.container {
float: right;
text-align: center;
height: 100%;
padding: 25px 5px;
display: block;
border-color: black;
}
.click {
background-color: #F6D604;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-color: black;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
border-radius: 10px;
}
.click:hover {
background-color: #F6D604;
}
.links {
border: none;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-radius: 7px;
}
.list {
position: absolute;
transform: scaleY(0);
transform-origin: top;
transition: 0.3s;
width: 150px;
border-radius: 10px;
border: 2px solid black;
background-color: #fdfdfd;
}
.newlist {
transform: scaleY(1);
border-radius: 10px;
border: 2px solid black;
}
.links {
background-color: #fdfdfd;
border-color: black;
}
.links:hover {
background-color: #F6D604;
}
<div class="header">
<div class="inner_header">
<a href="../project/index.html">
<div class="logo_container">
<img src="assets/images/LOGO.png" alt="logo" />
</div>
</a>
<div class="container">
<button class="click">About</button>
<div class="list">
<button class="links">About us</button>
<button class="links">Contact us</button>
</div>
<button class="click">Language</button>
<div class="list">
<button class="links">EN</button>
<button class="links">NL</button>
</div>
</div>
</div>
</div>
querySelector will pick up the first matching element, whereas querySelectorAll will get a collection of all matching elements. You need to iterate through the elements to apply the listener. This solution clears out any open nav menus when the other is clicked. Also, it makes use of the [...] spread operator to iterate through elements. I added a new class navitem so that each submenu would show where it should.
let click = document.querySelectorAll('.click');
let list = document.querySelectorAll('.list');
const showSub = (e) => {
[...list].forEach(el => el.classList.remove('newlist')); // reset
e.target.parentNode.querySelector('.list').classList.toggle('newlist');
// this also works
//e.target.nextElementSibling.classList.toggle('newlist');
}
[...click].forEach(el => el.addEventListener("click", showSub));
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.header {
width: 100%;
height: 100px;
display: block;
background-color: #F6D604;
border-bottom: 3px solid black;
}
.header img {
float: left;
width: 180px;
padding: 7px 20px;
height: 80%;
background: transparent;
}
img {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
.inner_header {
width: 90%;
height: 100%;
display: block;
margin: 0 auto;
}
.container {
float: right;
text-align: center;
height: 100%;
padding: 25px 5px;
display: block;
border-color: black;
}
.click {
background-color: #F6D604;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-color: black;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
border-radius: 10px;
}
.navitem {
width: 150px;
display: inline-block;
}
.click:hover {
background-color: #F6D604;
}
.links {
border: none;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-radius: 7px;
}
.list {
position: absolute;
transform: scaleY(0);
transform-origin: top;
transition: 0.3s;
width: 150px;
border-radius: 10px;
border: 2px solid black;
background-color: #fdfdfd;
}
.newlist {
transform: scaleY(1);
border-radius: 10px;
border: 2px solid black;
}
.links {
background-color: #fdfdfd;
border-color: black;
}
.links:hover {
background-color: #F6D604;
}
<div class="header">
<div class="inner_header">
<a href="../project/index.html">
<div class="logo_container">
<img src="assets/images/LOGO.png" alt="logo" />
</div>
</a>
<div class="container">
<div class='navitem'>
<button class="click">About</button>
<div class="list">
<button class="links">About us</button>
<button class="links">Contact us</button>
</div>
</div>
<div class='navitem'>
<button class="click">Language</button>
<div class="list">
<button class="links">EN</button>
<button class="links">NL</button>
</div>
</div>
</div>
</div>
</div>
The way querySelector works, is it returns the first matching DOM element. In your case, because you use the click class for both buttons, the listener is only attached to the first one. Check out relevant documentation (at the return value header).
In this case I would suggest either using two classes and adding listeners to both separately, or accessing both buttons using someting like:
let clicks = document.querySelectorAll('.click');
for (let click of clicks) {
click.addEventListener("click",()=>{
list.classList.toggle('newlist');
});
}
You need a forEach to address every button-list pair.
I believe the below code solves your JavaScript issues. Adjust the CSS as needed (I have changed the original HTML a little).
let drops = document.querySelectorAll('.drop');
drops.forEach(function(drop) {
let click = drop.querySelector('.click');
let list = drop.querySelector('.list');
click.addEventListener("click", () => {
list.classList.toggle('newlist');
});
});
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.header {
width: 100%;
height: 100px;
display: block;
background-color: #F6D604;
border-bottom: 3px solid black;
}
.header img {
float: left;
width: 180px;
padding: 7px 20px;
height: 80%;
background: transparent;
}
img {
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
.inner_header {
width: 90%;
height: 100%;
display: block;
margin: 0 auto;
}
.container {
text-align: center;
height: 100%;
padding: 25px 5px;
display: block;
border-color: black;
}
.drop {
width: 150px;
float: right;
padding: 0 5px;
}
.click {
background-color: #F6D604;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-color: black;
outline: none;
width: 100%;
color: rgb(0, 0, 0);
transition: 0.3s;
border-radius: 10px;
}
.click:hover {
background-color: #F6D604;
}
.links {
border: none;
outline: none;
width: 150px;
color: rgb(0, 0, 0);
transition: 0.3s;
padding: 12px;
font-size: 1.2em;
font-family: sans-serif;
border-radius: 7px;
}
.list {
position: absolute;
transform: scaleY(0);
margin-top: 1px;
transform-origin: top;
transition: 0.3s;
width: 150px;
border-radius: 10px;
border: 2px solid black;
background-color: #fdfdfd;
}
.newlist {
transform: scaleY(1);
border-radius: 10px;
border: 2px solid black;
}
.links {
background-color: #fdfdfd;
border-color: black;
}
.links:hover {
background-color: #F6D604;
}
<div class="header">
<div class="inner_header">
<a href="../project/index.html">
<div class="logo_container">
<img src="assets/images/LOGO.png" alt="logo" />
</div>
</a>
<div class="container">
<div class="drop">
<button class="click">Language</button>
<div class="list">
<button class="links">EN</button>
<button class="links">NL</button>
</div>
</div>
<div class="drop">
<button class="click">About</button>
<div class="list">
<button class="links">About us</button>
<button class="links">Contact us</button>
</div>
</div>
</div>
</div>
</div>
Related
I currently have a gallery of my portfolio set-up. Once you click on the image, it makes a pop-up. Inside of the pop-up is the image and text describing the design, copywriting ect. Once you hover over the image, it zooms. My problem is that one or two of the images, on css hover transform scale, scales to such a size that it is outside of the viewing port of the browser. It is in rectangular form, where other designs are only square. I would like the user of the website to move their cursor up and have the image move with the cursor, so the user can see the top of the image, and then have the user move their cursor down to the bottom of the image and have the image move with the cursor so that the user can see the bottom of the image. I have no idea how to do this, and I've searched everywhere but I can not find anything useful. I think it might use background-image and java-script but I really need help since I don't have knowledge of this.
html:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/mainwebsite.css">
<link rel="stylesheet" href="CSS/fonts/futura_bold_stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_book_stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_light_bt-stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_light_italic_stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_medium_stylesheet.css">
<script defer src="javascript/POPUP.js"></script>
<script src="javascript/Filters.js" defer></script>
<script defer src="javascript/tothetop.js"></script>
<script defer src="javascript/moveimage.js"></script>
<meta charset="utf-8">
<title>Ilana's creations</title>
</head>
<body class="helpme">
<div class="container">
<div class="mainnavbar">
<div class="navbar_left">
<p class="nav">
<a class="current" href="index.html">
CREATIONS
</a>
</p>
<p class="nav">
<a href="aboutme.html">
ABOUT ME
</a>
</p>
<p class="nav">
<a href="sayhi.html">
SAY HI!
</a>
</p>
</div>
<div class="navbar_right">
<p class="nav1">
<a href= target="_blank">
<img src="images/LI-In-Bug.png" alt="LinkedIn" class="icon" style="width:20px;height:20px">
</a>
</p>
<p class="nav1">
Ilana van Rooyen
</p>
</div>
</div>
<div class="searchbar" id="filtering">
<button class="searchbarbuttons active" onclick="filterSelection('all')">
ALL
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('design')">
DESIGN
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('copy')">
COPYWRITING
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('creativewriting')">
CREATIVE WRITING
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('videos')">
VIDEOS
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('socialmedia')">
SOCIAL MEDIA MANAGEMENT
</button>
</div>
<div class="case">
<!-- MODAL 22 BIGGER IMAGES -->
<div class="nobutton design" data-modal-target="#modal22">
<img src="Images/ZoetisMap_Pres.png" alt="ZoetisMap" width="250px" height="250px" class="gallerypics">
</div>
<div class="modal2" id="modal22" style="width: 50%; height: auto">
<div id="scroll">
<img src="Images/ZoetisMap_Design.png" alt="ZoetisMap" class="IMG3" style="width: 40%; height: 40%">
</div>
<div class="containerDB">
<div class="DESC">
<p class="DESC_text">
<strong class="title">
Layout design:
</strong>
Ilana van Rooyen
</p>
<p class="DESC_text">
<strong class="title">
Company:
</strong>
Agribonus
</p>
<p class="DESC_text">
<strong class="title">
Brief:
</strong>
Design a layout for an article provided by Zoetis for the Bonus magazine.
</p>
</div>
<div class="buttonclose">
<button data-close-button class="closebutton">
CLOSE
</button>
</div>
</div>
</div>
<!-- OVERLAY JAVA -->
<div id="overlay">
</div>
<!-- CLOSE DIV CASE -->
</div>
<div onclick="topFunction()" id="myBtn"><img src="images/outline_expand_circle_down_black_24dp.png" alt="tothetop" height="80%" width="80%"></div>
<div class="madewithlove" id="footer">
<p class="love"><i> This website was made by me, with a lot of <b>love</b>, a lot of <b>googling</b>, and a lot of <b>banging my head on the table</b> (I'm fine, thanks).</i></p>
</div>
<!-- CLOSE DIV CONTAINER -->
</div>
</body>
</html>
css:
#charset "utf-8";
/* CSS Document */
a {
color: inherit;
text-decoration: none;
position: inherit;
}
strong {
color: inherit;
text-decoration: none;
position: inherit;
}
p {
color: inherit;
text-decoration: none;
position: inherit;
margin: inherit;
line-spacing: inherit;
}
.helpme {
margin: 0;
}
.container {
Display: flex;
flex-direction: column;
min-height: 100vh;
}
.mainnavbar {
color: white;
background-color: white;
box-shadow: 0px 0px 5px 0.1px #707070;
border-bottom: 1px solid #D9D9D9;
overflow: hidden;
margin: 0px 0px 40px 0px;
padding: 10px;
position: sticky;
z-index: 100;
top: 0;
bottom: 0;
height: 50px;
}
.navbar_left {
margin-left: 20%;
float: left;
display: inline-flex;
font-family: 'futuralight';
color: #707070;
background-color: white;
}
.navbar_right {
margin-right: 20%;
float: right;
display: inline-flex;
font-family: 'futuralight';
font-weight: normal;
color: #707070;
background-color: white;
}
.nav {
margin: 20px 20px 20px 20px;
background-color: white;
transition-property: transform;
transition: 0.25s ease;
}
.nav .current {
font-family: 'futuramedium';
letter-spacing: 1px;
}
.nav1 {
margin: 20px 0px 20px 0px;
padding: 0px 20px 0px 20px;
background-color: white;
}
.nav::after {
content: '';
border-top: 1px solid #707070;
width: 100%;
position: absolute;
display: block;
transform: rotateY(90deg);
transition:transform 0.25s linear;
}
.nav:hover {
transform: scale(1.05);
font-family: 'futuramedium';
letter-spacing: 1px;
}
.nav:hover::after {
transform: rotate(0deg);
}
.icon:hover {
transform: scale(1.1)
}
.searchbar {
display: block;
color: #707070;
text-align: center;
margin: 0px 20%;
}
.search {
font-family: 'futuralight';
display: inline-block;
font-size: 12px;
color: #707070;
margin: 0% 0% 8% 0%;
}
.searchbarbuttons {
background: none;
border: none;
font-family: 'futuralight';
display: inline-block;
font-size: 12px;
color: #707070;
padding: 5px;
cursor: pointer;
}
.searchbarbuttons:hover {
font-family: 'futuramedium';
letter-spacing: 1px;
}
.searchbarbuttons.active {
font-family: 'futuramedium';
letter-spacing: 1px;
}
.case {
margin: 0px 20% 70px 20%;
text-align: center;
position: relative;
}
.gallerypics {
padding: 5px 5px 5px 5px;
cursor: pointer;
transition: 0.3s;
border-radius: 15px;
}
.gallerypics:hover {
transform: scale(1.5)
}
.nobutton {
display: none;
}
.show {
display: inline-block;
transition: 0.3s;
border-radius: 15px;
}
/* MODAL BIG IMAGES */
.modal2 {
background-color: #CBCBCB;
position: fixed;
display: block;
padding: 20px;
border-radius: 10px;
top: 10%;
left: 23.9%;
tranform: translate(-10%, -23.9%);
transform: scale(0);
transition: 200ms ease-in-out;
z-index: 10;
width: 50%;
height: 50%;
}
.modal2.active {
background-color: #CBCBCB;
position: fixed;
display: block;
padding: 20px;
border-radius: 10px;
top: 10%;
left: 23.9%;
tranform: translate(-10%, -23.9%);
transform: scale(1);
transition: 200ms ease-in-out;
z-index: 10;
width: 50%;
height: 50%;
vertical-align: middle;
}
.modal2 .IMG3 {
object-fit: contain;
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
border-radius: 15px;
display: inline-block;
float: left;
}
.modal2 .IMG3:hover {
cursor: zoom-in;
transform: scale(170%);
transition: 200ms ease-in;
transition-delay: 0.5s;
border-radius: 0px;
}
.modal2 .containerDB {
object-fit: contain;
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
float: right;
}
.modal2 .DESC {
border-radius: 15px;
background-color: white;
padding: 20px;
overflow: scroll;
overflow-x: hidden;
}
.modal2 .DESC_text {
font-family: 'futuralight';
font-size: 15px;
color: #707070;
line-height: 17pt;
text-align: left;
font-weight: normal;
}
.modal2 .DESC_text a:hover {
font-family: 'futuramedium';
font-size: 15px;
color: #707070;
line-height: 17pt;
text-align: left;
font-weight: normal;
}
.modal2 .title {
font-family: 'futuramedium';
font-weight: normal;
font-size: 15px;
color: #707070;
line-spacing: 20pt;
}
.modal2 .buttonclose {
margin: 20px 0px;
}
.modal2 .closebutton {
position: fixed;
bottom: 20px;
right: 20px;
border: #707070;
border-width: 1px;
cursor: pointer;
outline: solid 1px #707070;
background: white;
font-family: 'futurabold';
letter-spacing: 0.5px;
padding: 5px 10px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
font-size: 1.5vh;
color: #707070;
font-weight: normal;
float: right;
}
.modal2 .closebutton:hover {
transition:transform 0.25s linear;
box-shadow: 1px 1px 1px 1px #707070;
}
/* MODAL BIG IMAGES END */
#overlay {
position: fixed;
opacity: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #707070;
pointer-events: none;
transition: 200ms ease-in-out;
}
#overlay.active {
opacity:70%;
pointer-events: all;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
border: none;
outline: none;
cursor: pointer;
}
#myBtn:hover {
transform: scale(1.1);
}
.madewithlove {
background-color: white;
padding: 10px 10px;
box-shadow: -2px -2px 5px 0.1px #707070;
height: 60px;
left: 0;
bottom: 0;
right: 0;
margin-top: auto;
}
.love {
font-family: 'futuralight';
color: #707070;
padding: 20px;
text-align: center;
font-size: 13px;
}
javascript on pop-up only:
/* eslint-env es6 */
/* eslint-disable */
/* popup javascript */
const openModalButtons = document.querySelectorAll('[data-modal-target]')
const closeModalButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')
/* modal */
openModalButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = document.querySelector(button.dataset.modalTarget)
openModal(modal)
})
})
/* close button modal */
closeModalButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = button.closest('.modal2')
closeModal(modal)
})
})
function closeModal(modal) {
if (modal == null) return
modal.classList.remove('active')
overlay.classList.remove('active')
}
function openModal(modal) {
if (modal == null) return
modal.classList.add('active')
overlay.classList.add('active')
}
/* overlay open all */
overlay.addEventListener('click', () => {
const modals = document.querySelectorAll('.modal2.active')
modals.forEach(modal => {
closeModal(modal)
})
})
Images for download: https://drive.google.com/drive/folders/1OGD5iuyxcVekdr-pTjfkDi5o6uF4LVH5
I have an html page which is using center aligned text. For some reason, the top title (#pageTitle id) is off by a bit, and looks like it has some added whitespace to the left of it. I tried to reproduce the problem here, but in the stack overflow editor, the formatting was completely wonky. Hopefully the scripts will be able to run on your machines. If anyone has any insight as to why this is happening I'd appreciate it. Thanks!
body {
padding: 0;
margin: 0;
}
/* center aligned vertically and horizontally*/
.totalCenter {
position: relative !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
/* centered horizontally */
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
/* div for main page content */
#mainDiv {
width: 500px;
max-width: 500px;
}
.title {
padding: 0px;
margin: 0px;
margin-bottom: 15px;
}
/* login title */
#pageTitle {
font-size: 65px;
color: black;
margin-left: 0px;
padding-left: 0px;
}
#tagline {
font-size: 30px;
color: rgb(79, 79, 79);
margin-bottom: 22px;
}
/* input for email/password */
.infoInput {
text-align: center;
background-color: white;
border-radius: 8px;
margin-bottom: 10px;
outline-width: 0;
padding: 5px;
width: 100%;
height: 50px;
font-size: 22px;
}
/* login/register button */
.submitButton {
color: black;
background-color: rgb(255, 223, 0);
border: none;
border-radius: 4px;
border-bottom: 4px solid rgb(218, 189, 0);
cursor: pointer;
outline: none;
width: 100%;
height: 55px;
left: 10%;
font-size: 25px;
margin-top: 25px;
}
.submitButton:hover {
background: rgb(235, 204, 0);
transition: all 0.2s ease;
cursor: pointer;
}
.submitButton:active {
border: 0;
transition: all 0.2s ease;
}
.topBarButton {
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
width: 90px;
height: 40px;
margin: 10px;
font-size: 20px;
float: right;
}
#login {
color: black;
background-color: gold;
}
#register {
background-color: black;
color: gold;
}
#logo {
margin: 10px;
width: 40px;
height: 40px;
float: left;
}
<head>
<link href="/home/style/style.css" rel="stylesheet" />
</head>
<body>
<div id="topbar">
<img id="logo" src="/images/logo.png">
<button class="topBarButton" id="register">
Register
</button>
<button class="topBarButton" id="login">
Login
</button>
</div>
<div id="mainDiv" class="totalCenter">
<h1 id="pageTitle" class="title">title</h1>
<h2 id="tagline" class="title">page tagline</h2>
<input class="infoInput center" placeholder="Your Email..." id="email" name="email" type="email" required />
<button class="submitButton center">Next</button>
</div>
</body>
The title got padding because before you move it using left top and transform the logo image (which have float attribute) take a place at the left.
If you remove the top left and transform from the mainDiv you will see following:
This is where this whitespace come from.
You should add an element to clear:both under the toolbar (see snipped below)
body {
padding: 0;
margin: 0;
}
/* ADDED THIS*/
.clear{clear:both}
/* center aligned vertically and horizontally*/
.totalCenter {
position: relative !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, 50%) !important;
}
/* centered horizontally */
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
/* div for main page content */
#mainDiv {
width: 500px;
max-width: 500px;
}
.title {
padding: 0px;
margin: 0px;
margin-bottom: 15px;
}
/* login title */
#pageTitle {
font-size: 65px;
color: black;
margin-left: 0px;
padding-left: 0px;
}
#tagline {
font-size: 30px;
color: rgb(79, 79, 79);
margin-bottom: 22px;
}
/* input for email/password */
.infoInput {
text-align: center;
background-color: white;
border-radius: 8px;
margin-bottom: 10px;
outline-width: 0;
padding: 5px;
width: 100%;
height: 50px;
font-size: 22px;
box-sizing:border-box;
}
/* login/register button */
.submitButton {
color: black;
background-color: rgb(255, 223, 0);
border: none;
border-radius: 4px;
border-bottom: 4px solid rgb(218, 189, 0);
cursor: pointer;
outline: none;
width: 100%;
height: 55px;
left: 10%;
font-size: 25px;
margin-top: 25px;
}
.submitButton:hover {
background: rgb(235, 204, 0);
transition: all 0.2s ease;
cursor: pointer;
}
.submitButton:active {
border: 0;
transition: all 0.2s ease;
}
.topBarButton {
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
width: 90px;
height: 40px;
margin: 10px;
font-size: 20px;
float: right;
}
#login {
color: black;
background-color: gold;
}
#register {
background-color: black;
color: gold;
}
#logo {
margin: 10px;
width: 40px;
height: 40px;
float: left;
}
<head>
<link href="/home/style/style.css" rel="stylesheet" />
</head>
<body>
<div id="topbar">
<img id="logo" src="/images/logo.png">
<button class="topBarButton" id="register">
Register
</button>
<button class="topBarButton" id="login">
Login
</button>
<div class="clear"></div><!-- ADDED THIS -->
</div>
<div id="mainDiv" class="totalCenter">
<h1 id="pageTitle" class="title">title</h1>
<h2 id="tagline" class="title">page tagline</h2>
<input class="infoInput center" placeholder="Your Email..." id="email" name="email" type="email" required />
<button class="submitButton center">Next</button>
</div>
</body>
You can use flex to align items which makes it easier:
body {
padding: 0;
margin: 0;
display: flex;
align-items: 'center';
justify-content: 'center';
}
.totalCenter {
display: flex;
justify-content: 'center';
}
When you set the display property to flex of a class you can use these properties:
align-items : aligns items vertically.
justify-content : alings items horizontally.
Flex is really cool if you cant to know more you can check out these two articles:
Aligning Items in a Flex Container
A Complete Guide to Flexbox
I am new to Javascript and I've recently been trying a sidebar menu.
I am trying to make the menu come out from the left side and overlay the main content when the hamburger icon is clicked. I have managed to make the menu overlay the main content but when it comes to javascript animation, I have tried a couple of things and search on internet but found no solutions to my problem.
I am trying to make so that when the .hamburger button is clicked, the .nav-links div's width changes from 0px to 300px.
Here's my code and a couple of Javascript functions I have tried.
Here's my code
HTML :
<button class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</button>
<div class="nav-links">
<ul>
HEN
BBG
YSMB
<div class="CloseBTN">×</div>
</ul>
</div>`
CSS
`
.line {
width: 30px;
height: 3px;
background: white;
margin: 5px;
}
.hamburger {
position: relative;
cursor: pointer;
z-index: 1;
top: 0px;
background: inherit;
border: none;
display: block;
outline: none;
}
.nav-links {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 0px;
background-color: rgb(0, 0, 0);
z-index: 1;
padding-top: 100px;
overflow-x: hidden;
border: solid white 1px;
}
.nav-links a {
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 20px;
display: block;
padding: 50px 8px 50px 64px;
color: white;
text-align: center;
}
.nav-links a:hover {
background: white;
color: black;
}
.CloseBTN {
position: absolute;
top: 15px;
right: 25px;
font-size: 36px;
margin-left: 32px;
cursor: pointer;
}
JavaScript
document.getElementById('hamburger') = function openMenu(){
document.getElementById('nav-links').menu.style.width="300px";
}
function openMenu(){
if(document.getElementById('nav-links').click === true)
document.getElementById('nav-links').menu.style.width="300px";
}
Try this:
document.getElementsByClassName('hamburger')[0].addEventListener("click", evt => {
document.getElementsByClassName('nav-links')[0].style.width = "300px"
})
document.getElementsByClassName('CloseBTN')[0].addEventListener("click", evt => {
document.getElementsByClassName('nav-links')[0].style.width = "0"
})
.line {
width: 30px;
height: 3px;
background: white;
border: 5px solid black;
margin: 5px;
}
.hamburger {
position: relative;
cursor: pointer;
z-index: 1;
top: 0px;
background: inherit;
border: none;
display: block;
outline: none;
}
.nav-links {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 0px;
background-color: rgb(0, 0, 0);
z-index: 1;
padding-top: 100px;
overflow-x: hidden;
border: solid white 1px;
}
.nav-links a {
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 20px;
display: block;
padding: 50px 8px 50px 64px;
color: white;
text-align: center;
}
.nav-links a:hover {
background: white;
color: black;
}
.CloseBTN {
color: white;
position: absolute;
top: 15px;
right: 25px;
font-size: 36px;
margin-left: 32px;
cursor: pointer;
}
<button class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</button>
<div class="nav-links">
<ul>
HEN
BBG
YSMB
<div class="CloseBTN">×</div>
</ul>
</div>
Some of your javascript was messed up so I fixed that, and I added some css to make everything (such as the actual menu lines itself) visible.
I simply created the Facebook posting section in react functional
after I upload a picture I want to preview it and its working fine check this:
after writing something on description and upload image when I click post button it creates post like This:
forget the profile picture its giving everything same but I want it to preview the original image so is there any way in JavaScript to change the local URL to some working URL so I can see image
I am a beginner in react so kindly give solution in JavaScript because image preview is also done with JS
I don't know if this can help you or not but this is the code everything is written in App.js file and its exporting in index.js
function like(e){
const element = e.target;
element.classList.toggle('changeColor');
const thumbsUp = e.target.childNodes[0];
if(thumbsUp.className === 'far fa-thumbs-up'){
thumbsUp.className = 'fas fa-thumbs-up';
}
else{
thumbsUp.className = 'far fa-thumbs-up';
}
}
var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
output.onload = function() {
URL.revokeObjectURL(output.src)
}
console.log(output.src);
};
function App(){
var count = 0;
var obj = [];
const Upload = ({profile}) => {
var [postDetail, settingPostDetail] = React.useState('');
var [postImage, setPostImage] = React.useState('');
function postBtn (){
var output = document.getElementById('output');
var imageUrl = output.src;
postImage = imageUrl;
var setObj = {
id : count,
postDetail,
postImage
}
count = count+1;
obj.push(setObj);
settingPostDetail('');
setPostImage('');
}
return (
<>
<div className="uploadContent">
<div className="comment">
<form id="commentForm">
<div>
<img src={profile}/>
</div>
<input type="text" placeholder="Whats on your mind..." onChange={(e) => settingPostDetail(e.target.value)} />
</form>
<div className="image-preview">
<img id="output"/>
</div>
<ul className="uploadIcons">
<li><i className="fas fa-video"></i>Live Video</li>
<li><i className="fas fa-file-image"></i><input type="file" className="custom-file-input" accept="image/*" onChange={loadFile}/></li>
<li><i className="far fa-laugh"></i>Feeling / Activities</li>
</ul>
<div className="postBtn">
<input type="button" value="post" onClick={postBtn}/>
</div>
</div>
</div>
<Post functionalPost={obj}/>
</>
)
}
function Post(props) {
// eslint-disable-next-line no-lone-blocks
return(
<div className="major_container">
{props.functionalPost.map((postDetails) => {
let {id, postDetail, postImage} = postDetails;
return (
<div id={id} className="post">
<div className="post_top_bar">
<div>
<img src={props.profile}/>
</div>
<div>
<span>Muhaymin</span>
<p>12-12-2020</p>
</div>
</div>
<div>
<p>{postDetail}</p>
<img src={postImage}/>
</div>
<div className="emoji">
<div className="bg_img"></div>
<div className="bg_img"></div>
<div className="bg_img"></div>
<div className="bg_img"></div>
<div className="bg_img"></div>
<div className="bg_img"></div>
<div className="bg_img"></div>
</div>
<div className="reactions">
<button onClick={like}><i className="far fa-thumbs-up"></i>Like</button>
<button><i className="far fa-comment-alt"></i>Comments</button>
<button><i className="fas fa-share"></i>Share</button>
</div>
<div className="comment">
<form id="commentForm">
<div>
<img src={props.profile}/>
</div>
<input type="text" placeholder="Write a comment..."/>
</form>
</div>
</div>
)
})}
</div>
)
}
return(
<div className="main_container">
<Upload profile="https://scontent.fkhi2-1.fna.fbcdn.net/v/t1.0-9/126435904_2740947029493468_1372746916749511118_o.jpg?_nc_cat=108&ccb=2&_nc_sid=09cbfe&_nc_ohc=eFGfxtrYKHQAX_XyVSw&_nc_ht=scontent.fkhi2-1.fna&oh=a019fbfa628a7885d3ae7483fa2d017d&oe=5FFFE5BB"/>
</div>
)
}
export default App;
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#100;200;300;400;500;600;700;800;900&display=swap');
body{
font-family: 'Poppins', sans-serif;
padding: 0;
margin: 0;
background-color: #18191a;
}
/* upload post */
.uploadContent{
background-color: #252525;
width: 500px;
margin: 0 auto;
padding: 10px 0;
box-sizing: border-box;
border-radius: 10px;
margin: 20px auto 0;
}
.uploadContent .comment #commentForm{
margin-top: 0;
}
.uploadIcons{
display: flex;
list-style: none;
padding: 0;
margin: 0 20px 0;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: center;
border-top: 1px solid rgb(95, 95, 95);
}
.image-preview{
padding: 20px;
box-sizing: border-box;
}
.image-preview img{
width: 100%;
}
.uploadIcons li:nth-child(2){
display: flex;
align-items: center;
width: 150px;
}
.uploadIcons li{
color: rgb(182, 182, 182);
font-size: 14px;
cursor: pointer;
padding: 10px;
box-sizing: border-box;
transition: .2s ease-in-out;
}
.uploadIcons li:hover{
background-color: #ffffff1a;
border-radius: 5px;
}
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Photo Upload';
display: inline-block;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
font-family: 'Poppins', sans-serif;
outline: none;
}
.custom-file-input:focus{
outline: none;
}
.custom-file-input:hover::before {
outline: none;
}
.custom-file-input:active::before {
outline: none;
}
.uploadIcons li i{
margin-right: 7px;
font-size: 22px;
}
.uploadIcons li:first-child i{
color: rgb(231, 56, 56);
}
.uploadIcons li:nth-child(2) i{
color: rgb(29, 134, 29);
}
.uploadIcons li:nth-child(3) i{
color: rgb(219, 176, 33);
}
.postBtn{
width: 100%;
padding: 7px 20px;
box-sizing: border-box;
}
.postBtn input{
width: 100%;
background-color: #3688ce;
border: none;
color: white;
height: 40px;
border-radius: 8px;
font-size: 17px;
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
outline: none;
cursor: pointer;
}
.post{
width: 500px;
height: auto;
background-color: #252525;
border-radius: 10px;
padding: 10px 0;
box-shadow: 5px 5px 15px rgb(31 31 31 / 80%);
margin: 20px auto 0;
}
.post .post_top_bar{
margin: 0 20px;
position: relative;
}
.post .post_top_bar div:nth-child(1),
.comment #commentForm div{
width: 45px;
height: 45px;
position: relative;
display: inline-block;
overflow: hidden;
border-radius: 50%;
}
.comment #commentForm div{
width: 40px;
height: 40px;
}
.post .post_top_bar::after,
.comment #commentForm::after{
content: '';
position: absolute;
background-color: #028302;
width: 10px;
height: 10px;
border-radius: 50%;
left: 32px;
bottom: 1px;
z-index: 9999;
}
.comment #commentForm::after{
left: 26px;
}
.post .post_top_bar div img,
.comment #commentForm div img{
display: inline;
margin: 0 auto;
height: 100%;
}
.post .post_top_bar{
display: flex;
}
.post .post_top_bar div:nth-child(2){
line-height: 1.2;
margin-left: 6px;
}
.post .post_top_bar div:nth-child(2) span{
font-weight: bold;
color: white;
font-size: 17px;
}
.post .post_top_bar div:nth-child(2) p{
margin: 2px 0 0;
color: rgb(187, 187, 187);
font-size: 11px;
}
.post div:nth-child(2) img{
width: 100%;
margin: 10px 0 0;
}
.post .emoji{
display: flex;
margin: 0 0 8px 20px;
}
.post .emoji .bg_img{
background: url("Facebook-Reactions-2020.png");
background-repeat: no-repeat;
background-size: cover;
width: 21px;
height: 18px;
text-align: center;
}
.post .emoji .bg_img:nth-child(1){
background-position: 0 0;
}
.post .emoji .bg_img:nth-child(2){
background-position: -21px 0;
}
.post .emoji .bg_img:nth-child(3){
background-position: -42px 0;
}
.post .emoji .bg_img:nth-child(4){
background-position: -63px 0;
}
.post .emoji .bg_img:nth-child(5){
background-position: -84px 0;
}
.post .emoji .bg_img:nth-child(6){
background-position: -105px 0;
}
.post .emoji .bg_img:nth-child(7){
background-position: -127px 0;
}
.post .reactions{
border-top: 1px solid rgb(95, 95, 95);
border-bottom: 1px solid rgb(95, 95, 95);
display: flex;
align-items: center;
justify-content: space-around;
margin: 0 20px;
position: relative;
}
.post .reactions button{
border: none;
background-color: transparent;
color: rgb(155, 155, 155);
font-family: 'Poppins', sans-serif;
margin: 4px 0 4px;
font-weight: 600;
outline: none;
cursor: pointer;
font-size: 15px;
padding: 4px 32px;
transition: .2s ease-in-out;
}
.post .reactions button i {
margin-right: 6px;
pointer-events: none;
}
.post .reactions button:hover{
background-color: #ffffff1a;
border-radius: 5px;
}
.post .reactions button.changeColor{
color:rgb(32, 120, 244);
transition: .2s ease-in-out;
}
.post .reactions button i.fas.fa-thumbs-up{
animation-name: jump;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
z-index: 10;
}
.comment #commentForm{
margin: 10px 20px 0;
display: flex;
align-items: center;
position: relative;
}
.comment #commentForm div{
margin-right: 10px;
}
.comment #commentForm input{
width: 100%;
background: #333333;
border: none;
border-radius: 20px;
height: 39px;
font-family: 'Poppins', sans-serif;
padding-left: 12px;
box-sizing: border-box;
font-size: 15px;
outline: none;
color: white;
}
#keyframes jump{
0%{
transform: scale(1) rotate(0deg);
}
50%{
transform: scale(1.4) rotate(-15deg);
}
100%{
transform: scale(1) rotate(0deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
I've spent a long time trying to get this working.
I have a section called "RightExtra" and a div inside it called "RightExtraContent". I'm trying to make it so that these two divs can move freely when the window is resized up to a certain point, without affecting the position of any other divs.
Here is a visual explanation of what I mean:
http://i.imgur.com/A3qBGsj.png
And here is the fiddle: http://jsfiddle.net/c21nzs13/1/
I've tried a bunch of different code combinations and still no success.
* {
padding: 0;
margin: 0;
}
html {
background: #1e1e1e;
/*Back Colors 1*/
}
body {
background-color: #1e1e1e;
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:active,
a:hover {
text-decoration: underline;
}
.nofancy a {
text-decoration: none;
}
/*These nofancies don't work*/
.nofancy a:hover {
text-decoration: none;
}
/*These nofancies don't work*/
#heady {
text-align: center;
width: 100%;
height: 75px;
background-color: #1e1e1e;
/*Back Colors 2*/
font-family: Tahoma;
font-size: 16px;
color: #000000;
position: relative;
margin-bottom: 30px;
}
#wrapper {
text-align: center;
width: 1000px;
height: 100%;
margin-left: auto;
margin-right: auto;
/*background-color:#1e1e1e; Back Colors 3*/
font-family: Tahoma;
font-size: 16px;
position: relative;
}
#RightExtra {
background-color: none;
width: 500px;
float: right;
margin-left: auto;
margin-right: auto;
position: relative;
}
#RightExtraContent {
font-family: Tahoma;
font-size: 16px;
height: 800px;
width: 300px;
color: white;
background-color: #343434;
text-align: center;
border-radius: 30px;
position: fixed;
float: right;
}
#followfoot {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 180px;
background-color: none;
text-align: center;
/*display:none;*/
}
#mag {
background-color: #739FE0;
border-color: #739FE0;
border-style: solid;
border-width: 2px;
border-radius: 20px;
line-height: 10px;
text-align: center;
margin-left: 8px;
cursor: pointer;
}
#feety {
text-align: center;
width: 100%;
height: 0px;
//100px background-color:darkslateblue;
/*Back Colors 4*/
font-family: Tahoma;
font-size: 16px;
color: white;
position: fixed;
//Changing this to relative makes followfoot disappear when you scroll long enough.
}
.UpCenter {
/*background-color:#1e1e1e; Back Colors 5*/
padding-top: 30px;
margin-bottom: 50px;
height: 90px;
}
.SignUp {
background-color: #ccc;
border-width: 1px;
border-color: #ccc;
border-radius: 10px;
width: 75px;
padding: 0px 0px;
margin-left: 30px;
text-align: center;
float: right;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
border-style: solid;
border-width: 1px;
border-color: #739FE0;
width: 100px;
/*Widthchanger1*/
border-radius: 4px;
margin-left: 0px;
margin-right: 0px;
font-size: 14px;
height: 33px;
}
ul.navbar li a.ActiveListItem {
color: white;
!important;
background-color: #222 !important;
padding: 7.5px 0px !important;
font-weight: normal !important;
margin-left: 0px;
/*Widthchanger2, got the activeitem centered with list text this way*/
margin-right: 0px;
border-radius: 4px;
height: 18px;
width: 100px;
/*kinda messes with width of text*/
margin-bottom: 1px;
}
ul.navbar li {
position: relative;
width: 100px;
/*Changes width of actual list*/
}
ul.navbar li a {
display: block;
color: white;
padding: 10px 5px;
text-decoration: none;
transition: all .1s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
/*background:black; */
background: #739FE0;
color: #FFFFFF;
/*font-weight:600;*/
/*border-bottom-color:#FFFFFF;
border-bottom-style:solid;*/
/*border-color:#FFFFFF;
border-style:solid;
border-width:1px; */
}
ul.navbar li ul {
margin-top: 0px;
/*Controls space from listdropdown to listchooser*/
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 0px 3px rgba(0, 0, 0, .6), 0 5px 10px rgba(0, 0, 0, .6);
}
ol,
ul {
list-style: outside none none;
}
.hidden {
display: none;
}
/*Lister*/
form {} .lister input {
width: 235px;
/*width of todo input box*/
height: 33px;
padding-left: 10px;
padding-right: 10px;
border-width: 1px;
border-style: solid;
border-color: #739FE0;
float: left;
margin-bottom: 20px;
font-size: 14px;
font-family: "Tahoma";
background-color: #222;
color: white;
}
.lister input:focus {
outline: none;
border-color: #739FE0;
/*ccc*/
box-shadow: 0px 0px 7px 0px #739FE0;
}
.lister ul {
/*list-style: square inside;*/
padding: 10px 0px 55px 0px;
/* padding for outside area of list*/
/* This is what's visible when not in use Used to be 10*/
/*height:50px;*/
/*background: #0f705d; DarkerOutsideColor*/
background: none;
/*width: 100%;*/
font-family: "Tahoma";
}
.active {
text-align: center;
}
.inactive {
display: none;
}
.lister li {
font-size: 14px;
/*font size of list items*/
/*font-weight: 600;*/
color: #181818;
/*Font Color d5faf3*/
display: inline-block;
/*This makes the items side-by-side and not columns*/
padding: 9px;
margin-bottom: 5px;
/*SEPARATE*/
/* float:left; Interferes with text-align of Active*/
}
.lister li:nth-child(odd) {
background: #343434;
/*LighterInside Color,Odd*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
/*opacity:0.6;
filter:alpha(opacity=60);*/
}
.lister li:nth-child(even) {
background: #343434;
/*LighterInside Color,Even*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
}
.lister li > a {
/*float: right;*/
text-decoration: none;
color: white;
font-weight: bold;
/*transition: all .2s ease-in-out;*/
/*position:relative;*/
margin-top: 2px;
display: inline-block;
}
.lister li > a:hover {
/*font-size: 105%;*/
/*color: #c0392b;*/
color: #000000;
}
.lister li > span {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 379px;
}
/*Clearable*/
.clearable {
/*background: #fff; */
/*background:url(../images/splusgreen.png); */
background-repeat: no-repeat;
background-size: 10px 10px;
background-position: right 5px center;
/* -15*/
transition: background 0.4s;
}
.clearable.x {
/*background-position: right 5px center;*/
}
.clearable.onX {
cursor: pointer;
}
<section id="heady">
<div style="width:1000px;margin-left:auto;margin-right:auto;">
<div style="text-align: left;padding:25px 0px;display:inline-block;float:left;font-size:18px;"><b>Calories</b>
</div>
<div style="text-align: right;padding:25px 00px;display:inline-block;float:right;">
<!--Home | --> Sign In | Sign Up
</div>
</div>
</section>
<section id="RightExtra">
<div id="RightExtraContent">Yes hello....!</div>
</section>
<section id="wrapper">
<br>
<br>
<div class="UpCenter">
<div style="vertical-align:top;display:inline-block;">
<ul class="navbar cf">
<li> Category
<ul></ul>
</li>
</ul>
</div>
<div class="lister" style="display:inline-block;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" class="clearable" placeholder="Add your meals here..." autocomplete="off">
</form>
</div>
<div id="mag" style="display:inline-block;vertical-align:top;">
<img src="images/magCircy.png" width="33px" height="33px" onClick="changeHeight(this,event);"></img>
</div>
</div>
</div>
</section>
<section id="followfoot"></section>
In order to achieve this, I increased the width of the wrapper and moved the new div into it.