How to vertically align blocks - javascript

I have hard time vertically centering my blocks. If you take a look to my code , test1 block is aligned with block catA catB catE catF but test2 block isnt with its respective top blocks.
html :
<div class="homepage-wrapper">
<div class="homepage-top-category-container">
<div class="homepage-top-category-container-title">
<span id="homepage-top-category-container-title">Most popular aisles</span>
</div>
<div class="homepage-top-category-container-list">
<div>
<a href="#">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
<div class="homepage-top-category-container-item-btn">
Browse catA
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
<div class="homepage-top-category-container-item-btn">
Browse catB
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
<div class="homepage-top-category-container-item-btn">
Browse catC
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
<div class="homepage-top-category-container-item-btn">
Browse catD
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
<div class="homepage-top-category-container-item-btn">
Browse catE
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
<div class="homepage-top-category-container-item-btn">
Browse catF
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
<div class="homepage-top-category-container-item-btn">
Browse catG
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
<div class="homepage-top-category-container-item-btn">
Browse catH
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="homepage-banner-grid-wrapper">
<div class="homepage-banner-grid">
<div class="home-page-banner-grid-items" id="home-page-banner-grid-item">
test1
</div>
<div class="home-page-banner-grid-items" id="home-page-banner-grid-item">
test2
</div>
<!--<div class="home-page-banner-grid-items" id="home-page-banner-grid-item3">*******
test3
</div>
</div>****** -->
</div>
css here :
a {
text-decoration: none;
}
body {
margin: 0px;
}
.homepage-wrapper {
max-width: 1078px;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-title {
color: #808080;
margin-top: 15px;
padding: 15px 0 15px 0;
font-weight: bold;
letter-spacing: -1px;
}
#homepage-top-category-container-title {
color: ##808080;
margin-left: 22px;
}
.homepage-top-category-container-list {
display: flex;
flex-wrap: wrap;
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
}
.homepage-top-category-container-list > div {
margin-left: 22px;
margin-bottom: 22px;
}
.homepage-top-category-container-item {
display: block;
float: none;
width: auto;
height: auto;
border: solid 1px #d0d0ce;
position: relative;
border-radius: 3px;
}
#homepage-top-category-container-item {
width: 240px;
height: 360px;
}
.homepage-top-category-container-item:hover {
-webkit-box-shadow: 0px 5px 15px 0px rgba(162, 162, 162, 1);
-moz-box-shadow: 0px 5px 15px 0px rgba(162, 162, 162, 1);
box-shadow: 0px 5px 15px 0px rgba(162, 162, 162, 1);
}
.homepage-top-category-container-item-btn {
background-color: #cde5d9;
color: black;
position: absolute;
padding: 10px;
left: 0;
right: 0;
bottom: 0;
border-top: 1px solid #d0d0ce;
border-bottom: 2px solid #d0d0ce;
}
.homepage-banner-grid-wrapper {
background-color: yellow;
width: 100%;
height: auto;
}
.homepage-banner-grid {
max-width: 1078px;
height: auto;
display: flex;
align-items: center;
margin-left: auto;
margin-right: auto;
}
.home-page-banner-grid-items {
width: 506px;
display: block;
margin-left: auto;
margin-right: auto;
}
#home-page-banner-grid-item {
background-color: red;
margin-left: 22px;
/*
#home-page-banner-grid-item1 {
background-color: red;
}
#home-page-banner-grid-item2 {
background-color: green;
}
#home-page-banner-grid-item3 {
background-color: orange;
}
*/
My goal is to align test2 block under its respective blocks , so it will look just like how test1 block is aligned under its respective blocks.
I will appreciate some corrections and/or enhancements of my code.
jsfiddle here --> https://jsfiddle.net/r0gLo9cp/
Many thanks for your help.

That will fix it add flex-direction like thesoorae said
.homepage-banner-grid {
max-width: 1078px;
height: auto;
display: flex;
flex-direction:column;
align-items: center;
margin-left: auto;
margin-right: auto;
}

Are you missing your closing div on the bottom? Looks like flex should take care of the centering for you, if you are looking for them to be listed in a column, make sure you use flex-direction: column; in the parent container (homepage-banner-grid).

Related

My JavaScript won't work before i resize my browser window, and almost all my CSS is working, except for a few lines (idk what's the problem here)

I am trying to make the second page of my Website, but some of the CSS and JS seem to not work.
I have 4 files, and 4 folders (all located in 1 same folder). The first folder is view, which contains index.html (the main page of the website), and links.html (the file that isn't working). Then there is the js folder which contains script.js. The third folder is css and inside of it is style.css. The final folder is asset which has image assets for my Website.
Here is the content of index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linkeld</title>
<!-- CSS Links -->
<link rel="stylesheet" href="../css/style.css">
<!-- JS Links -->
<script src="../js/script.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div id="loader">
<span>
<i class="fas fa-spinner fa-spin"></i>
</span>
</div>
<div id="topnav" class="transparent">
<div class="wrapper main">
<div class="wrapper left" id="navLogo">
<img src="../asset/9984-confusion.png" alt="logo">
</div>
<div class="wrapper right" id="navLinks">
Home
Links
Account
About
</div>
</div>
</div>
<div id="head">
<div class="wrapper">
<img src="../asset/9984-confusion.png" alt="logo">
<h1>Linkeld</h1>
<h2>With over 1.000.000 links worldwide</h2>
<div id="signup">
Sign-Up Now!
</div>
</div>
</div>
<div id="main">
<div id="aboutWebsite">
<div class="wrapper">
<div class="card">
<h1><i class="fas fa-share-alt"></i> Share</h1>
<p>Share links to people across the globe to discover, the limitation is only your imagination</p>
<div class="image" id="image1">
<img src="../asset/brooke-cagle-g1Kr4Ozfoac-unsplash-removebg-preview.png" alt="image1">
</div>
</div>
<div class="card">
<h1><i class="fas fa-search"></i> Discover</h1>
<p>Discover new websites from other people via links, you can visit all of the internet's website!
</p>
<div class="image" id="image2">
<img src="../asset/grzegorz-walczak-yoIIPcrWhjI-unsplash-removebg-preview.png" alt="image2">
</div>
</div>
<div class="card">
<h1><i class="fas fa-times-circle"></i> No Restrictions</h1>
<p>No restricted links or banned sites, share whatever you like</p>
<div class="image" id="image3">
<img src="../asset/cdd20-vR6bNYTVlpo-unsplash-removebg-preview.png" alt="image3">
</div>
</div>
</div>
</div>
<div id="whySignup">
<div class="wrapper">
<div class="section">
<h1><i class="fas fa-question-circle"></i> Why Sign-Up?</h1>
<p>Firstly, you'll be able to share links with others! Not just click them.</p>
<p>Secondly, you can like and save links to your account, so you can view at them later.</p>
<p>Thirdly, you'll be able to customize your Username! No more plain old nicknames.</p>
</div>
<div class="section">
<img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
</div>
</div>
</div>
<div id="phishing">
<div class="wrapper">
<div class="section">
<h1><i class="fas fa-question-circle"></i> Would i fall to phishing?</h1>
<p>Well technically, yes, you will at some point fall into a phishing scam.</p>
<p>But, you can check the domain first, before clicking the link.</p>
<p>Check for any typos, or weird characters. A site that has a suspicious looking domain may be a
phishing website so be careful.</p>
</div>
<div class="section">
<img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
</div>
</div>
</div>
<div id="nfsw">
<div class="wrapper">
<div class="section">
<h1><i class="fas fa-question-circle"></i> Can I post NFSW related stuff?</h1>
<p>There is no limitation to what website you want to share here.</p>
<p>So yes you absolutely can post NFSW related content here and not get banned.</p>
</div>
<div class="section">
<img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
</div>
</div>
</div>
<div id="signupCall">
<div class="wrapper">
<div class="section">
<h1>What are you waiting for?</h1>
</div>
<div class="section">
<div>
<a class="button" href="">Sign-Up Now!</a>
</div>
</div>
</div>
</div>
</div>
<div id="foot">
<div class="wrapper">
<div class="section">
<h2>Other resources</h2>
Home
Copyright
Terms
Policy
Sources
</div>
<div class="section">
<h2>About us</h2>
Team
About
Site Stats
</div>
</div>
</div>
</body>
</html>
And here is links.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linkeld</title>
<!-- CSS Links -->
<link rel="stylesheet" href="../css/style.css">
<!-- JS Links -->
<script src="../js/script.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div id="loader">
<span>
<i class="fas fa-spinner fa-spin"></i>
</span>
</div>
<div id="topnav" class="transparent">
<div class="wrapper main">
<div class="wrapper left" id="navLogo">
<img src="../asset/9984-confusion.png" alt="logo">
</div>
<div class="wrapper right" id="navLinks">
Home
Links
Account
About
</div>
</div>
</div>
<div id="head">
<div class="wrapper">
<img src="../asset/9984-confusion.png" alt="logo">
<h1>Links</h1>
<h2 style="margin-bottom: 100px;">This is where you'll find links to Websites!</h2>
</div>
</div>
<div id="main">
<div id="linksList">
<div class="wrapper">
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
[user input]
<div class="description">
<p>[user input]</p>
</div>
</div>
</div>
</div>
</div>
<div id="foot">
<div class="wrapper">
<div class="section">
<h2>Other resources</h2>
Home
Copyright
Terms
Policy
Sources
</div>
<div class="section">
<h2>About us</h2>
Team
About
Site Stats
</div>
</div>
</div>
</body>
</html>
Now for the CSS (style.css) :
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
:root {
/* CSS HEX */
--lime-green: #1ec90eff;
--metallic-sunburst: #9b7e46ff;
--mellow-apricot: #f4b266ff;
--dark-liver-horses: #544343ff;
}
html {
scroll-behavior: smooth;
}
a {
color: var(--lime-green);
text-decoration: none;
transition: text-decoration 0.3s ease-in-out;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: var(--lime-green);
}
#topnav {
position: fixed;
width: 100%;
z-index: 99;
background: white;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
transition: all 0.2s ease-in-out;
}
#topnav.transparent {
background: transparent;
box-shadow: none;
}
#topnav .wrapper.main {
display: flex;
justify-content: stretch;
}
#topnav .wrapper {
display: flex;
}
#topnav .wrapper#navLogo {
width: 70%;
}
#topnav .wrapper#navLogo img {
padding: 10px;
width: 60px;
margin-left: 40px;
}
#topnav .wrapper#navLinks {
flex: 1;
justify-content: space-evenly;
}
#topnav.transparent .wrapper#navLinks a {
padding: 20px;
text-decoration: none;
color: white;
text-align: center;
transition: all 0.2s ease-in-out;
}
#topnav .wrapper#navLinks a {
color: black;
padding: 20px;
text-decoration: none;
text-align: center;
transition: all 0.2s ease-in-out;
}
#head {
background: url("../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg");
margin-bottom: 30px;
}
#head .wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#head .wrapper h1,
#head .wrapper h2 {
color: white;
}
#head .wrapper img {
width: 40px;
margin: 100px 0 20px 0;
}
#head .wrapper h1 {
font-size: 90px;
}
#head .wrapper h2 {
font-size: 18px;
}
#head #signup {
margin: 80px 0 100px 0;
}
#head #signup a {
color: white;
padding: 20px;
background: var(--mellow-apricot);
border-radius: 10px;
transition: all 0.3s ease-in-out;
display: block;
}
#head #signup a:hover {
text-decoration: none;
transform: scale(1.1);
}
#aboutWebsite .wrapper {
display: flex;
flex-direction: row;
justify-content: center;
}
#aboutWebsite .wrapper .card {
width: 400px;
margin: 20px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
padding: 80px 60px;
}
#aboutWebsite .wrapper .card h1 {
font-size: 40px;
margin-bottom: 20px;
font-weight: 300;
}
#aboutWebsite .wrapper .card p {
font-size: 18px;
}
#aboutWebsite .wrapper .card .image {
display: flex;
justify-content: center;
}
#aboutWebsite .wrapper .card .image img {
width: 300px;
}
#aboutWebsite .wrapper .card .image#image1,
#aboutWebsite .wrapper .card .image#image2 {
margin-top: 130px;
}
#foot {
margin-top: 50px;
background: rgb(235, 235, 235);
}
#foot .wrapper {
display: flex;
}
#foot .wrapper .section {
flex: 1;
padding: 50px 30px;
}
#foot .wrapper .section a {
display: block;
color: black;
margin-bottom: 30px;
width: max-content;
}
#foot .wrapper .section h2 {
margin-bottom: 30px;
}
#loader {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
background: white;
z-index: 999;
}
#loader.loaded {
display: none;
}
#loader span {
font-size: 100px;
}
a.button {
color: white;
padding: 20px;
background: var(--mellow-apricot);
border-radius: 10px;
transition: all 0.3s ease-in-out;
display: block;
}
a.button:hover {
text-decoration: none;
transform: scale(1.1);
}
#whySignup {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#whySignup .wrapper {
display: flex;
justify-content: start;
transition: all 0.5s ease-in-out;
}
#whySignup .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#whySignup .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
}
#whySignup .wrapper .section:first-child p {
font-size: 18px;
margin-bottom: 10px;
}
#whySignup .wrapper .section img {
width: 450px;
height: 500px;
}
#phishing {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#phishing .wrapper {
display: flex;
justify-content: start;
flex-direction: row-reverse;
transition: all 0.5s ease-in-out;
}
#phishing .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#phishing .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
}
#phishing .wrapper .section:first-child p {
font-size: 18px;
margin-bottom: 10px;
}
#phishing .wrapper .section img {
width: 450px;
height: 500px;
}
#nfsw {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#nfsw .wrapper {
display: flex;
justify-content: start;
transition: all 0.5s ease-in-out;
}
#nfsw .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#nfsw .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
}
#nfsw .wrapper .section:first-child p {
font-size: 18px;
margin-bottom: 10px;
}
#nfsw .wrapper .section img {
width: 450px;
height: 500px;
}
#signupCall {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#signupCall .wrapper {
display: flex;
flex-direction: column;
transition: all 0.5s ease-in-out;
}
#signupCall .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
background: transparent;
}
#signupCall .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
font-size: 50px;
}
#signupCall .wrapper .section:first-child h2 {
font-size: 20px;
margin-bottom: 10px;
}
#signupCall .wrapper .section {
background: url("../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg");
background-position: -45%;
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
height: 300px;
}
#linksList {
padding: 50px;
}
#linksList .wrapper {
display: flex;
}
#linksList .wrapper .cards {
padding: 30px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
width: 120px;
margin: 30px;
background: cyan;
}
Here's script.js :
window.addEventListener("load", () => {
const loader = document.getElementById("loader");
loader.classList.add("loaded");
})
window.addEventListener("scroll", () => {
let scrollY = window.scrollY;
let posY = 450;
let topnav = document.getElementById("topnav");
if (scrollY < posY) {
topnav.classList.add("transparent");
} else {
topnav.classList.remove("transparent");
}
});
Now the problem is that #linksList doesn't seem to change even though I've written the CSS in style.css. What's wrong about it? I can't seem to find anything that could've conflicted with the CSS. I even gave the .card in #linksList a cyan background to test if it works, but to no result.
Then there's the #topnav, the JS won't add the class .transparent when the user scrolled to the #topnav in links.html until the browser's screen was resized (I'm using Chrome). I have no actual clue about what is going on here. Maybe it's just my browser acting weird or is it because I made some kind of mistake in the scripting?
(sorry for the long question)

Content inside div with fixed position just can scroll half of content

I have a sidebar with a position fixed that can vertically scroll. But why when I scroll it, I just can scroll to half of the content of the sidebar I cant scroll until to the bottom of the sidebar.
As you can see in the first pic, there's still text follow us, but I cant scroll anymore. the second image is the image of the full sidebar
First image
second image
$(document).ready(function () {
//OPEN FOR SIDEBAR MOBILE
$(".toggle-menu button").click(function () {
$(".menu-list-container").addClass("show");
$(".menu-list").css("width", "275px");
$(".notify").addClass("hide");
$(".livetv").addClass("hide");
$(".close-mobile").css("display", "block");
});
//SCRIPT FOR CLOSING SIDEBAR MOBILE
$(".close-mobile").click(function () {
$(".menu-list-container").removeClass("show");
$(".menu-list").css("width", "0px");
$(".notify").removeClass("hide");
$(".livetv").removeClass("hide");
$(".close-mobile").css("display", "none");
})
})
/* SCSS */
.navbar-mobile {
position: sticky;
top: 0;
right: 0;
left: 0;
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
padding-top: 15px;
padding-bottom: 15px;
background-color: $white;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
z-index: 100;
.toggle-menu {
position: relative;
width: 10%;
}
.logo {
width: 50%;
position: relative;
img {
position: absolute;
transform: translateY(-18px);
max-width: 134px;
}
}
.navbar-right {
width: 40%;
display: flex;
flex-flow: row nowrap;
div {
width: calc(200px - 20px);
}
.livetv {
a {
color: $black;
text-decoration: none;
text-align: center;
img {
display: block;
margin: 0 auto;
}
span {
display: block;
font: $small;
}
}
}
.notify {
position: relative;
button {
position: absolute;
top: -50%;
transform: translateY(25px);
background: none;
border: none;
}
}
.close-mobile {
display: none;
position: relative;
button {
background: none;
border: none;
position: absolute;
right: 32px;
top: 12px;
}
}
}
.menu-list-container {
position: relative;
max-width: 275px;
height: auto;
.menu-list {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 0px;
//width: 275px;
overflow-y: scroll;
background-color: $white;
transition: ease-out 300ms;
z-index: 1;
.header {
background: url("../../asset/header.png") no-repeat;
background-size: cover;
color: $white;
.flex {
position: relative;
display: flex;
flex-flow: row nowrap;
.image-container {
display: flex;
justify-content: center;
align-items: center;
img {
width: 65px;
height: 65px;
border-radius: 8px;
border: solid 2px $white;
}
}
.header-info {
width: auto;
p {
font: $heading6;
}
a {
color: $white;
opacity: 0.7;
text-decoration: none;
}
}
}
}
.form-search {
position: relative;
border-bottom: solid 1px $gray1;
input {
width: 100%;
height: 50px;
border: solid 1px $gray3;
border-radius: 8px;
}
button {
position: absolute;
top: 37px;
right: 30px;
background: none;
border: none;
}
}
.menu-content {
border-bottom: solid 1px $gray1;
ul {
list-style: none;
padding-inline-start: 0;
margin-block-start: 0;
margin-block-end: 0;
li {
a {
color: $black;
text-decoration: none;
}
}
.live-tv {
a {
color: $secondary;
font: $heading4;
}
}
.live-tv:before {
content: url("../../asset/icons/livetv-icon.svg");
position: relative;
top: 2px;
}
.foryou::before {
content: url("../../asset/icons/check.svg");
position: relative;
top: 2px;
}
.saved::before {
content: url("../../asset/icons/save.svg");
position: relative;
top: 2px;
}
.tv-schedule::before {
content: url("../../asset/icons/check.svg");
position: relative;
}
.livetv-regular::before {
content: url("../../asset/icons/livetv.svg");
position: relative;
}
.brandconnect::before {
content: url("../../asset/icons/brandconnect.svg");
position: relative;
}
li:last-child {
margin-bottom: 0 !important;
}
}
}
.program {
border-bottom: solid 1px $gray1;
p {
font: $heading4;
margin-block-start: 0;
}
ul {
padding-inline-start: 0;
margin-block-end: 0;
margin-block-start: 0;
list-style: none;
li {
display: flex;
.image {
width: 48px;
border-radius: 8px;
img {
width: 100%;
object-fit: cover;
border-radius: 8px;
}
}
.image:last-child {
background-color: $gray1;
}
.pl-20 {
width: 70%;
a {
color: $black;
text-decoration: none;
}
}
}
li:last-child {
.image {
display: flex;
justify-content: center;
align-items: center;
background-color: $gray1;
border-radius: 50%;
height: 48px;
img {
width: auto !important;
}
}
a {
font: $heading4;
}
}
}
}
}
.social {
border-bottom: solid 1px $gray1;
p {
font: $heading4;
}
.social-list {
display: flex;
flex-flow: row nowrap;
.social-item {
width: calc(100px - 20px);
height: 43.75px;
border-radius: 50%;
img {
display: block;
position: absolute;
margin: 0 auto;
transform: translate(13px, -7px);
}
}
.facebook img {
transform: translate(15px, -11px) !important;
}
.social-item:last-child {
margin-right: 0 !important;
}
}
}
.signout {
a {
color: $black;
text-decoration: none;
}
a:before {
content: url("../../asset/icons/signout.svg");
position: relative;
}
}
}
.show {
visibility: visible !important;
}
.hide {
visibility: hidden !important;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar-mobile">
<div class="toggle-menu pl-10">
<button type="button" class="btn">
<img src="../asset/icons/menu.svg" alt="menu icon" />
</button>
</div>
<div class="logo">
<a href="#">
<img src="../asset/logo.png" alt="logo" />
</a>
</div>
<div class="navbar-right">
<div class="livetv pr-20">
<a href="livetv.html">
<img src="../asset/icons/livetv.svg" alt="live tv" />
<span>Live TV</span>
</a>
</div>
<div class="notify">
<button type="button">
<img src="../asset/icons/bell-black.svg" alt="notify icon" />
</button>
</div>
<div class="close-mobile">
<button type="button">
<img src="../asset/icons/close-black.png" alt="close-icon" />
</button>
</div>
</div>
<div class="menu-list-container">
<div class="menu-list">
<div class="header p-20">
<div class="flex">
<div class="image-container">
<img src="../asset/avatar.png" alt="avatar" />
</div>
<div class="header-info pl-20">
<p>muhammad Rojali hernandez</p>
<span><img src="../asset/icons/" ></span>Setting
</div>
</div>
</div>
<form class="form-search pt-20 pb-20 ml-20 mr-20" method="post">
<input type="text" name="search" required />
<button type="submit">
<img src="../asset/icons/search-icon.svg" alt="Search Icon" />
</button>
</form>
<div class="menu-content pt-20 pb-20 ml-20 mr-20">
<ul>
<li class="live-tv mb-20">
<a class="pl-10" href="livetv.html">LIVE TV</a>
</li>
<li class="foryou mb-20">
<a class="pl-10" href="foryou.html">For You</a>
</li>
<li class="saved mb-20">
<a class="pl-10" href="#">Saved Video</a>
</li>
</ul>
</div>
<div class="program pt-20 pb-20 ml-20 mr-20">
<p>PROGRAM</p>
<ul>
<li class="mb-20">
<div class="image">
<img src="../asset/program1.png" alt="program image" />
</div>
<div class="pl-20 pt-10">
Soccer Time
</div>
</li>
<li class="mb-20">
<div class="image">
<img src="../asset/program1.png" alt="program image" />
</div>
<div class="pl-20 pt-10">
Soccer Time
</div>
</li>
<li class="mb-20">
<div class="image">
<img src="../asset/program1.png" alt="program image" />
</div>
<div class="pl-20 pt-10">
Soccer Time
</div>
</li>
<li class="mb-20">
<div class="image">
<img src="../asset/program4.png" alt="program image" />
</div>
<div class="pl-20 pt-10">
Kick Andy
</div>
</li>
<li class="browse">
<div class="image">
<img src="../asset/icons/add.svg" alt="browse icon" />
</div>
<div class="pl-20 pt-10">
Browse Program
</div>
</li>
</ul>
</div>
<div class="menu-content pt-30 pb-30 ml-20 mr-20">
<ul>
<li class="tv-schedule mb-20">
<a class="pl-10" href="livetv.html">TV Schedule</a>
</li>
<li class="livetv-regular mb-20">
<a class="pl-10" href="foryou.html">For You</a>
</li>
<li class="brandconnect mb-20">
<a class="pl-10" href="#">Saved Video</a>
</li>
</ul>
</div>
<div class="social mt-30 mb-30 ml-20 mr-20">
<p>FOLLOW US</p>
<div class="social-list">
<div class="social-item facebook mr-20">
<a href="#">
<img src="../asset/icons/facebook.svg" alt="facebook icon" />
</a>
</div>
<div class="social-item twitter mr-20">
<a href="#">
<img src="../asset/icons/twitter.svg" alt="twitter icon" />
</a>
</div>
<div class="social-item instagram mr-20">
<a href="#">
<img src="../asset/icons/instagram.svg" alt="instagram icon" />
</a>
</div>
<div class="social-item youtube mr-20">
<a href="#">
<img src="../asset/icons/youtube.svg" alt="youtube icon" />
</a>
</div>
</div>
</div>
<div class="signout pt-30 pb-30 ml-20 mr-20">
Sign Out
</div>
</div>
</div>
</nav>

Buttons in slider not working using javascript

I am trying to make a slider for a list of products and I have placed a button on each side of the slider to slide the products. The problem I am facing is that it works fine when I press exactly at the buttons but when I press anywhere around it, it throws the error Uncaught TypeError: Cannot read property 'style' of null.
next = (target) => {
target.parentElement.parentElement.previousElementSibling.style.transform = 'translateX(-44vw)';
// next[0].style.display = 'none';
// previous[0].style.display = 'inline-block';
}
previous = (target) => {
target.parentElement.parentElement.previousElementSibling.style.transform = 'translateX(0vw)';
// previous[0].style.display = 'none';
// next[0].style.display = 'inline-block';
}
* {
font-family: "Segoe UI";
}
.shop {
background-color: rgb(255, 255, 255);
overflow: hidden;
position: relative;
margin: 10px;
margin-top: 0;
}
.product-display-area {
width: 81.5vw;
display: inline-block;
}
.shop_header {
margin: 10px;
margin-bottom: 0px;
position: relative;
padding: 10px;
border-bottom: 1px solid rgb(229, 229, 229);
background-color: rgb(255, 255, 255);
}
.shop_header h2 {
display: inline-block;
font-weight: 500;
margin-left: 30px;
}
.shop_header p {
margin-left: 30px;
}
.shop_header .clock {
display: inline-block;
margin-left: 30px;
}
.shop_header .clock img {
position: relative;
top: 6px;
width: 24px;
}
.shop_header .clock #time_remaining {
margin-left: 10px;
}
.shop_header button[type="button"] a {
text-decoration: none;
padding: 10px 15px;
display: inline-block;
font-size: 15px;
font-weight: 700;
background-color: rgb(40, 116, 240);
color: rgb(255, 255, 255);
}
.shop_header button[type="button"] {
border: none;
position: absolute;
right: 20px;
top: 0px;
}
.shop_items {
width: 130vw;
transition: 1s;
}
.shop_items .items {
display: inline-block;
padding: 25px;
}
.shop_items .items img {
display: block;
margin: auto;
}
.shop_items .items .item_info {
text-align: center;
margin: auto;
}
.shop_items .items .item_info p {
padding: 5px;
color: rgb(56, 142, 60);
font-size: 14px;
}
.shop_items .items .item_info p:first-of-type {
color: rgb(0, 0, 0);
font-weight: 500;
}
.shop_items .items .item_info p:last-of-type {
color: rgb(151, 151, 151);
}
.item_carousel_left_arrow {
position: absolute;
top: 35%;
padding: 50px 20px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid rgb(209, 211, 213);
background-color: rgb(255, 255, 255);
cursor: pointer;
}
.item_carousel_right_arrow {
right: 0;
position: absolute;
top: 35%;
padding: 50px 20px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border: 1px solid rgb(209, 211, 213);
background-color: rgb(255, 255, 255);
cursor: pointer;
}
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css">
<div class="product-display-area">
<div class="shop" id="best_of_electronics">
<div class="shop_header">
<h2>Best of Electronics</h2>
<p>Devices and Accessories</p>
<button type="button">VIEW ALL</button>
</div>
<div class="shop_items">
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/k4vmxzk0/cases-covers/back-cover/y/y/g/spigen-f23cs25961-original-imafnzhgzuty3gb6.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Best Brands</p>
<p class="product_price">Shop Now</p>
<p class="product_company">For All Phone Models</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kdhphu80/sports-action-camera/j/f/k/4000-air-4k-full-hd-wifi-30m-waterproof-sports-action-camera-original-imafue3ghmhtk39f.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Sports & Action Camera</p>
<p class="product_price">From ₹4199</p>
<p class="product_company">GoPro, SJCAM, DJI & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kbqu4cw0/speaker/soundbar/9/s/0/mt160dsb-motorola-original-imaftf6csukur9he.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Dolby Enabled</p>
<p class="product_price">Up to 50% Off</p>
<p class="product_company">Home Theaters</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/k6mibgw0/datacard/r/h/g/jiofi-jmr-541-original-imafpfhandhkptwc.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Data Cards</p>
<p class="product_price">Upto 60% off</p>
<p class="product_company">JioFi, Huawei & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/ja73ki80/webcam/pc-webcam/7/q/e/logitech-c310-original-imaeztzqny7jh7gh.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Webcams</p>
<p class="product_price">From ₹499</p>
<p class="product_company">Logitech, Quantum & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kb5eikw0/trimmer/z/d/n/0-5-10-mm-bt3101-15-stainless-steel-cordless-philips-original-imafsjquyq2hapug.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Trimmers & Hair Clippers</p>
<p class="product_price">From ₹700</p>
<p class="product_company">By Nova, Philips & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/k51cpe80/hearing-aid/e/e/s/ha50-behind-ear-beurer-original-imafnth6bue82ngc.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Best of Hearing Aids</p>
<p class="product_price">From ₹499</p>
<p class="product_company">Beurer & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kex5ci80/printer/k/n/z/hp-laserjet-pro-m1136-mfp-original-imafvhnbe2dg4vem.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Top 10 Printers</p>
<p class="product_price">₹2399</p>
<p class="product_company">Print, Scan & copy</p>
</div>
</div>
</a>
</div>
<div>
<span class="item_carousel_left_arrow" id="arruw" onclick="previous(event.target)">
<i class="fas fa-arrow-left"></i>
</span>
<span class="item_carousel_right_arrow" id="arruw" onclick="next(event.target)">
<i class="fas fa-arrow-right"></i>
</span>
</div>
</div>
</div>
You need to delegate and test what you clicked since you have two elements you can click, the button and the <i>
Also you have duplicate IDs which is not allowed (had you used them)
Also DRY (don't repeat yourself)
const shopItems = document.querySelector("#best_of_electronics .shop_items")
document.getElementById("nav").addEventListener("click", function(e) {
let tgt = e.target;
let possibleParent = tgt.closest("span")
if (possibleParent) tgt = possibleParent; // we clicked the <i>
shopItems.style.transform = tgt.id==="prev" ? 'translateX(-44vw)' : 'translateX(0vw)';
})
* {
font-family: "Segoe UI";
}
.shop {
background-color: rgb(255, 255, 255);
overflow: hidden;
position: relative;
margin: 10px;
margin-top: 0;
}
.product-display-area {
width: 81.5vw;
display: inline-block;
}
.shop_header {
margin: 10px;
margin-bottom: 0px;
position: relative;
padding: 10px;
border-bottom: 1px solid rgb(229, 229, 229);
background-color: rgb(255, 255, 255);
}
.shop_header h2 {
display: inline-block;
font-weight: 500;
margin-left: 30px;
}
.shop_header p {
margin-left: 30px;
}
.shop_header .clock {
display: inline-block;
margin-left: 30px;
}
.shop_header .clock img {
position: relative;
top: 6px;
width: 24px;
}
.shop_header .clock #time_remaining {
margin-left: 10px;
}
.shop_header button[type="button"] a {
text-decoration: none;
padding: 10px 15px;
display: inline-block;
font-size: 15px;
font-weight: 700;
background-color: rgb(40, 116, 240);
color: rgb(255, 255, 255);
}
.shop_header button[type="button"] {
border: none;
position: absolute;
right: 20px;
top: 0px;
}
.shop_items {
width: 130vw;
transition: 1s;
}
.shop_items .items {
display: inline-block;
padding: 25px;
}
.shop_items .items img {
display: block;
margin: auto;
}
.shop_items .items .item_info {
text-align: center;
margin: auto;
}
.shop_items .items .item_info p {
padding: 5px;
color: rgb(56, 142, 60);
font-size: 14px;
}
.shop_items .items .item_info p:first-of-type {
color: rgb(0, 0, 0);
font-weight: 500;
}
.shop_items .items .item_info p:last-of-type {
color: rgb(151, 151, 151);
}
.item_carousel_left_arrow {
position: absolute;
top: 35%;
padding: 50px 20px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid rgb(209, 211, 213);
background-color: rgb(255, 255, 255);
cursor: pointer;
}
.item_carousel_right_arrow {
right: 0;
position: absolute;
top: 35%;
padding: 50px 20px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border: 1px solid rgb(209, 211, 213);
background-color: rgb(255, 255, 255);
cursor: pointer;
}
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css">
<div class="product-display-area">
<div class="shop" id="best_of_electronics">
<div class="shop_header">
<h2>Best of Electronics</h2>
<p>Devices and Accessories</p>
<button type="button">VIEW ALL</button>
</div>
<div class="shop_items">
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/k4vmxzk0/cases-covers/back-cover/y/y/g/spigen-f23cs25961-original-imafnzhgzuty3gb6.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Best Brands</p>
<p class="product_price">Shop Now</p>
<p class="product_company">For All Phone Models</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kdhphu80/sports-action-camera/j/f/k/4000-air-4k-full-hd-wifi-30m-waterproof-sports-action-camera-original-imafue3ghmhtk39f.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Sports & Action Camera</p>
<p class="product_price">From ₹4199</p>
<p class="product_company">GoPro, SJCAM, DJI & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kbqu4cw0/speaker/soundbar/9/s/0/mt160dsb-motorola-original-imaftf6csukur9he.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Dolby Enabled</p>
<p class="product_price">Up to 50% Off</p>
<p class="product_company">Home Theaters</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/k6mibgw0/datacard/r/h/g/jiofi-jmr-541-original-imafpfhandhkptwc.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Data Cards</p>
<p class="product_price">Upto 60% off</p>
<p class="product_company">JioFi, Huawei & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/ja73ki80/webcam/pc-webcam/7/q/e/logitech-c310-original-imaeztzqny7jh7gh.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Webcams</p>
<p class="product_price">From ₹499</p>
<p class="product_company">Logitech, Quantum & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kb5eikw0/trimmer/z/d/n/0-5-10-mm-bt3101-15-stainless-steel-cordless-philips-original-imafsjquyq2hapug.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Trimmers & Hair Clippers</p>
<p class="product_price">From ₹700</p>
<p class="product_company">By Nova, Philips & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/k51cpe80/hearing-aid/e/e/s/ha50-behind-ear-beurer-original-imafnth6bue82ngc.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Best of Hearing Aids</p>
<p class="product_price">From ₹499</p>
<p class="product_company">Beurer & more</p>
</div>
</div>
</a>
<a href="#">
<div class="items">
<div>
<img src="https://rukminim1.flixcart.com/image/150/150/kex5ci80/printer/k/n/z/hp-laserjet-pro-m1136-mfp-original-imafvhnbe2dg4vem.jpeg?q=70">
</div>
<div class="item_info">
<p class="product_name">Top 10 Printers</p>
<p class="product_price">₹2399</p>
<p class="product_company">Print, Scan & copy</p>
</div>
</div>
</a>
</div>
<div id="nav">
<span class="item_carousel_left_arrow arrow" id="prev">
<i class="fas fa-arrow-left"></i>
</span>
<span class="item_carousel_right_arrow arrow" id="next">
<i class="fas fa-arrow-right"></i>
</span>
</div>
</div>
</div>
If you must have inline handlers, you can pass (this) - it is the same as event.target and use the saved div
<span class="item_carousel_left_arrow" id="prev" onclick="nav(this)">
<i class="fas fa-arrow-left"></i>
</span>
<span class="item_carousel_right_arrow" id="next" onclick="nav(this)">
<i class="fas fa-arrow-right"></i>
</span>
using
const shopItems = document.querySelector("#best_of_electronics .shop_items")
function nav(span) {
shopItems.style.transform = span.id==="prev" ? 'translateX(-44vw)' : 'translateX(0vw)';
}
Simply change next and previous function to these:
let next = () => {
document.querySelector(".shop_items").style.transform = 'translateX(-44vw)';
}
let previous = () => {
document.querySelector(".shop_items").style.transform = 'translateX(0vw)';
}
Or even you can change the onclick parameter and use only one function for both next and previous as this:
let nextPrev = (value) => {
document.querySelector(".shop_items").style.transform = 'translateX(' + value + ')';
}
<div>
<span class="item_carousel_left_arrow" id="arruw" onclick="nextPrev('0vw')">
<i class="fas fa-arrow-left"></i>
</span>
<span class="item_carousel_right_arrow" id="arruw" onclick="nextPrev('-44vw')">
<i class="fas fa-arrow-right"></i>
</span>
</div>

Jump on slideUp jQuery

I'm trying to create a material design Stepper using Materializecss and I'm almost there, but I'm having some strange issue with the slideUp animation on each step.
When it's just about to end, there is an abrupt jump. I prepared a jsFiddle for you to see, but I'm also writing the code in here:
https://jsfiddle.net/c3xLwzru/
HTML:
<div class="row">
<div class="col l8 m10 s12 offset-l2 offset-m1">
<h3 class="light center-align purple-text text-darken-4">Subscription</h3>
<div class="card">
<div class="card-content">
<ul class="stepper">
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">1</div>Step 1</div>
<div class="step-content">
Example 1
<div class="step-actions">
<button class="waves-effect waves-dark btn" type="submit">SEGUINTE</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">2</div>Step 2</div>
<div class="step-content">
Example 2
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">3</div>Step 3</div>
<div class="step-content">
Example 3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS (adding to Materializecss):
ul.stepper {
max-width: 800px;
}
.step:not(:last-child) {
position: relative;
margin-bottom: 24px;
}
.step:not(:last-child).active {
margin-bottom: 36px;
}
.step-title {
margin: 0 -20px;
cursor: pointer;
margin-bottom: 8px;
padding: 12px 44px 24px 20px;
display: block;
}
.step-title:hover {
background-color: #F0F0F0;
}
.step.active .step-title {
font-weight: 500;
}
.step-title .number {
margin-right: 10px;
display: inline-block;
height: 28px;
width: 28px;
color: white;
background-color: rgba(0,0,0,0.3);
border-radius: 50%;
text-align: center;
line-height: 28px;
font-weight: 400;
}
.step.active .number {
background-color: #9C27B0;
}
.step-content {
display: none;
height: calc(100% - 132px);
width: inherit;
overflow: auto;
margin-left: 41px;
margin-right: 24px;
}
.stepper>.step:not(:last-child)::after {
content: '';
position: absolute;
top: 50px;
left: 13.5px;
width: 1px;
height: calc(100% - 24px);
background-color: rgba(0,0,0,0.1);
}
.stepper>.step.active:not(:last-child)::after {
height: calc(100% - 12px);
}
.step-actions {
display: none;
padding-top: 16px;
margin-right: 24px;
}
.step.active .step-actions {
display: block;
}
And JS, using jQuery:
$(document).on("click", '.stepper .step-title:not(.active)', function () {
$(this).parent().addClass('active');
$(this).next().stop().slideDown('slow');
$(".step.active").not($(this).parent()).find(".step-content").stop().slideUp('slow');
$(".step.active").not($(this).parent()).removeClass('active');
});
I don't know what to do anymore. I tried everything and I couldn't find a reason for them to jump, man.
Could you help me?
Remove margin-bottom: 8px on .step-title and add margin-top: 8px to .step-content.
It should stop abrupt jump

How to create a button to every list item which opens a menu over it?

I am bulding a mobile responsive web page that looks like the "Play Market" from Android.
I have a list of divs which have a button inside them.
Each button opens a div with unique links.
how do I create something like this in an efficient way without positioning every div differently?
This is my JSfiddle: http://jsfiddle.net/e0byofe2/
I tried using the position: relative; property to the menu - it made a mess with the elements within the div.
I tried using position: absolute; which is ok, but I can't position the menu over each single div in a global way.
HTML:
<div class="main">
<div id="header-wrap">
<div id="header" class="clear">
<img src="arrow.jpg" />
<img src="search.jpg" style="float: right;" />
</div>
</div>
<div class="content">
<div id="apps-header">Apps</div>
<div class="line"></div>
<div class="apps">
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
</div>
</div>
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
</div>
</div>
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
<div style="width: 202px; height: 106px; border: 1px solid grey; position: relative; ">
</div>
</div>
</div>
<div class="app">
<img src="app_icon1.jpg" class="app_icon" />
<div class="app_info">
<div class="app_name">text text text</div>
<div class="app_comp">text </div>
<div class="stars">
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="star.png" />
<img src="hstar.png" />
</div>
<div class="free">FREE</div>
</div>
<div style="float: left;">
<img src="3dots.png" class="dots"/>
</div>
</div>
</div>
</div>
</div>
CSS:
body{
margin: 0;
height: 100%;
}
.main{
overflow-x: hidden;
width: 100%;
height: 100%;
}
#header-wrap {
width: 100%;
position: fixed;
background-color: #689f38;
height: 62px;
}
#header {
width: 100%;
position: absolute;
bottom: 0;
box-shadow: 0px 0px 19px rgb(10, 29, 90);
-webkit-box-shadow: 0px 0px 19px rgb(10, 29, 90);
-moz-box-shadow: 0px 0px 19px rgb(10, 29, 90);
}
.content{
padding-top: 80px;
width: 100%;
/*height: 100%;*/
background-color: #eeeeee;
}
#apps-header{
margin-left: 10px;
font-family: arial;
background-image: url('triangle.png');
background-position: bottom;
width: 86px;
background-repeat: no-repeat;
background-size: 10px;
}
.line{
width: 100%;
height: 2px;
background-color: #458b09;
margin-top: 10px;
}
.apps{
width: 100%;
/*border: 1px solid black;*/
padding-top: 10px;
height: 100%;
}
.app{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0px 0px 6px rgb(145, 145, 145);
-webkit-box-shadow: 0px 0px 6px rgb(145, 145, 145);
-moz-box-shadow: 0px 0px 6px rgb(145, 145, 145);
background-color: #fafafa;
padding: 10px 8px;
margin: 5px 8px;
display: inline-table; /******/
}
.app_icon{
width: 83px;
height: 83px;
float: left;
}
.app_info{
/*border: 1px solid red;*/
float: left;
width: 210px;
height: 81px;
padding-left: 20px;
}
.app_name{
font-family: arial;
font-size: 18px;
}
.app_comp{
font-family: arial;
font-size: 16px;
color: #595959;
}
.stars img{
float: left;
width: 14px;
height: 14px;
}
.free{
color: #69a03a;
font-family: arial;
position: relative;
bottom: -25px;
left: 105px;
font-size: 14px;
}
.3dots{
height: 25px;
}
The best example I can give you is when you open the "Play Market" on your Android and search for a random app, you get a bunch of app div results. When clicking the 3 dots on the top-right corner - it opens a list with 2 items over the specific apps div.
It should look like this:
When you choose an other app and press the 3 dots in the corner, you get the same list with 2 option, but over the apps div.
I've changed your structure little bit and made the 'dots' image as a button of the menu with jquery
HTML:
<img src="3dots.png" class="dots"/>
<div class="dots_menu">
link 1
link 2
</div>
CSS:
.app
{
position: relative;
}
.dots
{
float: right;
}
.dots_menu
{
display: none;
width: 202px;
position: absolute;
top: 35px;
right: 0;
z-index: 1;
background: rgb(238, 238, 238);
-webkit-box-shadow: 0px 4px 15px #000;
-moz-box-shadow: 0px 4px 15px #000;
box-shadow: 0px 4px 15px #000;
}
.dots_menu.show
{
display: block;
}
.dots_menu a
{
display: block;
text-decoration: none;
color: #000;
padding: 10px;
}
JQuery:
$(document).ready(function(){
$('.dots').click(function(){
$('.dots_menu').removeClass('show');
$(this).next().addClass('show');
});
});
example: http://jsfiddle.net/e0byofe2/3/
is that what you are looking for?

Categories

Resources