I created 2 Modals.The first modal, which is class = "modal" appears as it should when add button is clicked, but when I click the "+" sign on the form to display the next Modal which is the class = "category-modal that modal goes back to display none for some reason.
I made a runable code:
//get HTML elements username
let arrow = document.querySelector(".next");
let profSetting = document.querySelector(".prof-settings ul");
let asset = document.querySelector(".nav-side-asset");
//click event for username drop-down
arrow.addEventListener("click", () => {
arrow.classList.toggle('rotate-90');
profSetting.classList.toggle('transform');
asset.classList.toggle('position');
modal.classList.toggle('modal-position');
});
//get HTML elements assets
let arrowAsset = document.querySelector(".next-asset");
let assets = document.querySelector(".assets ul");
//click event for asset drop-down
arrowAsset.addEventListener("click", () => {
arrowAsset.classList.toggle('rotate-90');
assets.classList.toggle('transform');
})
//Generate tag ID
//get HTML elements modal
let modal = document.querySelector(".modal");
let addbtn = document.querySelector(".add-button");
let close = document.querySelector(".close");
let background = document.querySelector(".greyback")
//click event for modal pop up
addbtn.addEventListener("click", () => {
modal.style.display = "block";
genID()
background.style.display = "block";
})
//click event for modal remove itself
close.addEventListener("click", () => {
modal.style.display = "none";
})
function genID() {
let minNum = 0;
let maxNum = 1000;
let randomNum = Math.floor(Math.random() * (maxNum + 1) + minNum)
document.querySelector(".id").innerHTML = randomNum;
}
//get modal for category and department
let categoryModal = document.querySelector(".category-modal");
let categoryAdd = document.querySelector(".category-add");
let cancel = document.querySelector(".cancel");
categoryAdd.addEventListener("click", () => {
categoryModal.style.display = "block";
})
body {
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
background-color: var(--light-purplr);
}
:root {
--dark-purple: #3B3F8C;
--light-purplr: #4449A6;
--light-green: #6BBF54;
--darkish-green: #6FA656;
--lighter-white: #F2F2F2;
--light-white: #e9e9e9;
}
.greyback {
background-color: rgb(128, 128, 128, 0.7);
width: 120em;
height: 60.55em;
position: absolute;
display: none;
z-index: 1;
}
.nav-top {
background-color: var(--lighter-white);
display: grid;
grid-template-columns: 15em 70em 0em;
margin-left: -1em;
}
.nav-top ul {
display: flex;
width: 20vw;
margin-top: 1.5em;
}
.nav-top li {
list-style-type: none;
margin-left: 1em;
display: flex;
cursor: pointer;
padding: 8px 8px 8px 8px;
}
.nav-top li:hover {
background-color: var(--light-white);
}
.nav-banner img {
margin-left: 2em;
margin-top: 1em;
width: 14em;
height: 3em;
}
.nav-top ul img {
width: 1em;
height: 1em;
}
.profile {
width: 2em !important;
height: 2em !important;
margin-top: -0.5em;
}
.nav-side,
.nav-side-asset {
background-color: var(--lighter-white);
width: 13em;
height: 2.5em;
}
.nav-side ul,
.nav-side-asset ul {
background-color: var(--lighter-white);
position: absolute;
height: 2.5em;
margin-top: 8px;
width: 10.5em;
}
.nav-side li,
.nav-side-asset li {
list-style-type: none;
margin-top: 10px;
margin-left: 5px;
}
.profile-side,
.asset-side {
display: flex;
}
.profile-side img,
.asset-side img {
width: 1.5em;
height: 1.5em;
margin-left: 1em;
margin-top: 0.5em;
}
.profile-side p,
.asset-side p {
margin-left: 3em;
margin-top: 0.8em;
position: absolute;
}
.next,
.next-asset {
margin: 1em 11em !important;
width: 10px !important;
height: 10px !important;
position: absolute;
cursor: pointer;
transition: .2s transform ease;
}
.prof-settings ul,
.assets ul {
background-color: var(--lighter-white);
padding-bottom: 3em;
cursor: pointer;
display: none;
}
.assets li {
display: flex;
}
.assets img {
padding-right: 1em;
}
.list {
width: 1em;
}
.add-asset {
width: 1em;
margin-left: -1px;
}
.in,
.out {
width: 1.3em;
margin-left: -4px;
}
.assets ul {
padding-bottom: 6em !important;
}
.prof-settings li:hover,
.assets li:hover {
color: var(--light-green);
}
.rotate-90 {
transform: rotate(90deg);
}
.transform {
display: block !important;
}
.position {
margin-top: 5em;
}
.modal {
position: absolute;
/*display: none;*/
z-index: 2
}
.asset-modal-box {
background-color: var(--light-white);
width: 40em;
height: 40em;
margin-left: 40em;
}
.modal-position {
margin-top: -5em;
}
.form {
padding: 1em;
}
.section-left {
position: absolute;
width: 7em;
}
.section-right {
position: relative;
margin-left: 20em;
margin-top: 2.1em;
}
.brand-container,
.model-container,
.serial-container {
margin-bottom: 1em;
}
.item-container,
.date-purchased-container,
.cost-container,
.tag-container,
.tag-container {
margin-bottom: 1em;
}
.description-container,
.model-container,
.serial-container,
.brand-container,
.item-container,
.date-purchased-container,
.tag-container,
.cost-container {
display: grid;
}
.description-container {
margin-top: 3em;
margin-bottom: 1em;
}
.tag-container {
display: flex;
}
.item {
width: 20em;
}
.l-purchased {
width: 8em;
}
.currency {
background-color: var(--darkish-green);
width: 2em;
}
.rand {
display: flex;
height: 2em;
padding-left: 1em;
}
.rand p {
margin-top: 7px;
margin-left: -6px;
}
.cost {
margin-left: 1em;
position: absolute;
}
.item,
.brand,
.model,
.serial,
.date,
.cost,
.description,
.purchased,
.tag {
height: 26px;
}
.buttons {
margin: 0em 1em;
padding-top: 12em;
}
.submit,
.close {
margin-left: 6em;
padding: 1em 2em;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
border: none;
background-color: var(--light-green);
}
.close:hover {
background-color: red;
}
.department {
margin-left: 4.3em;
}
select {
width: 10em;
}
.category-modal {
background-color: var(--light-green);
width: 37em;
padding: 7px;
position: absolute;
margin-top: -32em;
display: none;
}
.category-modal h3 {
color: var(--dark-purple);
}
.line,
.line-bottom {
border-top: 1px solid black;
}
.line-bottom {
margin-top: 1em;
}
.category-input {
padding: 5px;
margin-left: 28.8em;
margin-top: 1em;
}
.add,
.cancel {
width: 4em;
border: none;
background-color: var(--dark-purple);
border-radius: 3px;
cursor: pointer;
margin-top: 1em;
color: var(--light-white);
padding: 5px;
}
.add {
margin-left: 33em;
}
.cancel {
margin-left: 1em;
}
.close-category {
position: absolute;
margin-top: -2.5em;
margin-left: 35em;
cursor: pointer;
}
<div class="greyback"></div>
<header>
<nav class="nav-top">
<div class="nav-banner">
<img src="./references/images/CS247-Pastel-Logo (1).jpg" alt="CS247 Logo">
</div>
<ul class="left">
<li><img src="./references/images/List icon.png" alt="list icon">List of Assets</li>
<li class="add-button"><img src="./references/images/add icon.png" alt="Add button">Add an Asset</li>
<li><img src="./references/images/Search.png" alt="Search">Search</li>
</ul>
<ul class="right">
<li><img src="./references/images/clock.png" alt="clock">Changelog</li>
<li><img src="./references/images/tag.png" alt="clock">Buy Asset Tags</li>
<li><img class="profile" src="./references/images/profile pic.png" alt="profile pic"></li>
</ul>
</nav>
</header>
<main>
<aside>
<nav class="nav-side">
<div class="profile-side">
<img src="./references/images/profile pic.png" alt="profile pic">
<img class="next" src="./references/images/next.png" alt="next">
<p>Username</p>
</div>
<div class="prof-settings">
<ul>
<li>My Profile</li>
<li>Change Password</li>
<li>Log out</li>
</ul>
</div>
</nav>
<nav class="nav-side-asset">
<div class="asset-side">
<img src="./references/images/asset-management.png" alt="Asset icon">
<img class="next-asset" src="./references/images/next.png" alt="next">
<p>Assets</p>
</div>
<div class="assets">
<ul>
<li><img class="list" src="./references/images/List icon.png" alt="list icon">List of Assets</li>
<li><img class="add-asset" src="./references/images/add icon.png" alt="Add button">Add an Asset</li>
<li><img class="in" src="./references/images/checkbox-in.png" alt="in icon">Assets In</li>
<li><img class="out" src="./references/images/X-out.png" alt="out icon">Assets Out</li>
</ul>
</div>
</nav>
</aside>
<div class="modal">
<div class="asset-modal-box">
<form class="form">
<!--Left of form inputs and labels-->
<div class="section-left">
<div class="tag-container">
<label for="tag" class="l-tag">Tag ID:</label>
<label class="id"></label>
</div>
<div class="item-container">
<label for="item" class="l-item">Item</label>
<input type="text" name="item" class="item">
</div>
<div class="date-purchased-container">
<label for="item" class="l-purchased">Date of Purchase</label>
<input type="date" name="item" class="purchased">
</div>
<div class="cost-container">
<label for="item" class="l-cost">Cost</label>
<div class="currency">
<div class="rand">
<p>R</p>
<input type="text" name="item" class="cost">
</div>
</div>
</div>
</div>
<!--Right of form inputs and labels-->
<div class="section-right">
<div class="brand-container">
<label for="brand" class="l-brand">Brand</label>
<input type="text" name="brand" class="brand">
</div>
<div class="model-container">
<label for="model" class="l-model">Model</label>
<input type="text" name="Model" class="model">
</div>
<div class="serial-container">
<label for="serial" class="l-serial">Serial No</label>
<input type="text" name="serial" class="serial">
</div>
</div>
<div class="description-container">
<label for="description" class="l-description">Description</label>
<input type="text" name="serial" class="description">
</div>
<!--Selections-->
<div class="options">
<label class="category" for="category">Category
<select name="category" id="category" class="category">
</select>
<button class="category-add">+</button>
</label>
<label class="department" for="department">Department
<select name="department" id="department" class="department-select"></select>
<button class="department-add">+</button>
</label>
<!--Modal for select options input-->
<div class="category-modal">
<h3>Add Catagory</h3>
<div class="close-category">X</div>
<div class="line"></div>
<p>If you want to add a new category of assets, you're in the right spot. Add a category for computer equipment, wireless keyboards, or any assets you're working with.
</p>
<input type="text" class="category-input">
<div class="line-bottom"></div>
<button class="add">Add</button>
<button class="cancel">Cancel</button>
</div>
</div>
<!--Form Buttons-->
<div class="buttons">
<button class="submit">Add Item</button>
<button class="close">Close</button>
</div>
</form>
</div>
</div>
</main>
I have attached a screenshot on what buttons to press to get to the issue:
I installed the code you have given and played with it. I noticed that the issue you are facing is due to the page being refreshed, the normal behaviour when you click on a button inside a form, which you can prevent with e.preventDefault(). For categoryAdd as an example:
categoryAdd.addEventListener("click", (e) => {
e.preventDefault();
categoryModal.style.display = "block";
});
Add e.preventDefault() for each button that don't need to refresh the page, after passing the event e as parameter like I did above.
Related
I am doing a school project of designing an ecommerce webpage. I am new to this and is facing some problem at the shopping cart check out portion. Would really appreciate any help from you guys ! :)
There's already an item (let's call it item A) in the cart every time the webpage reload. I am able to get a correct total price computation for every increasing quantity of item A in the cart. However, when I add another item into the cart and increase the quantity of the newly added item , the total price won't update. I also noticed that when I increase the quantity of item A when there is other items in the cart. The total price = (quantity * total amount) in the cart instead of computing just the price of item.
Here's the js, css and html code:
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', ready)
} else {
ready()
}
function ready() {
var removeCartItemButtons = document.getElementsByClassName('btn-1');
console.log(removeCartItemButtons)
for (var i = 0; i < removeCartItemButtons.length; i++) {
var button = removeCartItemButtons[i]
button.addEventListener('click', removeCartItem)
}
var quantityInputs = document.getElementsByClassName('cart-quantity-input')
for (var i = 0; i < quantityInputs.length; i++) {
var input = quantityInputs[i]
input.addEventListener('change', quantityChanged)
}
var addToCartButtons = document.getElementsByClassName('btn-2')
for (var i = 0; i < addToCartButtons.length; i++) {
var button = addToCartButtons[i]
button.addEventListener('click', addToCartClicked)
}
document.getElementsByClassName
}
function removeCartItem(event) {
var buttonClicked = event.target
buttonClicked.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.remove()
updateCartTotal()
}
function quantityChanged(event) {
var input = event.target
if (isNaN(input.value) || input.value <= 0) {
input.value = 1
}
updateCartTotal()
}
function addToCartClicked(event) {
var button = event.target
var shopItem = button.parentElement
var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src
console.log(title, price, imageSrc)
addItemToCart(title, price, imageSrc)
updateCartTotal()
}
function addItemToCart(title, price, imageSrc) {
var cartRow = document.createElement('div')
cartRow.classList.add()
var cartItems = document.getElementsByClassName('cart-items')[0]
var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
for (var i = 0; i < cartItemNames.length; i++) {
if (cartItemNames[i].innerText == title) {
alert('This item is already been added to the cart')
return
}
}
var cartRowContents = `
<div class="cart-items">
<table class="cart-row">
<tr>
<td>
<div class="cart-info">
<img class="cart-item-image"src="${imageSrc}" >
<div>
<p class="cart-item-title">${title}</p>
<small>Price: ${price}</small>
<br>
<button class="btn-1" type="button">Remove</button>
</div>
</div>
</td>
<td><input class="cart-quantity-input" type="number" min="1" value="1"></td>
<td
class="cart-price">${price}
</td >
</tr>
</table>
</div>`
cartRow.innerHTML = cartRowContents
cartItems.append(cartRow)
cartRow.getElementsByClassName('btn-1')[0].addEventListener('click', removeCartItem)
cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}
function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName('cart-items')[0]
var cartRows = cartItemContainer.getElementsByClassName('cart-row')
var total = 0
for (var i = 0; i < cartRows.length; i++) {
var cartRow = cartRows[i]
var quantityElement = cartItemContainer.getElementsByClassName('cart-quantity-input')[0]
var priceElement = cartRow.getElementsByClassName('cart-price')[0]
var price = parseFloat(priceElement.innerHTML.replace('$', ''))
var quantity = quantityElement.value
total = total + (price * quantity)
}
total = (Math.round(total * 100) / 100).toFixed(2)
document.getElementsByClassName('cart-total-price')[0].innerHTML = '$' + total
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar {
display: flex;
align-items: center;
padding: 20px;
}
nav {
flex: 1;
text-align: right;
}
nav ul {
display: inline-block;
list-style-type: none;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
a {
text-decoration: none;
color: black;
}
p {
color: black;
}
.container {
max-width: 1300px;
margin: auto;
padding-left: 50px;
padding-right: 50px;
}
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.col-2 {
flex-basis: 50%;
min-width: 400px;
}
.col-2 img {
max-width: 100%;
padding: 50px 0;
}
.col-2 h1 {
font-size: 50px;
line-height: 60px;
margin: 25px 0;
}
.btn {
display: inline-block;
background: #ff523b;
color: #fff;
padding: 8px 18px;
margin: 30px 0;
border-radius: 30px;
cursor: pointer;
outline: none;
}
.col-4 {
flex-basis: 25%;
padding: 10px;
min-width: 200px;
margin-bottom: 50px;
transition: transform 0.5s;
}
.col-4 img {
width: 100%;
}
.small-container {
max-width: 1080px;
margin: auto;
padding-left: 50px;
padding-right: 50px;
}
.title {
text-align: center;
margin: 0 auto 30px;
position: relative;
line-height: 50px;
color: black
}
.title::after {
content: '';
background: black;
width: 80px;
height: 5px;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.col-4:hover {
transform: translateY(-5px);
}
.btn-2 {
display: inline-block;
background: #ff523b;
color: #fff;
padding: 8px 18px;
margin: 30px 0;
border-radius: 30px;
cursor: pointer;
border: none;
outline: none;
}
/*------footer-----*/
.footer {
background: #000;
color: #8a8a8a;
font-size: 14px;
padding: 40px 0 20px;
}
.footer-col-1 {
min-width: 250px;
margin-bottom: 10px;
flex-basis: 30%;
flex: 1;
text-align: center;
}
.footer-col-1 img {
width: 200px;
margin-bottom: 20px;
}
.footer p {
color: #8a8a8a;
}
/*------cart-----*/
.cart-page {
margin: 80px auto;
}
table {
width: 100%;
border-collapse: collapse;
}
.cart-info {
display: flex;
flex-wrap: nowrap;
}
th {
text-align: justify;
padding: 5px;
color: #fff;
background: #ff523b;
font-weight: normal;
}
td {
padding: 10px 5px;
width: 1px;
}
td input {
width: 45px;
height: 30px;
padding: 5px;
border-radius: 30px;
text-align: right;
}
td a {
color: #ff523b;
font-size: 10px;
}
td img {
width: 80px;
height: 80px;
margin-right: 10px;
}
.btn-1 {
display: inline-block;
background: #ff523b;
color: #fff;
padding: 8px 10px;
margin: 3px 0;
border-radius: 30px;
font-size: 10px;
cursor: pointer;
border: none;
outline: none;
}
.total-price {
display: flex;
justify-content: flex-end;
}
.total-price table {
border-top: 3px solid #ff523b;
width: 100%;
max-width: 350px;
margin: 30px 0;
}
td:last-child {
text-align: right;
}
th:last-child {
text-align: right;
}
.btn-purchase {
display: inline-block;
background: #ff523b;
color: #fff;
padding: 8px 40px;
margin: 30px 0;
border-radius: 30px;
outline: none;
border: none;
cursor: pointer;
}
.btn-purchase:hover {
transform: translateY(-3px);
}
.btn-1:hover {
transform: translateY(-1px);
}
.cart-item {
width: 60%;
}
/*------------ account page --------------*/
.account-page {
padding: 50px 0;
}
.form-container {
background: #fff;
width: 300px;
height: 300px;
position: relative;
text-align: center;
padding: 20px 0;
margin: auto;
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.form-container span {
font-weight: bold;
padding: 0 10px;
color: #555;
cursor: pointer;
width: 100px;
display: inline-block;
}
.form-btn {
display: inline-block;
}
.form-container form {
max-width: 300px;
padding: 0 20px;
position: absolute;
top: 130;
transition: transform 1s;
}
form input {
width: 100%;
height: 30px;
margin: 10px 0;
padding: 0 10px;
border: 1px solid #ccc;
}
form .btn {
width: 100%;
border: none;
cursor: pointer;
margin: 10px 0;
}
form .btn:focus {
outline: none;
}
#LoginForm {
left: -300px;
}
#RegForm {
left: 0;
}
form a {
font-size: 12px;
}
#Indicator {
width: 100px;
border: none;
background: #ff523b;
margin-top: 8px;
height: 3px;
transform: translateX(100px);
transition: transform 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internet Security PBIL</title>
<link rel="stylesheet" href="style.css">
<script src="store.js" async></script>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="logo">
<img src="yeet/yeet.jpg" width="80px">
</div>
<nav>
<ul>
<li>Home</li>
<li>Account</li>
</ul>
</nav>
</div>
<div class="row">
<div class="col-2">
<h1>Good Sport <br>Good game!</h1>
<p>Come buy our good items now!</p>
Explore Now
</div>
<div class="col-2">
<img src="yeet/image1.png">
</div>
</div>
</div>
<!-------- products -------->
<div class="small-container">
<h2 class="title">Shirt</h2>
<div class="row">
<div class="col-4">
<img class="shop-item-image" src="yeet/product-1.jpg">
<h4 class="shop-item-title">Red</h4>
<p class="shop-item-price">$10.00</p>
<button class="btn-2">Add to cart</button>
</div>
<div class="col-4">
<img class="shop-item-image" src="yeet/product-2.jpg">
<h4 class="shop-item-title">Blue</h4>
<p class="shop-item-price">$20.00</p>
<button class="btn-2">Add to cart</button>
</div>
<div class="col-4">
<img class="shop-item-image" src="yeet/product-3.jpg">
<h4 class="shop-item-title">Green</h4>
<p class="shop-item-price">$30.00</p>
<button class="btn-2">Add to cart</button>
</div>
<div class="col-4">
<img class="shop-item-image" src="yeet/product-4.jpg">
<h4 class="shop-item-title">Yellow</h4>
<p class="shop-item-price">$40.00</p>
<button class="btn-2">Add to cart</button>
</div>
</div>
<h2 class="title">Shorts</h2>
<div class="row">
<div class="col-4">
<img class="shop-item-image" src="yeet/product-5.jpg">
<h4 class="shop-item-title">1 printed t-shirt</h4>
<p class="shop-item-price">$50.00</p>
<button class="btn-2">Add to cart</button>
</div>
<div class="col-4">
<img class="shop-item-image" src="yeet/product-6.jpg">
<h4 class="shop-item-title">2 printed t-shirt</h4>
<p class="shop-item-price">$60.00</p>
<button class="btn-2">Add to cart</button>
</div>
<div class="col-4">
<img class="shop-item-image" src="yeet/product-7.jpg">
<h4 class="shop-item-title">3 printed t-shirt</h4>
<p class="shop-item-price">$70.00</p>
<button class="btn-2">Add to cart</button>
</div>
<div class="col-4">
<img class="shop-item-image" src="yeet/product-8.jpg">
<h4 class="shop-item-title">4 printed t-shirt</h4>
<p class="shop-item-price">$80.00</p>
<button class="btn-2">Add to cart</button>
</div>
</div>
</div>
<!----- cart items details ----->
<section class="small-container cart-page">
<h2 class="title">Cart</h2>
<table>
<tr>
<th class="cart-item">Product</th>
<th class="cart-qunatity">Quantity</th>
<th class="cart-price">Subtotal</th>
</tr>
</table>
<div class="cart-items">
<table class="cart-row">
<tr>
<td>
<div class="cart-info">
<img class="cart-item-image" src="yeet/buy-1.jpg">
<div>
<p class="cart-item-title">Red Printed Tshirt</p>
<small>Price: $50.00</small>
<br>
<button class="btn-1" type="button">Remove</button>
</div>
</div>
</td>
<td><input class="cart-quantity-input" type="number" min="1" value="1"></td>
<td><span class="cart-price">$50.10</span>
</td>
</tr>
</table>
</div>
<!--- <table>
<tr class="cart-row">
<td>
<div class="cart-info">
<img class="cart-item-image" src="yeet/buy-2.jpg" >
<div>
<p class="cart-item-title">Red Printed Tshirt</p>
<small>Price: $80.0</small>
<br>
<button class="btn-1" type="button">Remove</button>
</div>
</div>
</td>
<td><input class="cart-quantity-input" type="number" min="1" value="1"></td>
<td class="cart-price">$80.50</td>
</tr>
</table>
</div> --->
<div class="total-price">
<table>
<tr>
<td class="cart-total-title">Total</td>
<td class="cart-total-price">$50.50</td>
</tr>
<tr>
<td>
<button class="btn-purchase" type="button">Purchase</button>
</td>
</tr>
</table>
</div>
</section>
<!-----footer----->
<div class="footer">
<div class="container">
<div class="footer-col-1">
<p>Products brought to you by Yeet!</p>
<img src="yeet/yeet.jpg">
</div>
</div>
</div>
</body>
</html>
Thank you guys for your help!
(ps: please ignore the naming of my items as is not finalize yet haha,cheers!)
Ah, it was hard to see, so I made an answer of it:
you used once cartItemContainer instead of cartRow, so you couldn't understand my comment... :-)
var quantityElement = cartItemContainer.getElementsByClassName('cart-quantity-input') [0] <- should be cartRow
var priceElement = cartRow.getElementsByClassName('cart-price')[0]
I am currently trying to make a tribute page with collapsible content. My problem is that when you click on the first collapsible, the rest of them open. I would like for a collapsible to only open when it is clicked. They are 9 in total and it makes no sense for all of them to open when user clicks just one.
body {
margin: 0px 0px 0px 0px;
}
header {
width: 100%;
height: 100px;
background-color: silver;
text-align: center;
}
#main {
background-color: silver;
width: 100%;
margin: auto;
}
body {
padding: 10px;
}
#img-div {
width: 60%;
margin: auto;
display: flex;
justify-content: center;
height: 400px;
background-color: white;
flex-direction: column;
text-align: center
}
#tribute-info {
width: 100%;
height: 300px;
background-color: white;
}
body {
font-family: "Roboto";
font-size: 15px;
padding: 20px;
}
.collapse-list {
margin-bottom: 0;
padding-left: 0;
list-style: none;
border-bottom: 1px solid #e0e0e0;
}
.collapse-open {
display: none;
}
.collapse-panel {
visibility: hidden;
max-height: 0;
opacity: 0;
transition: max-height .1s, visibility .3s, opacity .3s;
}
.collapse-open:checked~.collapse-panel {
max-height: 100%;
opacity: 100;
visibility: visible
}
.collapse-list li {
margin-bottom: 0;
}
.collapse-list .collapse-btn {
border-top: 1px solid #e0e0e0;
cursor: pointer;
display: block;
padding: 15px 10px;
margin-bottom: 0;
color: #4285f4;
font-weight: normal;
transition: background-color .2s ease;
}
.collapse-list .collapse-btn:hover {
background: #eee;
}
.collapse-open~.collapse-btn:before {
content: "↓";
float: right;
}
.collapse-open:checked~.collapse-btn:before {
content: "↑";
}
.collapse-list .collapse-inner {
padding: 10px
}
<header>
<h1>Remembering Dr. Stella Ameyo Adadevoh</h1>
<h4>The Woman Who Saved Nigeria From Ebola</h4>
</header>
<main id="main">
<div id="img-div">
<img id="image" src="./resources/images/adadevoh.jpg" alt="an image of the late Dr Adadevoh">
<h5>Dr. Stella Ameyo Adadevoh</h5>
</div>
</main>
<section>
<div class="collapse-list" id="tribute-info">
<input class="collapse-open" type="checkbox" id="collapse-1">
<label class="collapse-btn" for="collapse-1">Early Life And Family</label>
<div class="collapse-panel">
<div class="collapse-inner">
<p>Ameyo Adadevoh was born in Lagos, Nigeria in October 1956. She spent the majority of her life in Lagos, Nigeria. Her father and great-grandfather, s</p>
</div>
</div>
<input class="collapse-open" type="checkbox" id="collapse-2">
<label class="collapse-btn" for="collapse-2">Education</label>
<div class="collapse-panel">
<div class="collapse-inner">
<p>She went to preschool at the Mainland Preparatory Primary School in Yaba, Lagos (1961-1962). </p>
</div>
</div>
<input class="collapse-open" type="checkbox" id="collapse-3">
<label class="collapse-btn" for="collapse-3">Medical Education And Career</label>
<div class="collapse-panel">
<div class="collapse-inner">
<p>Dr. Adadevoh graduated from the University of Lagos, </p>
</div>
</div>
</div>
</section>
This is the culprit clause: .collapse-open:checked ~ .collapse-panel - all successor sibling elements of class collapse-panel open when a checkbox is checked.
The remedy is a move to the adjacent sibling selector + modifying the selector that opens the panel on the way:
/* old */ .collapse-open:checked ~ .collapse-panel
/* new */ .collapse-open:checked + label + .collapse-panel
The selectors controlling the display of the arrow have been altered to use the adjacent sibling selector as well.
body {
margin: 0px 0px 0px 0px;
}
header {
width: 100%;
height: 100px;
background-color: silver;
text-align: center;
}
#main {
background-color: silver;
width: 100%;
margin: auto;
}
body {
padding: 10px;
}
#img-div {
width: 60%;
margin: auto;
display: flex;
justify-content: center;
height: 400px;
background-color: white;
flex-direction: column;
text-align: center
}
#tribute-info {
width: 100%;
height: 300px;
background-color: white;
}
body {
font-family: "Roboto";
font-size: 15px;
padding: 20px;
}
.collapse-list {
margin-bottom: 0;
padding-left: 0;
list-style: none;
border-bottom: 1px solid #e0e0e0;
}
.collapse-open {
display: none;
}
.collapse-panel {
visibility: hidden;
max-height: 0;
opacity: 0;
transition: max-height .1s,
visibility .3s,
opacity .3s;
}
.collapse-open:checked + label + .collapse-panel {
max-height: 100%;
opacity: 100;
visibility: visible
}
.collapse-list li {
margin-bottom: 0;
}
.collapse-list .collapse-btn {
border-top: 1px solid #e0e0e0;
cursor: pointer;
display: block;
padding: 15px 10px;
margin-bottom: 0;
color: #4285f4;
font-weight: normal;
transition: background-color .2s ease;
}
.collapse-list .collapse-btn:hover {
background: #eee;
}
.collapse-open + .collapse-btn:before {
content: "↓";
float: right;
}
.collapse-open:checked + .collapse-btn:before {
content: "↑";
}
.collapse-list .collapse-inner {
padding: 10px
}
<html>
<body>
<header>
<h1>Remembering Dr. Stella Ameyo Adadevoh</h1>
<h4>The Woman Who Saved Nigeria From Ebola</h4>
</header>
<main id ="main">
<div id="img-div">
<img id ="image" src="./resources/images/adadevoh.jpg" alt="an image of the late Dr Adadevoh">
<h5>Dr. Stella Ameyo Adadevoh</h5>
</div>
</main>
<section>
<div class="collapse-list" id="tribute-info">
<input class="collapse-open" type="checkbox" id="collapse-1">
<label class="collapse-btn" for="collapse-1">Early Life And Family</label>
<div class="collapse-panel">
<div class="collapse-inner">
<p>Ameyo Adadevoh was born in Lagos, Nigeria in October 1956. She spent the majority of her life in Lagos, Nigeria. Her father and great-grandfather, s</p>
</div>
</div>
<input class="collapse-open" type="checkbox" id="collapse-2">
<label class="collapse-btn" for="collapse-2">Education</label>
<div class="collapse-panel">
<div class="collapse-inner">
<p>She went to preschool at the Mainland Preparatory Primary School in Yaba, Lagos (1961-1962). </p>
</div>
</div>
<input class="collapse-open" type="checkbox" id="collapse-3">
<label class="collapse-btn" for="collapse-3">Medical Education And Career</label>
<div class="collapse-panel">
<div class="collapse-inner">
<p>Dr. Adadevoh graduated from the University of Lagos, </p>
</div>
</div>
</div>
</section>
</body>
</html>
I was trying to create a button(on bottom right) which will open a form after clicking or hovering on it. The form will slide(slowly) open and close after clicking on login, my code is making the button going down as the form is opening.
Also the button should be on the right side, I've tried float:right; and right:0; to fix the button to right but it's not working.
Here's my code:
function showForm(){
document.getElementById('loginForm').style.display = "block";
}
function hideForm(){
document.getElementById('loginForm').style.display = "none";
}
*{
margin: 0;
padding: 0;
box-sizing: border-box
}
.no-show{display:none;}
.form-container {
position:absolute;
bottom:0;
right:0;
float: right;
width:100%;
}
body { font-family: tahoma; }
#loginForm {
display: none;
background: #ccc;
width: 250px;
height: 100px;
padding: 20px;
color: #333;
}
.label {
cursor: pointer;
display:block;
padding: 5px 15px;
font-size: 16px;
font-weight: bold;
}
.form-label {
width: 70px;
font-size: 12px;
font-weight: bold;
}
.form-field {
width: 180px;
}
.form-elements {
font-size: 0px;
margin: 10px 0 0 0;
display: block;
}
.form-label, .form-field {
display: inline-block;
}
.form-field input {
padding: 3px 5px;
}
.submit-btn input {
margin-left: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-container">
<form>
<p id="login" onmouseover="showForm();" onmouseout="hideForm();">
<span class="label">Login</span>
<span id="loginForm">
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field"><input type="name" /></span>
</span>
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field"><input type="password" /></span>
</span>
</span>
</p>
</form>
</div>
Here's the working fiddle- https://jsfiddle.net/d5L8bywk/1/
Form should open(up side) slowly with ease and should close after click on login button.
It should look like this:
Check this code. No jQuery needed, you can achieve this with pure css transition in combination with height property.
function showForm() {
document.getElementById('loginForm').classList.add('show');
}
function hideForm() {
document.getElementById('loginForm').classList.remove('show');
}
*{
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
font-family: tahoma;
height: 100vh;
}
.no-show{
display:none;
}
.form-container {
position: absolute;
bottom: 40px;
right: 80px;
left: auto;
top: auto;
width: 230px;
}
#loginForm {
background: #ccc;
width: 250px;
color: #333;
height: 0;
overflow: hidden;
transition: all 0.5s;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#loginForm.show {
height: 150px;
}
.label {
cursor: pointer;
display:block;
padding: 5px 15px;
font-size: 16px;
font-weight: bold;
}
.form-label {
width: 70px;
font-size: 12px;
font-weight: bold;
}
.form-field {
width: 180px;
}
.form-elements {
font-size: 0px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
}
.form-label, .form-field {
display: inline-block;
width: 100%;
}
.form-field input {
padding: 3px 5px;
}
.submit-btn input {
margin-left: 70px;
}
#login {
text-align: center;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-container">
<form>
<div id="loginForm" onmouseleave="hideForm();">
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field"><input type="name" /></span>
</span>
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field"><input type="password" /></span>
</span>
</div>
</form>
<span id="login" class="label" onmouseover="showForm();">Login</span>
</div>
#login{
float:right
}
<div class="form-container">
<form>
<p id="login" onmouseover="showForm();" onmouseout="hideForm()">
<span id="loginForm">
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field"><input type="name"></span>
</span>
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field"><input type="password"></span>
</span>
</span>
<span class="label">Login</span></p>
</form>
</div>
I have two panels which are built using the same classes, but their content is slightly different. I have to hide and toggle classes depending on the options the user selects.
I've got the functionality working for the panels, but the issue is that the jQuery its being applied to both panels at the same time on click, which then stops the panels working how I would like. I only want the functions to be applied on click to that specific panel.
I've been reading and I thought that by using (this) would help fix this problem. Same as using .each(). But I've not been able to fix it.
Updated
Here is a jsFiddle, showing how the panels currently work. - new fiddle
User clicks on option 'everyday' within the '1.choose your range' section of the first panel
This triggers option '2 . choose your style' to appear and '1.choose your range' section to hide in the first panel
However when clicking on any of these options its being applied to the second panel also, which I do not want. The second panel should only animate when the user selects the options within that panel.
The panels shouldn't animate unless the user has selected an option within that specific panel.
Here is my jQuery Code:
$('.price-colour li').on('click', function() {
$('.price-colour li').not(this).removeClass('selected');
$(this).toggleClass('selected');
})
$('.style-type').on('click', function() {
$('.style-type').not(this).removeClass('selected');
$(this).toggleClass('selected');
})
$('#basket-cart').on('click', function() {
$('#popup-shopping').toggleClass('visible');
})
$('#popup-shopping__close-icon').on('click', function() {
$('#popup-shopping').toggleClass('visible');
})
$('.edit-txt').on('click', function() {
$('.range-item').not(this).removeClass('selected');
$(this).parents().find('.price-item-section').toggleClass('inactive');
$(this).addClass('hidden');
$(this).parents().find('.link-btn--solid').toggleClass('inactive');
})
$('.range-item').on('click', function() {
$('.range-item').not(this).removeClass('selected');
$(this).toggleClass('selected');
$('.edit-txt').removeClass('hidden');
$(this).parents().find('.price-item-section').toggleClass('inactive');
$(this).parents().find('.link-btn--solid').toggleClass('inactive');
})
body {
font-size: 14px;
line-height: 20px;
}
h1,
h2,
h3,
h4,
h5 {
font-size: 14px;
line-height: 20px;
}
.o-unlist {
list-style: none;
margin: 0;
padding: 0;
}
.price-item {
border-top: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
}
.price-item-top {
background: black;
padding: 20px;
color: white;
}
.price-item-section {
padding: 15px 30px;
border-bottom: 2px solid black;
}
.price-item-section.inactive h3 {
color: #7d7d7d;
}
.price-item-section.inactive .price-range,
.price-item-section.inactive .price-detail,
.price-item-section.inactive .price-style,
.price-item-section.inactive .price-item-three {
opacity: 0;
visibility: hidden;
transform: scaleY(0);
height: 0;
margin: 0;
padding: 0;
border: none;
overflow: hidden;
}
.price-range {
opacity: 1;
visibility: visible;
transform: scaleY(1);
height: auto;
transition-duration: 0.3s;
transition-property: transform;
}
.price-item-three {
padding: 15px 50px 0;
border-top: 2px solid black;
margin: 10px -30px 0;
}
.price-style {
margin-top: 50px;
opacity: 1;
visibility: visible;
transform: scaleY(1);
height: auto;
transition-duration: 0.3s;
transition-property: transform;
}
.price-style p {
margin: 10px 0 0;
padding: 0;
letter-spacing: 0.15px;
}
.style-type {
opacity: 0.6;
padding: 5px;
transition-duration: 0.3s;
transition-property: all;
cursor: pointer;
}
.style-type.selected {
opacity: 1;
}
.price-detail {
margin-top: 20px;
opacity: 1;
visibility: visible;
transform: scaleY(1);
height: auto;
transition-duration: 0.3s;
transition-property: transform;
}
.price-colour {
list-style: none;
text-align: center;
margin: 0 -7px 5px;
padding: 0;
}
.price-colour li {
display: inline-block;
margin: 0 9px;
padding: 2px;
border-radius: 100px;
cursor: pointer;
border: 1px solid transparent;
transition-duration: 0.3s;
transition-property: all;
}
.price-colour li span {
border-radius: 100px;
height: 20px;
width: 20px;
display: block;
}
.price-colour li#pink span {
background: pink;
}
.price-colour li#yellow span {
background: yellow;
}
.price-colour li#black span {
background: black;
}
.price-colour li#grey span {
background: #999999;
}
.price-colour li.selected {
border-color: #999999;
}
.price-size-guide {
font-size: 1.2rem;
line-height: 2rem;
color: $monza;
text-align: center;
letter-spacing: 1px;
border: 1px solid red;
padding: 5px;
cursor: pointer;
}
.size-guide-icon {
background: url(../images/size-guide-icon.jpg) no-repeat;
width: 25px;
height: 12px;
background-size: 25px;
display: inline-block;
}
#price-select {
border: 2px solid black;
font-size: 1.3rem;
line-height: 1.8rem;
letter-spacing: 1px;
padding: 5px;
display: block;
width: 100%;
margin: 10px 0;
}
.radio-indicator {
position: absolute;
top: 0px;
left: 0;
height: 20px;
width: 20px;
background: white;
border: 2px solid black;
border-radius: 100px;
transition-duration: 0.3s;
transition-property: all;
}
.radio-select {
cursor: pointer;
font-size: 1.4rem;
letter-spacing: 2px;
position: relative;
padding: 0 0 0 30px;
margin: 0;
}
.radio-select:first-child {
margin-right: 43px;
}
.radio-select input {
position: absolute;
z-index: -1;
opacity: 0;
}
.radio-select input:checked~.radio-indicator {
background: red;
}
.radio-select a {
font-size: 1.1rem;
line-height: 1.1rem;
color: $heli;
display: block;
font-family: $grotesk;
font-weight: $groreg;
letter-spacing: 1px;
}
.edit-txt {
cursor: pointer;
font-size: 1.5rem;
z-index: 10;
position: relative;
transition-duration: 0.3s;
transition-property: all;
font-size: 14px;
line-height: 20px;
}
.edit-txt.hidden {
opacity: 0;
visibility: hidden;
}
.range-item {
display: inline-block;
text-align: center;
padding: 35px 35px 20px 0;
cursor: pointer;
}
.range-item img {
width: 31px;
height: 31px;
border-radius: 100px;
padding: 2px;
border: 1px solid transparent;
}
.range-item p {
margin: 10px 0 0 0;
padding: 0;
font-size: 1.4rem;
line-height: 1.8rem;
letter-spacing: 1px;
font-family: $grotesk;
font-weight: $groreg;
}
.range-item.selected img {
border-color: #999999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div class="row">
<div class="col-lg-7">
image in here
</div>
<div class="col-lg-5">
<div class="price-item">
<div class="price-item-top">
<h3 class="heading-price">Choose your bottoms</h3>
</div>
<div class="price-item-one price-item-section clearfix inactive">
<div class="clearfix">
<h3 class="heading-price float-left">1. choose your range: lace</h3>
<span class="edit-txt float-right">edit</span>
</div>
<ul class="price-range o-unlist clearfix">
<li id="lace" class="range-item selected">
<img src="https://via.placeholder.com/31x31" />
<p>lace</p>
</li>
<li id="everyday" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>everday</p>
</li>
<li id="adventure" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>adventure</p>
</li>
<li id="slogan" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>slogan</p>
</li>
</ul>
</div>
<div class="price-item-two price-item-section clearfix">
<h3 class="heading-price">2. choose your style</h3>
<div class="clearfix">
<div class="price-style float-left">
<div class="row">
<div class="col-sm-6 o-txt-center">
<div id="style-brief" class="style-type selected">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>brief</p>
</div>
</div>
<div class="col-sm-6 o-txt-center">
<div id="style-thong" class="style-type">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>thong</p>
</div>
</div>
</div>
</div>
<div class="price-detail float-right">
<ul class="price-colour">
<li id="pink" class="selected"><span></span></li>
<li id="yellow"><span></span></li>
<li id="black"><span></span></li>
<li id="grey"><span></span></li>
</ul>
<div class="price-size-guide" data-toggle="modal" data-target="#popup-size-guide">
redefining size guide <i class="size-guide-icon"></i>
</div>
<select id="price-select">
<option value="small">small (8/10)</option>
<option value="medium">medium (12/14)</option>
<option value="large">large (16/18)</option>
</select>
</div>
</div>
<div class="price-item-three clearfix">
<label class="radio-select float-left">buy once £28
<input type="radio" name="radio" checked="checked"/>
<div class="radio-indicator"></div>
</label>
<label class="radio-select float-right">get monthly £24
how subscription works
<input type="radio" name="radio"/>
<div class="radio-indicator"></div>
</label>
</div>
</div>
</div>
<!-- price item-->
</div>
<!--col lg 5-->
</div>
<!-- row-->
<div class="row">
<div class="col-lg-7">
image in here
</div>
<div class="col-lg-5">
<div class="price-item">
<div class="price-item-top">
<h3 class="heading-price">Choose your top</h3>
</div>
<div class="price-item-one price-item-section clearfix">
<div class="clearfix">
<h3 class="heading-price float-left">1. choose your range: lace</h3>
<span class="edit-txt float-right">edit</span>
</div>
<ul class="price-range o-unlist clearfix">
<li id="lace" class="range-item selected">
<img src="https://via.placeholder.com/31x31" />
<p>lace</p>
</li>
<li id="everyday" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>everday</p>
</li>
<li id="adventure" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>adventure</p>
</li>
<li id="slogan" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>slogan</p>
</li>
</ul>
</div>
<div class="price-item-two price-item-section clearfix inactive">
<h3 class="heading-price">2. choose your style</h3>
<div class="clearfix">
<div class="price-style float-left">
<div class="row">
<div class="col-sm-6 o-txt-center">
<div id="style-bra" class="style-type selected">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>bra</p>
</div>
</div>
<div class="col-sm-6 o-txt-center">
<div id="style-bralette" class="style-type">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>bralette</p>
</div>
</div>
</div>
</div>
<div class="price-detail float-right">
<ul class="price-colour">
<li id="pink" class="selected"><span></span></li>
<li id="yellow"><span></span></li>
<li id="black"><span></span></li>
<li id="grey"><span></span></li>
</ul>
<div class="price-size-guide" data-toggle="modal" data-target="#popup-size-guide">
redefining size guide <i class="size-guide-icon"></i>
</div>
<select id="price-select">
<option value="small">small (8/10)</option>
<option value="medium">medium (12/14)</option>
<option value="large">large (16/18)</option>
</select>
</div>
</div>
<div class="price-item-three clearfix">
<label class="radio-select float-left">buy once £28
<input type="radio" name="radio" checked="checked"/>
<div class="radio-indicator"></div>
</label>
<label class="radio-select float-right">get monthly £24
how subscription works
<input type="radio" name="radio"/>
<div class="radio-indicator"></div>
</label>
</div>
</div>
</div>
<div>
<!--col lg 5-->
</div>
<!-- row-->
</section>
Your parents() selector is selecting ALL parents. Use closest() with a selector to only toggle children beneath that element.
$(this).closest('.price-item').find('.price-item-section').toggleClass('inactive');
I have a problem with jQuery scrollTo function, yesterday it was working :|. Anyway I want to create smooth scroll to div when I click on a button in my navigation bar and it doesn't work :S. Tell me why, how can I make it work.
$('.wrap').hide();
$('.wrap').fadeIn(700);
$(document).ready(function(){
$('.button2').on('click',function(){
$('#s2').ScrollTo();
});
});
$(document).ready(function(){
$('.button3').on('click',function(){
$('#s3').ScrollTo();
});
});
$(document).ready(function(){
$('.button4').on('click',function(){
$('#s4');
});
});
.wrap, footer, #contact {
background-color: ;
}
body {
font-family: Dosis;
box-sizing: border-box;
}
.fluid-container {
max-width: 1000px;
margin: 0 auto;
}
ul {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #000000;
position: fixed;
width: 100%;
}
li {
display: inline-block;
font-size: 15px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #222;
text-decoration: none;
}
#foto1 {
display: block;
width: 100%;
margin: 50px auto;
}
h1{
font-family: Montserrat;
padding: 20px;
font-size: 40px;
text-align: center;
margin-top: 30px;
}
#foto2 {
border: #FBF8BB;
display: block;
max-width: 100%;
margin: 0 auto;
}
#foto3 {
display: block;
margin: 0 auto;
max-width: 100%;
}
.icons {
padding: 30px;
display: block;
}
.portfolio{
text-align: center;
}
#contact {
overflow: hidden;
}
.foto4 {
border-radius:100%;
padding : 20px;
max-width: 100%;
display: block;
margin: auto;
}
footer {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class = "wrap">
<center><ul>
<li>Start</li>
<li>O mnie</li>
<li>Portfolio</li>
<li>Kontakt</li>
</ul></center>
<div id="s1" class="fluid-container">
<br>
<img id="foto1" src="https://s6.postimg.org/8vcsstfld/image.png" />
<div style="text-align:center" class="icons">
<a href="https://www.facebook.com/bartek.cechmann" target="_blank">
<img class="icon1" src="https://s6.postimg.org/ap89zgjw1/rsz_1496700658_facebook.png">
</a>
<a href="https://www.linkedin.com/in/bartosz-cechmann-941921124/" target="_blank">
<img class="icon2" src="https://s6.postimg.org/nuns5kdrl/rsz_1496700662_linkedin.png">
</a>
<a href="https://github.com/cechu11" target="_blank">
<img class="icon3" src="http://s6.postimg.org/b0zdn2w1d/1496775488_github_square_social_media.png">
</a>
</div></div>
<div id="s2">
<br>
<br>
<div class="aboutme">
<img id ="foto2" src="https://s6.postimg.org/ch9fdz775/image.png" />
</div></div>
<div id="s3" class="portfolio">
<br>
<h1><u>Portfolio</u></h1>
<img id="foto3"src="https://s6.postimg.org/b15eahcq9/Placeholder.png">
</div></div></section>
<div id="s4">
<footer>
<img class="foto4"src="https://s6.postimg.org/gz6o8ygxd/image.png">
</footer></>
Here is a working fiddle with much shorter code:
EDIT: You can change the scroll speed by changing the animate duration from 2000ms to whatever you like.
$('.wrap').hide();
$('.wrap').fadeIn(700);
$(function(){
$('li').on('click',function(e){
e.preventDefault();
$('html, body').animate({
scrollTop: $($(e.target).attr("href")).offset().top
}, 2000);
});
});
.wrap, footer, #contact {
background-color: ;
}
body {
font-family: Dosis;
box-sizing: border-box;
}
.fluid-container {
max-width: 1000px;
margin: 0 auto;
}
ul {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #000000;
position: fixed;
width: 100%;
}
li {
display: inline-block;
font-size: 15px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #222;
text-decoration: none;
}
#foto1 {
display: block;
width: 100%;
margin: 50px auto;
}
h1{
font-family: Montserrat;
padding: 20px;
font-size: 40px;
text-align: center;
margin-top: 30px;
}
#foto2 {
border: #FBF8BB;
display: block;
max-width: 100%;
margin: 0 auto;
}
#foto3 {
display: block;
margin: 0 auto;
max-width: 100%;
}
.icons {
padding: 30px;
display: block;
}
.portfolio{
text-align: center;
}
#contact {
overflow: hidden;
}
.foto4 {
border-radius:100%;
padding : 20px;
max-width: 100%;
display: block;
margin: auto;
}
footer {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class = "wrap">
<center><ul>
<li>Start</li>
<li>O mnie</li>
<li>Portfolio</li>
<li>Kontakt</li>
</ul></center>
<div id="s1" class="fluid-container">
<br>
<img id="foto1" src="https://s6.postimg.org/8vcsstfld/image.png" />
<div style="text-align:center" class="icons">
<a href="https://www.facebook.com/bartek.cechmann" target="_blank">
<img class="icon1" src="https://s6.postimg.org/ap89zgjw1/rsz_1496700658_facebook.png">
</a>
<a href="https://www.linkedin.com/in/bartosz-cechmann-941921124/" target="_blank">
<img class="icon2" src="https://s6.postimg.org/nuns5kdrl/rsz_1496700662_linkedin.png">
</a>
<a href="https://github.com/cechu11" target="_blank">
<img class="icon3" src="http://s6.postimg.org/b0zdn2w1d/1496775488_github_square_social_media.png">
</a>
</div></div>
<div id="s2">
<br>
<br>
<div class="aboutme">
<img id ="foto2" src="https://s6.postimg.org/ch9fdz775/image.png" />
</div></div>
<div id="s3" class="portfolio">
<br>
<h1><u>Portfolio</u></h1>
<img id="foto3"src="https://s6.postimg.org/b15eahcq9/Placeholder.png">
</div></div></section>
<div id="s4">
<footer>
<img class="foto4"src="https://s6.postimg.org/gz6o8ygxd/image.png">
</footer></>
You can use animate here to move about the page how you want to. Here's a quick reference. Click the second button to see it in action. From here can update your code to use the code posted here. Also, as # Himanshu Upadhyay pointed out you can put all that code into 1 $(document).ready(function(){}).
E.g.
$('.button2').on('click',function() {
$('html, body').animate({
scrollTop: $("#s2").offset().top
}, 2000);
});
Jsfiddle: https://jsfiddle.net/Lzwt2s2a/3/