I was searching for a toggle collapse button and I've been leaded to this link:
https://getbootstrap.com/docs/4.0/components/collapse/
I've found what I was looking for, but the only problem is the transition; once I click on the button it shows my div immediately . I want it to expand slower with transition.
Here's my code:
.innerdiv{
display: block;
width: 33%;
padding: 50px;
margin-left: 2px;
text-align: center;
background-color: #2bb88d;
margin-top: 20px;
border-radius: 20px;
height: 350px;
overflow:auto ;
float: left;
clear: right;
transition: 15s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styletest.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</head>
<body>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> more adresses </button>
<div class="collapse" id="collapseExample">
<div class="innerdiv"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis est soluta aliquam necessitatibus quia tempora corrupti hic fuga! Perspiciatis iste vero ipsum maxime, saepe vitae dolores amet iure assumenda cum.</p></div>
<div class="innerdiv">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit explicabo, expedita voluptate nemo commodi architecto qui libero aliquam nisi corrupti quam, dignissimos odit hic neque aperiam, repudiandae ex soluta. Iste assumenda nostrum culpa architecto fugit id laborum quidem expedita perferendis aliquam placeat distinctio, ad magni ipsam tenetur est nesciunt non pariatur esse veritatis dolores dolorem unde quos ducimus? Beatae quam, corporis hic autem quisquam quae magni totam vitae labore sapiente error ab quo animi consequuntur veniam tempore facere. Facilis, minima quo neque a quas numquam magni, laborum dignissimos accusamus ipsa facere fuga. Quam voluptate sit quas illo sequi, sed nam vero repellendus, ipsum, officia quibusdam quos consectetur voluptas dignissimos obcaecati ad non natus hic recusandae quae numquam ex. Aspernatur esse unde, expedita nisi amet laborum blanditiis accusamus corrupti ea vel! Exercitationem vel, quidem in sed dolorem ullam odit sit nisi earum nesciunt unde eaque cum labore, quam id quibusdam ab.</div>
<div class="innerdiv">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit explicabo, expedita voluptate nemo commodi architecto qui libero aliquam nisi corrupti quam, dignissimos odit hic neque aperiam, repudiandae ex soluta. Iste assumenda nostrum culpa architecto fugit id laborum quidem expedita perferendis aliquam placeat distinctio, ad magni ipsam tenetur est nesciunt non pariatur esse veritatis dolores dolorem unde quos ducimus? Beatae quam, corporis hic autem quisquam quae magni totam vitae labore sapiente error ab quo animi consequuntur veniam tempore facere. Facilis, minima quo neque a quas numquam magni, laborum dignissimos accusamus ipsa facere fuga. Quam voluptate sit quas illo sequi, sed nam vero repellendus, ipsum, officia quibusdam quos consectetur voluptas dignissimos obcaecati ad non natus hic recusandae quae numquam ex. Aspernatur esse unde, expedita nisi amet laborum blanditiis accusamus corrupti ea vel! Exercitationem vel, quidem in sed dolorem ullam odit sit nisi earum nesciunt unde eaque cum labore, quam id quibusdam ab.</div>
</div>
</body>
</html>
At the time of collapsing, there runs a default bootstrap class named collapsing. You've to override that class like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</head>
<style>
.innerdiv {
display: block;
width: 33%;
padding: 50px;
margin-left: 2px;
text-align: center;
background-color: #2bb88d;
margin-top: 20px;
border-radius: 20px;
height: 350px;
overflow: auto;
float: left;
clear: right;
}
.collapsing {
transition: 15s;
}
</style>
<body>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> more adresses </button>
<div class="collapse" id="collapseExample">
<div class="innerdiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis est soluta aliquam necessitatibus quia tempora corrupti hic fuga! Perspiciatis iste vero ipsum maxime, saepe vitae dolores amet iure assumenda cum.</p>
</div>
<div class="innerdiv">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit explicabo, expedita voluptate nemo commodi architecto qui libero aliquam nisi corrupti quam, dignissimos odit hic neque aperiam, repudiandae ex soluta. Iste assumenda nostrum culpa
architecto fugit id laborum quidem expedita perferendis aliquam placeat distinctio, ad magni ipsam tenetur est nesciunt non pariatur esse veritatis dolores dolorem unde quos ducimus? Beatae quam, corporis hic autem quisquam quae magni totam
vitae labore sapiente error ab quo animi consequuntur veniam tempore facere. Facilis, minima quo neque a quas numquam magni, laborum dignissimos accusamus ipsa facere fuga. Quam voluptate sit quas illo sequi, sed nam vero repellendus, ipsum,
officia quibusdam quos consectetur voluptas dignissimos obcaecati ad non natus hic recusandae quae numquam ex. Aspernatur esse unde, expedita nisi amet laborum blanditiis accusamus corrupti ea vel! Exercitationem vel, quidem in sed dolorem
ullam odit sit nisi earum nesciunt unde eaque cum labore, quam id quibusdam ab.</div>
<div class="innerdiv">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit explicabo, expedita voluptate nemo commodi architecto qui libero aliquam nisi corrupti quam, dignissimos odit hic neque aperiam, repudiandae ex soluta. Iste assumenda nostrum culpa
architecto fugit id laborum quidem expedita perferendis aliquam placeat distinctio, ad magni ipsam tenetur est nesciunt non pariatur esse veritatis dolores dolorem unde quos ducimus? Beatae quam, corporis hic autem quisquam quae magni totam
vitae labore sapiente error ab quo animi consequuntur veniam tempore facere. Facilis, minima quo neque a quas numquam magni, laborum dignissimos accusamus ipsa facere fuga. Quam voluptate sit quas illo sequi, sed nam vero repellendus, ipsum,
officia quibusdam quos consectetur voluptas dignissimos obcaecati ad non natus hic recusandae quae numquam ex. Aspernatur esse unde, expedita nisi amet laborum blanditiis accusamus corrupti ea vel! Exercitationem vel, quidem in sed dolorem
ullam odit sit nisi earum nesciunt unde eaque cum labore, quam id quibusdam ab.</div>
</div>
</body>
</html>
Related
My current function works by changing the color to black when the scroll number reaches 100. However, how do I target the js to change the color to black when the scroll reaches the p tag? I think my code is close to being able to do this, I'm just not sure how to alter my if statement to target specific sections rather than a number?
<!-- 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>Scrolling Function Practice</title>
</head>
<body>
<header>
<h1 class='test-title'>Testing title</h1>
</header>
<br>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni excepturi error facere sed quas repellat perferendis,
enim cumque, voluptatem mollitia porro consectetur dicta officiis itaque, quae adipisci accusamus quibusdam amet eligendi.
Ad delectus iure exercitationem accusamus ea nihil magni doloribus, inventore aut molestias repudiandae hic non in asperiores
dolor! Repellat blanditiis accusantium rem iure, molestias doloremque quidem. Facere nisi libero error aut hic tempora quidem
voluptate, omnis, nihil molestias, animi quia distinctio? Vel beatae, at dolore, laboriosam rem voluptatibus sunt illo obcaecati
modi iure sed odio voluptatum, numquam accusantium quibusdam tenetur velit aliquid! Ad animi sunt ratione suscipit totam tenetur
quia exercitationem excepturi doloribus vero nostrum, sapiente alias iste nam doloremque voluptatum consectetur reiciendis omnis
tempora? Esse quaerat molestias hic beatae ipsum, recusandae odio nobis sit quo in veniam aperiam, itaque facilis rerum eum.
Exercitationem architecto nulla dolor nemo eius neque ipsam omnis provident porro laborum eaque, totam quos. Obcaecati totam
doloribus recusandae aliquam quisquam consequuntur soluta impedit dolorum quam at? Aliquid, reiciendis. Eveniet, earum aliquid
sapiente quo voluptates velit nemo, distinctio architecto sint tenetur itaque! Dolore, sapiente debitis. Dolorum tempore, sunt
quam eos praesentium molestiae animi delectus architecto ipsa voluptate repudiandae odio error nulla. Nihil, accusamus aperiam!
Magni iure ea nulla veniam, provident quae ex nobis saepe veritatis dolor! Minus omnis totam quasi nam illum explicabo non ipsum
quibusdam iste sed facere officia, quia, minima sint debitis. Sequi consectetur assumenda tempore autem hic nihil alias! Illum natus
totam reiciendis adipisci voluptatibus nostrum! Ratione illo nulla provident, laborum quaerat voluptas.
</p>
<!-- css -->
<style>
/*css to set position of title*/
body {
min-height: 1400px;
}
p {
color: black;
margin-top: 700px;
}
.test-title {
position: fixed;
color: white;
background-color: darkblue;
margin-bottom: 100px;
transition: all 0.5s;
z-index: 100;
}
.test-title.active {
color: black;
transition: all 0.5s;
}
</style>
<!-- JavaScript -->
<script>
const titleEffect = document.querySelector('.test-title');
//scroll function
window.onscroll = function() {
let top = window.scrollY;
console.log(top);
if (top >= '100') {
titleEffect.classList.add('active');
} else {
titleEffect.classList.remove('active');
}
}
</script>
</body>
</html>
what your'e looking for is the intersection observer API.
by using it you'll be able to use a callback function which will manipulate your title element color when your <p> tag will be in view.
check it our here
I am trying to create a custom cursor in my slider section with "following the cursor with element", but it's not working properly, i mean the custom cursor is way far than original cursor.
I have tried a lot, searched a lot, found the answers in stackoverflow but these were not working for me. So, I am putting question here.
Here is the live website link:
http://green-light.infinitweb.co/landscape-lighting-projects/
// Init Slider
const landscapeProjectsSlider = () => {
const elem = $('.landscapeProjects-slider');
if (elem.length === 0) return false;
elem.slick({
centerMode: true,
centerPadding: '20%',
dots: false,
arrows: false,
slidesToShow: 1,
responsive: [
{
breakpoint: 576,
settings: {
centerPadding: '60px'
}
}
]
})
}
landscapeProjectsSlider();
// Custom Cursor Positioning
const landscapeProjectsSliderCursor = () => {
let $mouseX = 0, $mouseY = 0;
let $xp = 0, $yp =0;
$('.landscapeProjects').mousemove(function(e){
$mouseX = e.clientX;
$mouseY = e.clientY;
});
setInterval(() => {
$xp += (($mouseX - $xp) / 5);
$yp += (($mouseY - $yp) / 5);
$('.landscapeProjects-cursor').css({
left: $xp +'px',
top: $yp +'px'
});
}, 60);
}
landscapeProjectsSliderCursor();
.landscapeProjects {
margin-top: 52px;
position: relative
}
.landscapeProjects-cursor {
position: absolute;
border: 2px solid #8dba52;
border-radius: 50%;
padding: 30px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
width: 70px;
height: 70px;
display: grid;
place-content: center;
z-index: 2
}
#media (min-width: 576px) {
.landscapeProjects-cursor {
width:106px;
height: 106px
}
}
.landscapeProjects-indicators {
display: flex;
gap: 4px;
justify-content: center;
margin-bottom: 15px
}
#media (min-width: 576px) {
.landscapeProjects-indicators {
margin-bottom:0;
justify-content: none;
position: absolute;
top: 50%;
right: 18%;
transform: translateY(-50%)
}
}
#media (min-width: 768px) {
.landscapeProjects-indicators {
font-size:28px;
line-height: 37px
}
}
.landscapeProjects-slider .landscapeProjects-slider--item {
padding: 0 6px
}
#media (min-width: 576px) {
.landscapeProjects-slider .landscapeProjects-slider--item {
padding:0 30px
}
}
#media (min-width: 768px) {
.landscapeProjects-slider .landscapeProjects-slider--item {
padding:0 65px
}
}
.landscapeProjects-slider .landscapeProjects-slider--item__content {
margin-top: 18px
}
#media (min-width: 576px) {
.landscapeProjects-slider .landscapeProjects-slider--item__content {
margin-top:34px;
display: flex;
align-items: center;
justify-content: space-between
}
}
#media (min-width: 768px) {
.landscapeProjects-slider .landscapeProjects-slider--item__date {
font-size:28px;
line-height: 37px
}
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css' type='text/css' media='all' />
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum odio animi, minus dolore libero molestias dolores quia doloremque quod est dicta autem ut totam necessitatibus impedit? Ipsum cum itaque dicta.
Odio quia laboriosam quam architecto porro non, sequi distinctio in vitae perferendis inventore voluptatibus veritatis, ullam recusandae possimus magni neque reiciendis pariatur accusantium exercitationem sapiente. Totam numquam quis voluptatem! Dicta!
Nam fugiat eligendi sunt! Illo maxime a placeat minus provident adipisci rerum dicta ex consectetur corporis molestias, beatae tempora fugit laboriosam quae nesciunt? Quo, soluta nesciunt et asperiores nostrum itaque?
Ullam architecto, eius perspiciatis quas labore rerum delectus necessitatibus, inventore voluptate odit quos! Dolor mollitia dolore earum autem iste veniam, libero eligendi veritatis facere tempore numquam sunt accusamus repellat quo!
Ex asperiores numquam nihil, veritatis natus dolores blanditiis temporibus, sequi velit maxime eius reiciendis eos quidem. Cumque qui, blanditiis est temporibus inventore dolorum illo, aspernatur fuga omnis cupiditate dolor atque.
Nostrum error eos cumque sapiente optio voluptatibus tenetur delectus. Aliquam neque voluptatum assumenda quod consectetur aliquid accusamus asperiores cum consequatur numquam maiores sapiente laboriosam ducimus, quam accusantium! Veritatis, voluptates modi.
Itaque deserunt, eaque adipisci atque neque quibusdam harum minus facere corporis molestias pariatur quam exercitationem, nisi rerum similique, maxime veniam quo! Ipsum praesentium eligendi facere nam in expedita cum minima?
Quia illo itaque voluptatibus placeat. Ut assumenda ipsam nemo, iste error nostrum deserunt! Delectus, placeat quae voluptatibus eaque consequuntur perferendis similique sapiente! Necessitatibus magnam similique quas quibusdam reiciendis, fugit unde?
Quis placeat adipisci voluptas tenetur tempora voluptates impedit obcaecati, eum eos distinctio aliquam molestias debitis sint eligendi harum reprehenderit quia explicabo cupiditate, mollitia ratione! Recusandae sit ut tempore rem architecto!
Eaque numquam nostrum cumque consectetur dignissimos, minima molestias excepturi, nihil ea magni provident quidem cum odio maiores aperiam quod ab qui dolore quis illo doloremque reiciendis? Amet vitae aperiam excepturi.
Tempora error asperiores enim quaerat ipsa fuga, architecto labore omnis quos quidem eaque hic. Quisquam quia itaque, consectetur aperiam magnam qui dolores distinctio odio asperiores rerum numquam a eligendi explicabo!
Maxime voluptate molestias minus porro nemo reiciendis sit voluptatum nam aut reprehenderit tempora ut officia, repellat consectetur magni veniam vel? Nostrum cumque beatae placeat repudiandae unde omnis consequuntur sint ex.
Praesentium odit doloribus ex dolorem non eligendi velit et soluta ut, minus, ea eos odio saepe consectetur consequuntur dolores alias repudiandae molestias aperiam accusamus quo asperiores ipsum rerum omnis. Odit!
Fuga sapiente harum laudantium ullam, perferendis provident cupiditate ea? Reiciendis deserunt aperiam, repellat natus harum, quia quasi, facere eaque numquam explicabo voluptas. Eum ipsum natus necessitatibus consectetur omnis quae recusandae?
Eligendi perspiciatis, fugiat enim, molestias exercitationem, quae consequatur tempora nihil deleniti iure aut! Nesciunt ea iure ratione laudantium tenetur enim quam odit nam vitae illum! Voluptatem enim nisi possimus dicta.
Molestias, rem praesentium ex consequuntur repellat corrupti, quam a consequatur provident rerum, error beatae maiores ad nostrum dolorum incidunt corporis nemo voluptatum architecto id sint similique. Asperiores facilis illum repellat.
Exercitationem, modi voluptate! Mollitia ducimus hic corporis exercitationem obcaecati distinctio illum sed rerum accusamus ut nemo ipsam quo autem dignissimos quos nostrum, eveniet quisquam fuga alias omnis veniam adipisci praesentium.
Aliquam laborum quasi tempore porro exercitationem dolores non dignissimos sequi voluptates, neque nobis, est ex aut soluta facilis doloribus. Exercitationem omnis, numquam esse excepturi expedita voluptatem quidem ducimus amet obcaecati!
Fugiat hic earum provident aut harum sunt odit explicabo, repellendus, iste consectetur corporis aliquam debitis nulla molestias cum impedit aperiam eligendi aliquid. A maiores consectetur, architecto labore nulla id doloribus.
Expedita amet sit officiis iusto ab corrupti, quisquam, incidunt nisi quae provident omnis! Earum, quasi ad veniam vero reiciendis consectetur doloribus odio ea excepturi ex quidem nam sit harum tempore?
</p>
<section class="landscapeProjects">
<!-- Custom Cursor Start -->
<div class="landscapeProjects-cursor">Drag</div>
<!-- Custom Cursor End -->
<div class="landscapeProjects-slider">
<div class="landscapeProjects-slider--item">
<div class="landscapeProjects-slider--item__img">
<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
</div>
<div class="landscapeProjects-slider--item__content">
<h2 class="mb-0">Guest House</h2>
<div class="landscapeProjects-slider--item__date">2019</div>
</div>
</div>
<div class="landscapeProjects-slider--item">
<div class="landscapeProjects-slider--item__img">
<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
</div>
<div class="landscapeProjects-slider--item__content">
<h2 class="mb-0">Alpino Greto</h2>
<div class="landscapeProjects-slider--item__date">2020</div>
</div>
</div>
<div class="landscapeProjects-slider--item">
<div class="landscapeProjects-slider--item__img">
<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
</div>
<div class="landscapeProjects-slider--item__content">
<h2 class="mb-0">Cras Vel</h2>
<div class="landscapeProjects-slider--item__date">2021</div>
</div>
</div>
<div class="landscapeProjects-slider--item">
<div class="landscapeProjects-slider--item__img">
<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
</div>
<div class="landscapeProjects-slider--item__content">
<h2 class="mb-0">Guest House</h2>
<div class="landscapeProjects-slider--item__date">2019</div>
</div>
</div>
<div class="landscapeProjects-slider--item">
<div class="landscapeProjects-slider--item__img">
<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
</div>
<div class="landscapeProjects-slider--item__content">
<h2 class="mb-0">Alpino Greto</h2>
<div class="landscapeProjects-slider--item__date">2020</div>
</div>
</div>
<div class="landscapeProjects-slider--item">
<div class="landscapeProjects-slider--item__img">
<img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
</div>
<div class="landscapeProjects-slider--item__content">
<h2 class="mb-0">Cras Vel</h2>
<div class="landscapeProjects-slider--item__date">2021</div>
</div>
</div>
</div>
</section>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum odio animi, minus dolore libero molestias dolores quia doloremque quod est dicta autem ut totam necessitatibus impedit? Ipsum cum itaque dicta.
Odio quia laboriosam quam architecto porro non, sequi distinctio in vitae perferendis inventore voluptatibus veritatis, ullam recusandae possimus magni neque reiciendis pariatur accusantium exercitationem sapiente. Totam numquam quis voluptatem! Dicta!
Nam fugiat eligendi sunt! Illo maxime a placeat minus provident adipisci rerum dicta ex consectetur corporis molestias, beatae tempora fugit laboriosam quae nesciunt? Quo, soluta nesciunt et asperiores nostrum itaque?
Ullam architecto, eius perspiciatis quas labore rerum delectus necessitatibus, inventore voluptate odit quos! Dolor mollitia dolore earum autem iste veniam, libero eligendi veritatis facere tempore numquam sunt accusamus repellat quo!
Ex asperiores numquam nihil, veritatis natus dolores blanditiis temporibus, sequi velit maxime eius reiciendis eos quidem. Cumque qui, blanditiis est temporibus inventore dolorum illo, aspernatur fuga omnis cupiditate dolor atque.
Nostrum error eos cumque sapiente optio voluptatibus tenetur delectus. Aliquam neque voluptatum assumenda quod consectetur aliquid accusamus asperiores cum consequatur numquam maiores sapiente laboriosam ducimus, quam accusantium! Veritatis, voluptates modi.
Itaque deserunt, eaque adipisci atque neque quibusdam harum minus facere corporis molestias pariatur quam exercitationem, nisi rerum similique, maxime veniam quo! Ipsum praesentium eligendi facere nam in expedita cum minima?
Quia illo itaque voluptatibus placeat. Ut assumenda ipsam nemo, iste error nostrum deserunt! Delectus, placeat quae voluptatibus eaque consequuntur perferendis similique sapiente! Necessitatibus magnam similique quas quibusdam reiciendis, fugit unde?
Quis placeat adipisci voluptas tenetur tempora voluptates impedit obcaecati, eum eos distinctio aliquam molestias debitis sint eligendi harum reprehenderit quia explicabo cupiditate, mollitia ratione! Recusandae sit ut tempore rem architecto!
Eaque numquam nostrum cumque consectetur dignissimos, minima molestias excepturi, nihil ea magni provident quidem cum odio maiores aperiam quod ab qui dolore quis illo doloremque reiciendis? Amet vitae aperiam excepturi.
Tempora error asperiores enim quaerat ipsa fuga, architecto labore omnis quos quidem eaque hic. Quisquam quia itaque, consectetur aperiam magnam qui dolores distinctio odio asperiores rerum numquam a eligendi explicabo!
Maxime voluptate molestias minus porro nemo reiciendis sit voluptatum nam aut reprehenderit tempora ut officia, repellat consectetur magni veniam vel? Nostrum cumque beatae placeat repudiandae unde omnis consequuntur sint ex.
Praesentium odit doloribus ex dolorem non eligendi velit et soluta ut, minus, ea eos odio saepe consectetur consequuntur dolores alias repudiandae molestias aperiam accusamus quo asperiores ipsum rerum omnis. Odit!
Fuga sapiente harum laudantium ullam, perferendis provident cupiditate ea? Reiciendis deserunt aperiam, repellat natus harum, quia quasi, facere eaque numquam explicabo voluptas. Eum ipsum natus necessitatibus consectetur omnis quae recusandae?
Eligendi perspiciatis, fugiat enim, molestias exercitationem, quae consequatur tempora nihil deleniti iure aut! Nesciunt ea iure ratione laudantium tenetur enim quam odit nam vitae illum! Voluptatem enim nisi possimus dicta.
Molestias, rem praesentium ex consequuntur repellat corrupti, quam a consequatur provident rerum, error beatae maiores ad nostrum dolorum incidunt corporis nemo voluptatum architecto id sint similique. Asperiores facilis illum repellat.
Exercitationem, modi voluptate! Mollitia ducimus hic corporis exercitationem obcaecati distinctio illum sed rerum accusamus ut nemo ipsam quo autem dignissimos quos nostrum, eveniet quisquam fuga alias omnis veniam adipisci praesentium.
Aliquam laborum quasi tempore porro exercitationem dolores non dignissimos sequi voluptates, neque nobis, est ex aut soluta facilis doloribus. Exercitationem omnis, numquam esse excepturi expedita voluptatem quidem ducimus amet obcaecati!
Fugiat hic earum provident aut harum sunt odit explicabo, repellendus, iste consectetur corporis aliquam debitis nulla molestias cum impedit aperiam eligendi aliquid. A maiores consectetur, architecto labore nulla id doloribus.
Expedita amet sit officiis iusto ab corrupti, quisquam, incidunt nisi quae provident omnis! Earum, quasi ad veniam vero reiciendis consectetur doloribus odio ea excepturi ex quidem nam sit harum tempore?
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js'></script>
Can someone help me? I am stuck.
You have to take the element's offsetTop and the circle size (width, height) into account.
Use the following code in your mousemove handler:
$('.landscapeProjects').mousemove(function(e){
// subtract half of circle width
$mouseX = e.pageX - 106/2;
// subtract offset top (Y offset on page) and half of circle height
// and limit the Y position with Max.min
$mouseY = Math.min(e.pageY - e.currentTarget.offsetTop - 106/2, e.clientY);
});
Demo:
I am trying to center a accordion. At first I tried with margin: auto; but it was not centered. Then I tried with left: 50%; top: 50%; transform: translate(-50%, -50%); and it worked but I found something wrong. There was a paragraph after accordion and it was placed before the accordion.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.area {
font-size: 20px;
color: red;
text-align: center;
margin: 2% 0;
}
/* ========================== Accordion ==================================== */
.accordion {
position: absolute;
width: 70%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"></style>
<!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>jQuery UI</title>
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.css">
<link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.structure.css">
<link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.theme.css">
</head>
<body>
<p class="area">---------------------------- Accordion ----------------------------</p>
<div class="accordion">
<h2 class="accordion-title">Web Design</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
ipsum? A!</p>
</div>
<h2 class="accordion-title">Web Development</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
ipsum? A!</p>
</div>
<h2 class="accordion-title">Programming</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
ipsum? A!</p>
</div>
<h2 class="accordion-title">Wordpress Development</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
ipsum? A!</p>
</div>
<h2 class="accordion-title">Digital Marketing</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
ipsum? A!</p>
</div>
</div>
<p class="area">----------------------------------------------------------------------</p>
<!-- ------------------------- JavaScript Start ---------------------------------------- -->
<script src="./jquery-3.6.0.js"></script>
<script src="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
// --------------------------- Accordion ------------------------------------
$(".accordion").accordion();
});
</script>
<!-- ------------------------- JavaScript End ---------------------------------------- -->
</body>
</html>
There was a paragraph before and after the accordion. But after centering they took place at the top side.
I downloaded the jQuery and the jQuery ui file. jQuery version: 3.6.0 and jQuery ui version: 1.12.1.
How can I fix this problem?
You can use css flex. It will resolve your problem. All you have to do is to wrap the accordian div with another div.
Like,
<div class="wrapper">
<div class="accordion">
.
.
.
</div>
<div>
in css
.wrapper{
justify-content: center;
display: flex;
}
.accordian{
width: 70%;
}
Please remove all other css properties from accordian class. It should work.
I have a script that I run for showing my sticky header after scroll. I would like to display it after 300px. How can I achieve that?
<script type="text/javascript">
jQuery(function($){
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else {
$('header').removeClass("sticky");
}
});
});
</script>
If I understand you right, just replace $(this).scrollTop() > 1 with $(this).scrollTop() > 300
Demo: https://jsfiddle.net/VitFL/cgzr6k5t/
jQuery(function($){
$(window).scroll(function() {
if ($(this).scrollTop() > 300){
$('header').addClass("sticky");
}
else {
$('header').removeClass("sticky");
}
});
});
header {
width: 100%;
height: 40px;
background-color: red;
}
.sticky {
position: fixed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
</header>
<section class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus reiciendis ipsa, aliquam voluptatum qui et eos, omnis dolorum, iure dolores beatae modi, nihil aspernatur quibusdam nostrum dolor? Tenetur similique, nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus reiciendis ipsa, aliquam voluptatum qui et eos, omnis dolorum, iure dolores beatae modi, nihil aspernatur quibusdam nostrum dolor? Tenetur similique, nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam rem dolores ullam nostrum sint voluptas obcaecati amet aspernatur laudantium, necessitatibus ex deleniti. Accusantium fugit, natus maiores unde, quidem praesentium, laboriosam cumque cupiditate doloremque nulla quisquam pariatur consectetur accusamus dolores quas, itaque! Fuga expedita, maxime amet iste sequi quod delectus quaerat eligendi nisi similique, nemo sunt dignissimos repellendus dolorem laborum est vero quam, esse, culpa in soluta nesciunt. Soluta ipsa accusamus est placeat nostrum, nemo, nobis, et totam reprehenderit possimus eligendi! Suscipit vitae saepe quod eos aut magnam similique, voluptates, quibusdam debitis? Facere odio dicta dolore, enim rerum ex distinctio labore expedita! Assumenda doloribus quae repellat a, laboriosam, distinctio, rem repudiandae itaque, odio accusamus nisi repellendus deleniti explicabo ad facilis eum! Saepe magni necessitatibus obcaecati aspernatur! Dignissimos excepturi libero dolores nemo quia animi quas atque dolore sed optio beatae perspiciatis tempora impedit praesentium doloremque id ad doloribus reiciendis, recusandae itaque magni, reprehenderit? Explicabo cumque inventore tempore doloremque. Aliquam, consequatur animi soluta dolores expedita assumenda! Sit, maiores suscipit reiciendis dolor adipisci autem laudantium corporis quia excepturi. Animi consequuntur nostrum facilis ipsam sapiente, distinctio. Porro quisquam qui, praesentium aliquid, architecto magnam aliquam repellendus deleniti maiores ab ea illum necessitatibus dolorem. Architecto debitis, enim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam rem dolores ullam nostrum sint voluptas obcaecati amet aspernatur laudantium, necessitatibus ex deleniti. Accusantium fugit, natus maiores unde, quidem praesentium, laboriosam cumque cupiditate doloremque nulla quisquam pariatur consectetur accusamus dolores quas, itaque! Fuga expedita, maxime amet iste sequi quod delectus quaerat eligendi nisi similique, nemo sunt dignissimos repellendus dolorem laborum est vero quam, esse, culpa in soluta nesciunt. Soluta ipsa accusamus est placeat nostrum, nemo, nobis, et totam reprehenderit possimus eligendi! Suscipit vitae saepe quod eos aut magnam similique, voluptates, quibusdam debitis? Facere odio dicta dolore, enim rerum ex distinctio labore expedita! Assumenda doloribus quae repellat a, laboriosam, distinctio, rem repudiandae itaque, odio accusamus nisi repellendus deleniti explicabo ad facilis eum! Saepe magni necessitatibus obcaecati aspernatur! Dignissimos excepturi libero dolores nemo quia animi quas atque dolore sed optio beatae perspiciatis tempora impedit praesentium doloremque id ad doloribus reiciendis, recusandae itaque magni, reprehenderit? Explicabo cumque inventore tempore doloremque. Aliquam, consequatur animi soluta dolores expedita assumenda! Sit, maiores suscipit reiciendis dolor adipisci autem laudantium corporis quia excepturi. Animi consequuntur nostrum facilis ipsam sapiente, distinctio. Porro quisquam qui, praesentium aliquid, architecto magnam aliquam repellendus deleniti maiores ab ea illum necessitatibus dolorem. Architecto debitis, enim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste molestiae, sit assumenda quia temporibus qui vel ullam necessitatibus repellendus cupiditate tenetur beatae laudantium, eos voluptatem dolore quae, consequatur! Blanditiis esse ipsam impedit distinctio sequi quae praesentium deleniti doloremque repellat, temporibus tempora omnis labore enim assumenda voluptatem sapiente architecto incidunt neque aliquam corrupti fugiat facilis. Odit veniam illo magnam praesentium quasi quae maiores fuga eum. Accusamus aliquid tempora eum dolores eaque quasi omnis aut. Ea eos culpa dolorum, sint nobis suscipit quaerat harum, iure illo eligendi omnis nam dolorem itaque aliquam eaque voluptate praesentium possimus officia rerum mollitia nemo distinctio aperiam ratione quo. Optio assumenda cupiditate expedita quod aperiam illo blanditiis nisi, harum eos inventore nesciunt nobis tempora ipsum deleniti, accusantium suscipit deserunt voluptatibus porro in mollitia eum. Pariatur consequatur iste, veritatis quae maxime nisi magni dolores possimus quasi id. Inventore repellat reprehenderit fuga, eaque distinctio expedita fugiat. Facilis, repellendus, alias.</p>
</section>
If you want header to be hidden before you scroll to 300px, then make it display: none, and add to .sticky display: block:
header {
display: none;
width: 100%;
height: 40px;
background-color: red;
}
.sticky {
position: fixed;
display: block;
}
i have created a side menu bar with some bit of css and java script but when i tried to edit my list elements to fit the width of the side bar they just start far from the margin. where did i go wrong or what have i missed?
// JavaScript Document//
$('.nav-side .nav-toggle').on('click', function(e){
e.preventDefault();
$(this).parent().toggleClass('nav-open');
});
#charset "utf-8";
body
{
font: 16px "Helvetica",sans-serif;
line-height: 1.4;
font-weight: 200;
background-color: #563838;
}
.wrapper
{
margin: 0 auto;
width: 1160px;
text-align: center;
position: relative;
top: 230px;
}
.nav-side
{
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
max-width: 250px;
background-color: rgba(8, 120, 164, 0.9);
box-sizing: border-box;
color: brown;
margin-left: -250px;
transition: margin 600ms ease-in-out;
}
.nav-side.nav-open
{
margin-left: 0;
box-shadow: 1px 1px 3px rgba(0,0,0,.1);
}
.nav-side ul
{
list-style: none
}
.nav-side ul li
{
height: 70px;
background-color: antiquewhite;
left: 0;
}
.nav-toggle
{
position: absolute;
right: -70px;
top: 10px;
width: 70px;
height: 70px;
background-color: rgba(30, 207, 214, 0.1);
line-height: 70px;
text-decoration: none;
text-align: center;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
box-shadow: 1px 0 3px rgba(0,0,0, .1);
}
.nav-toggle:hover
{
background-color: #1ecfd6;
cursor: pointer;
}
.nav-toggle:before
{
content: "🙇";
font-weight:900;
color: white;
font-size: 32px;
padding-left: 5px;
}
.nav-side.nav-open .nav-toggle:before
{
content: "🙆";
right: 0;
}
.logo
{
width: 100%;
height: 225px;
text-align: center;
position: fixed;
background-color: #272424;
top: 0;
left: 0;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flavour Dome</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa iure, voluptatum sequi dolorem numquam ullam! Tempore error quos, nobis sapiente porro nihil ia ut optio! Animi modi, totam magnam adipisci minus, nesciunt quam cum repudiandae aspernatur. Quod, dolor veritatis perferendis repellat pariatur quae! Molestiae repudiandae maxime impedit ad, eum est!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit aliquam id fugiat, velit veritatis esse! Ipsa tempore quasi fugit, incidunt, dignissimos rerum deserunt possimus aspernatur corporis iusto eligendi numquam aliquam repellat alias magni ullam, nobis, placeat a. Similique odio, nesciunt est officiis ratione voluptatem tempora dicta quod vero. Amet sequi quas repellat aliquam illo totam dolorum, dolore eaque porro commodi odio vitae ex! Odit debitis excepturi necessitatibus esse, velit rerum? Molestiae, earum illum rem quas maiores provident adipisci perspiciatis porro? Consequuntur ratione, velit doloribus unde, necessitatibus corrupti sunt iusto numquam, architecto ex provident hic rem. Aspernatur a amet expedita, ad repellat voluptatem laboriosam, blanditiis deserunt quis molestiae quae, hic perferendis in totam optio vero. Accusamus aut beatae id sed, omnis dicta rerum repudiandae nostrum minus, illum nemo non accusantium perferendis ratione enim ea quas veritatis vero odit distinctio facilis assumenda harum. Atque at ex ut ipsum fugit deserunt inventore, excepturi. Consequuntur, iure tempore nisi, similique, harum dignissimos, vitae temporibus blanditiis veritatis saepe rerum repellat. Incidunt sequi, voluptate asperiores quaerat dolores numquam esse obcaecati saepe unde aliquid beatae odio mollitia vero. Numquam voluptate provident molestiae error labore, fugit consequatur incidunt saepe maxime quis, molestias perspiciatis libero eaque ipsum impedit! Asperiores, doloremque!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis minus itaque odit atque, accusamus amet, nulla magnam beatae quidem quasi, earum. Praesentium facilis enim maxime aspernatur cumque repellendus dolore alias facere magni, unde incidunt explicabo minima culpa, modi voluptate ad.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa iure, voluptatum sequi dolorem numquam ullam! Tempore error quos, nobis sapiente porro nihil mollitia ut optio! Animi modi, totam magnam adipisci minus, nesciunt quam cum repudiandae aspernatur. Quod, dolor veritatis perferendis repellat pariatur quae! Molestiae repudiandae maxime impedit ad, eum est!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit aliquam id fugiat, velit veritatis esse! Ipsa tempore quasi fugit, incidunt, dignissimos rerum deserunt possimus aspernatur corporis iusto eligendi numquam aliquam repellat alias magni ullam, nobis, placeat a. Similique odio, nesciunt est officiis ratione voluptatem tempora dicta quod vero. Amet sequi quas repellat aliquam illo totam dolorum, dolore eaque porro commodi odio vitae ex! Odit debitis excepturi necessitatibus esse, velit rerum? Molestiae, earum illum rem quas maiores provident adipisci perspiciatis porro? Consequuntur ratione, velit doloribus unde, necessitatibus corrupti sunt iusto numquam, architecto ex provident hic rem. Aspernatur a amet expedita, ad repellat voluptatem laboriosam, blanditiis deserunt quis molestiae quae, hic perferendis in totam optio vero. Accusamus aut beatae id sed, omnis dicta rerum repudiandae nostrum minus, illum nemo non accusantium perferendis ratione enim ea quas veritatis vero odit distinctio facilis assumenda harum. Atque at ex ut ipsum fugit deserunt inventore, excepturi. Consequuntur, iure tempore nisi, similique, harum dignissimos, vitae temporibus blanditiis veritatis saepe rerum repellat. Incidunt sequi, voluptate asperiores quaerat dolores numquam esse obcaecati saepe unde aliquid beatae odio mollitia vero. Numquam voluptate provident molestiae error labore, fugit consequatur incidunt saepe maxime quis, molestias perspiciatis libero eaque ipsum impedit! Asperiores, doloremque!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis minus itaque odit atque, accusamus amet, nulla magnam beatae quidem quasi, earum. Praesentium facilis enim maxime aspernatur cumque repellendus dolore alias facere magni, unde incidunt explicabo minima culpa, modi voluptate ad.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa iure, voluptatum sequi dolorem numquam ullam! Tempore error quos, nobis sapiente porro nihil mollitia ut optio! Animi modi, totam magnam adipisci minus, nesciunt quam cum repudiandae aspernatur. Quod, dolor veritatis perferendis repellat pariatur quae! Molestiae repudiandae maxime impedit ad, eum est!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit aliquam id fugiat, velit veritatis esse! Ipsa tempore quasi fugit, incidunt, dignissimos rerum deserunt possimus aspernatur corporis iusto eligendi numquam aliquam repellat alias magni ullam, nobis, placeat a. Similique odio, nesciunt est officiis ratione voluptatem tempora dicta quod vero. Amet sequi quas repellat aliquam illo totam dolorum, dolore eaque porro commodi odio vitae ex! Odit debitis excepturi necessitatibus esse, velit rerum? Molestiae, earum illum rem quas maiores provident adipisci perspiciatis porro? Consequuntur ratione, velit doloribus unde, necessitatibus corrupti sunt iusto numquam, architecto ex provident hic rem. Aspernatur a amet expedita, ad repellat voluptatem laboriosam, blanditiis deserunt quis molestiae quae, hic perferendis in totam optio vero. Accusamus aut beatae id sed, omnis dicta rerum repudiandae nostrum minus, illum nemo non accusantium perferendis ratione enim ea quas veritatis vero odit distinctio facilis assumenda harum. Atque at ex ut ipsum fugit deserunt inventore, excepturi. Consequuntur, iure tempore nisi, similique, harum dignissimos, vitae temporibus blanditiis veritatis saepe rerum repellat. Incidunt sequi, voluptate asperiores quaerat dolores numquam esse obcaecati saepe unde aliquid beatae odio mollitia vero. Numquam voluptate provident molestiae error labore, fugit consequatur incidunt saepe maxime quis, molestias perspiciatis libero eaque ipsum impedit! Asperiores, doloremque!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis minus itaque odit atque, accusamus amet, nulla magnam beatae quidem quasi, earum. Praesentium facilis enim maxime aspernatur cumque repellendus dolore alias facere magni, unde incidunt explicabo minima culpa, modi voluptate ad.</p>
</div>
<div class="logo"><img src="../../Pictures/fd logo.png" alt="Flavour Dome"/></div>
<nav class="nav-side" nav-open>
<ul>
<li>
Home
</li>
<li>
Menu
</li>
<li>
Store
</li>
<li>
Account
</li>
<li>
Shopping Cart
</li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
How can i get my list elements fitting the width of my side menu instead of them starting far from the left margin?
Remove default padding and margin from ul tag, most of tags consist of default styling same here ul tag has default styling for both margin and padding and that's why your menu has that spacing.
Default ul styling,
ul{
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
Make this changes in your code.
.nav-side ul {
list-style: none;
padding:0; /* Add this */
margin:0;
}
You need work on little bit on CSS styling, modify the following selector as suggested.
.nav-side ul
{
list-style: none;
padding:10px;
margin: 0;
background-color: antiquewhite;
}