i tried to create an accordian where click in heading a paragraph will appear and plus icon also disappear and minus icon appear.i set style.display to change between block and none and use if else to match paragraph. I take elements by classname and access element by a for loop. The idea is to change between 2 state of p (p is hide then plus icon is block and p is block plus icon is hide and minus icon is block)
var block = document.getElementsByClassName("block")
var p = document.getElementsByClassName("content")
var plus = document.getElementsByClassName("plus")
var minus = document.getElementsByClassName("minus")
for (let i = 0; i < block.length; i++) {
block[i].addEventListener('click', function () {
if (p[i].style.display == "none") {
p[i].style.display = "block"
plus[i].style.display = "none"
minus[i].style.display = "block"
}
else if (p[i].style.display == "block") {
p[i].style.display = "none"
plus[i].style.display = "block"
minus[i].style.display = "none"
}
})
}
.block {
display: block;
}
* {
font-family: "Verdana";
font-size: 15px;
}
.hide {
display: none;
}
.header:hover {
cursor: pointer;
background: grey;
}
.header {
padding: 20px;
background: #cccccc;
display: flex;
justify-content: space-between;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="/howto/accordion/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<title>Document</title>
</head>
<body>
<div class="block">
<div class="header">
<p class="title">Section 1</p>
<span class="plus"><i class="fa-solid fa-plus"></i></span>
<span class="hide minus"><i class="fa-solid fa-minus"></i></span>
</div>
<p class="content hide">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
perferendis qui assumenda at blanditiis dolore nesciunt modi quis alias
nihil adipisci fugiat architecto, dicta unde, molestias totam delectus
quam magni!
</p>
</div>
<!-- <div class="block">
<div class="header">
<p class="title">Section 2</p>
<i class="fa-solid fa-plus"></i>
<i class="fa-solid fa-minus"></i>
</div>
<p class="hide">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
perferendis qui assumenda at blanditiis dolore nesciunt modi quis alias
nihil adipisci fugiat architecto, dicta unde, molestias totam delectus
quam magni!
</p>
</div>
<div class="block">
<div class="header">
<p class="title">Section 3</p>
<i class="fa-solid fa-plus"></i>
<i class="fa-solid fa-minus"></i>
</div>
<p class="hide">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
perferendis qui assumenda at blanditiis dolore nesciunt modi quis alias
nihil adipisci fugiat architecto, dicta unde, molestias totam delectus
quam magni!
</p>
</div> -->
<script src="js2.js"></script>
</body>
</html>
You're checking against the element's style.display property but at no point are you actually setting those properties. style refers to the inline styles on the element, but you're adding adding a class (in this case show or hide).
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
You are on the right track though. I've updated your code below. Maybe you could improve it further by:
Making use of classList.toggle rather than adding/removing
Only toggling the container rather than each element individually
EDIT: The original question did not specify jquery. Updated.
var block = $(".block")
block.on('click', function() {
var p = $(this).children('p')
var plus = $(this).find('.plus')
var minus = $(this).find('.minus')
if (p.hasClass('hide')) {
p.removeClass('hide')
plus.addClass('hide')
minus.removeClass('hide')
} else {
p.addClass('hide')
plus.removeClass('hide')
minus.addClass('hide')
}
})
* {
font-family: sans-serif;
}
.hide {
display: none;
}
.header {
padding: 20px;
background: #cccccc;
display: flex;
justify-content: space-between;
align-items: center;
}
.block {
margin: 0 0 1rem 0
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
<div class="header">
<p class="title">Section 1</p>
<span class="plus">++</span>
<span class="hide minus">--</span>
</div>
<p class="content hide">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia perferendis qui assumenda at blanditiis dolore nesciunt modi quis alias nihil adipisci fugiat architecto, dicta unde, molestias totam delectus quam magni!
</p>
</div>
<div class="block">
<div class="header">
<p class="title">Section 2</p>
<span class="plus">++</span>
<span class="hide minus">--</span>
</div>
<p class="content hide">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia perferendis qui assumenda at blanditiis dolore nesciunt modi quis alias nihil adipisci fugiat architecto, dicta unde, molestias totam delectus quam magni!
</p>
</div>
<div class="block">
<div class="header">
<p class="title">Section 3</p>
<span class="plus">++</span>
<span class="hide minus">--</span>
</div>
<p class="content hide">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia perferendis qui assumenda at blanditiis dolore nesciunt modi quis alias nihil adipisci fugiat architecto, dicta unde, molestias totam delectus quam magni!
</p>
</div>
Related
I am making a div to scroll to the page top and to appear when scrolling, but it is not working. the div appears right at the beginning without scrolling. I figured out that for some reason it works on its own javascript code without the rest of the page's code but also it appears at the beginning until I scroll it hides and then shortly appears again. I can't figure out what exactly is causing that.
relevant code (if you comment the other javascript function concerning the header the scrolling function will work but as i said after you scroll a little):
let scrollupbutton = document.getElementsByClassName("back-to-top-wrapper");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollupbutton[0].style.display = "block";
} else {
scrollupbutton[0].style.display = "none";
}
}
let header = document.getElementsByClassName("title")
window.onscroll = function() {transformheader()};
function transformheader() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
header[0].style.fontSize = "30px";
header[0].style.opacity = 0
header[0].style.transform = "translate3d(0px, 79.5556px, 0px)";
} else {
header[0].style.fontSize = "90px";
header[0].style.opacity = 1
}
}
function scrollrightfunction() {}
.back-to-top-wrapper {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
right: 0;
bottom: 0;
margin: 70px;
width: 50px;
height: 50px;
text-align: center;
background-color: rgb(122, 133, 183, 0.3);
z-index: 999;
}
.back-to-top-wrapper a {
color: rgba(110, 75, 206, 0.8);
font-size: 30px;
text-decoration: none;
width: inherit;
cursor: pointer;
}
.back-to-top-wrapper:hover {
background-color: rgba(166, 46, 88, .8);
}
.back-to-top-wrapper a:hover {
color: antiquewhite;
}
<header class="main-container header">
<h2 class="header-element main-header">blog name</h2>
<nav class="header-element nav-menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
<form class="header-element search-bar" action="">
<input type="search" placeholder="search the blog">
<button type="submit">
<img src="/images/loupe.png" alt="search-image">
</button>
</form>
<h1 class="header-element title">Read fresh fake test blog insights in this fake test blog site which is fake and is just a fake test</h1>
</header>
<main class="main-container main">
<h3 class="section-header">Recommended</h3>
<section class="blogs-container recommended">
<a class="prev" onclick="scrollLeftFunction()">❮</a>
<article class="blog-article">
<a href="blog.html">
<img src="/images/blog-pic.jfif" alt="blog-image">
<h3>article heading</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam voluptas dolorum unde non ea consequatur ducimus quo ipsam quam saepe, inventore pariatur! Dolorum magnam consequatur iste expedita, optio reprehenderit iusto.</p>
</a>
</article>
<article class="blog-article">
<a href="blog.html">
<img src="/images/blog-pic2.jfif" alt="blog-image">
<h3>article heading</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis facilis dolorum odio ad inventore fuga similique blanditiis, nobis tempore cumque quis porro officiis deserunt, magnam veritatis provident harum quaerat aperiam. lo</p>
</a>
</article>
<article class="blog-article">
<a href="blog.html">
<img src="/images/blog-pic3.jfif" alt="blog-image">
<h3>article heading</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi veritatis delectus minus dolorum assumenda unde quas quidem tenetur, sapiente doloremque quam nobis, ducimus enim excepturi qui nulla. Dolorem, officia a?</p>
</a>
</article>
<article class="blog-article">
<a href="blog.html">
<img src="/images/blog-pic.jfif" alt="blog-image">
<h3>article heading</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos perspiciatis placeat ratione officia dolore iusto, minus ipsum modi enim iste reiciendis sed doloribus sapiente voluptatem cum. Blanditiis, repudiandae. Sapiente, nulla.</p>
</a>
</article>
<a class="next" onclick="scrollRightFunction()">❯</a>
</section>
<div class="back-to-top-wrapper">
⇑
</div>
let scrollupbutton = document.getElementsByClassName("back-to-top-wrapper");
window.addEventListener("scroll",function(){
scrollFunction();
})
function scrollFunction() {
if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
scrollupbutton[0].style.display = "block";
} else {
scrollupbutton[0].style.display = "none";
}
}
let header = document.getElementsByClassName("title")
window.onscroll = function() {transformheader()};
function transformheader() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
header[0].style.fontSize = "30px";
header[0].style.opacity = 0
header[0].style.transform = "translate3d(0px, 79.5556px, 0px)";
} else {
header[0].style.fontSize = "90px";
header[0].style.opacity = 1
}
}
function scrollrightfunction() {}
.back-to-top-wrapper {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
right: 0;
bottom: 0;
margin: 70px;
width: 50px;
height: 50px;
text-align: center;
background-color: rgb(122, 133, 183, 0.3);
z-index: 999;
}
.back-to-top-wrapper a {
color: rgba(110, 75, 206, 0.8);
font-size: 30px;
text-decoration: none;
width: inherit;
cursor: pointer;
}
.back-to-top-wrapper:hover {
background-color: rgba(166, 46, 88, .8);
}
.back-to-top-wrapper a:hover {
color: antiquewhite;
}
<header class="main-container header">
<h2 class="header-element main-header">blog name</h2>
<nav class="header-element nav-menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
<form class="header-element search-bar" action="">
<input type="search" placeholder="search the blog">
<button type="submit">
<img src="/images/loupe.png" alt="search-image">
</button>
</form>
<h1 class="header-element title">Read fresh fake test blog insights in this fake test blog site which is fake and is just a fake test</h1>
</header>
<main class="main-container main">
<h3 class="section-header">Recommended</h3>
<section class="blogs-container recommended">
<a class="prev" onclick="scrollLeftFunction()">❮</a>
<article class="blog-article">
<a href="blog.html">
<img src="/images/blog-pic.jfif" alt="blog-image">
<h3>article heading</h3><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam voluptas dolorum unde non ea consequatur ducimus quo ipsam quam saepe, inventore pariatur! Dolorum magnam consequatur iste expedita, optio reprehenderit iusto.</p>
</a>
</article>
<article class="blog-article">
<a href="blog.html">
<img src="/images/blog-pic2.jfif" alt="blog-image">
<h3>article heading</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis facilis dolorum odio ad inventore fuga similique blanditiis, nobis tempore cumque quis porro officiis deserunt, magnam veritatis provident harum quaerat aperiam. lo</p>
</a>
</article>
<article class="blog-article">
<a href="blog.html">
<img src="/images/blog-pic3.jfif" alt="blog-image">
<h3>article heading</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi veritatis delectus minus dolorum assumenda unde quas quidem tenetur, sapiente doloremque quam nobis, ducimus enim excepturi qui nulla. Dolorem, officia a?</p>
</a>
</article>
<article class="blog-article">
<a href="blog.html">
<img src="/images/blog-pic.jfif" alt="blog-image">
<h3>article heading</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos perspiciatis placeat ratione officia dolore iusto, minus ipsum modi enim iste reiciendis sed doloribus sapiente voluptatem cum. Blanditiis, repudiandae. Sapiente, nulla.</p>
</a>
</article>
<a class="next" onclick="scrollRightFunction()">❯</a>
</section>
<div class="back-to-top-wrapper" style="display : none;">
⇑
</div>
This will work
I have an api that will give a number of either 1-5 under "ratings" , i also have a list of 5 stars, depending on the rating these stars will either turn red or black on click of the button, red will be for each number in the Ratings . i.e a rating of 4 would turn 4 of the stars red and 1 black. so far i have the html and css created but when the button is pressed i recieve no data at all to test the button I added a basic alert and that worked. So far I have this:
DEMO:
$("#viewreview").click(function(){
$.ajax("api link").done(function(data){
$(".reviewblk").html('');
var htmlstr = '';
for(var i=0; i<data.length; i++){
var rating = parseInt(data[i]["rating"]);
var chk = ['', '', '', '', ''];
for(var j=0; j<rating && j<5;j++){
chk[j] = 'checked';
}
htmlstr += '<div class="preview"><img src="reviewicon1.jpg" alt="reviewpic" class="revImg" /><div class="stars"><p class="checked '+chk[0]+'"></p><p class="checked '+chk[1]+'"></p><p class="checked '+chk[2]+'"></p><p class="checked '+chk[3]+'"></p><p class="checked '+chk[4]+'"></p></div><h3 class="personName">'+data[i]["nickname"]+'</h3><div class="revtext"><p>'+data[i]["review"]+'</p></div></div><hr />';
}
$(".reviewblk").html(htmlstr);
});
})
.productreviews{ /*sets font*/
font-family: 'Roboto Condensed', sans-serif;
}
.preview{ /*sets padding for how the div is displayed*/
padding-left: 60px;
padding-top: 30px;
padding-bottom: 30px;
display: block;
position: relative;
}
.revImg{ /*gives images curved edges*/
border-radius: 10px;
display: inline;
}
.personName{ /*sets the person name so that it is to the right of the image and just below the stars*/
display: inline;
position: absolute;
padding-left: 30px;
padding-top: 20px;
width: 150px;
}
.stars{ /*sets stars elements to above name and to the right of the image*/
position: absolute;
width: 100px;
top: 30px;
left: 180px;
}
.revtext{ /* displays the text div so that it is to the right side of the preview box*/
display: inline;
width: 550px;
position: absolute;
right: 0;
font-size: 15px;
font-weight: 600;
top: 10px;
}
.revtext p{ /*i used word wrap to wrap the word onto the next line then used overflow to contain the overflowing text and then used text overflow so that any overflowing text would be shown as an ellipsis*/
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
}
.btnreview{ /* setting the padding for the buton aswell as the color so that the text is white and the button itself is red, aswell as giving it curved edges.*/
padding: 10px 25px;
background-color: #F0191C;
color: white;
border: none;
border-radius: 10px;
}
.btnreview:hover{ /*changing the button when hovering and changing the cursor to a pointer*/
background-color: #8a130b;
cursor: pointer;
}
.btnblk{/* padding the button inside its div*/
padding: 25px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="productreviews"> <!--list of product reviews-->
<hr />
<h1 id = "productreviewheader">Product Reviews <span class="checked">*****</span></h1>
<hr />
<div class="reviewblk">
<div class="preview">
<img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" />
<div class="stars">
<p class = "checked">*****</p>
</div>
<h3 class="personName">Great Greace!!</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr />
<div class="preview">
<img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" />
<div class="stars">
<p class = "checked">***<span class="unchecked">**</span></p>
</div>
<h3 class="personName">Great Greace!!</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr class = "separation line"/>
<div class="preview">
<img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" />
<div class="stars">
<p class = "checked">****<span class="unchecked">*</span></p>
</div>
<h3 class="personName">Great Greace!!</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr class = "separation line"/>
<div class="preview">
<img src="images/robot-juice-images/reviewicon2.jpg" alt="reviewpic" class="revImg" />
<div class="stars">
<p class = "checked">*****</p>
</div>
<h3 class="personName">This juice just keeps me going..</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr class = "separation line"/>
</div>
<div class="reviewblk">
<div class="preview">
<img src="images/robot-juice-images/reviewicon1.jpg" alt="reviewpic" class="revImg" />
<div class="stars">
<p class = "checked">*****</p>
</div>
<h3 class="personName">Great Greace!!</h3>
<div class="revtext">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam sapiente odit porro in quam eos autem nobis quisquam reiciendis debitis magnam ipsam laboriosam iusto error quasi officia
voluptates, totam excepturi? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio accusantium, neque vel, rerum illum ipsam tempore quae accusamus voluptates sequi hic
magni dolores? Eius laboriosam tempora ut molestias consectetur nobis!
</p>
</div>
</div>
<hr class = "separation line"/>
</div>
<div class="btnblk">
<button class="btnreview" id="viewreview">READ ALL REVIEWS</button>
</div>
</article>
Please consider the following.
$("#viewreview").click(function() {
$.ajax("api link").done(function(data) {
$(".reviewblk").html('');
var rating, preview, stars;
$.each(data, function(i, el) {
preview = $("<div>", {
class: "preview"
}).appendTo(".reviewblk");
$("<img>", {
src: "reviewicon1.jpg",
alt: "Review Icon",
class: "revImg"
}).appendTo(preview);
stars = $("<div>", {
class: "stars"
}).appendTo(preview);
rating = parseInt(el.rating);
for (var i = 1; i <= 5; i++) {
$("<p>", {
class: (i <= rating ? "checked" : "unchecked")
}).appendTo(stars);
}
$("<h3>", {
class: "personName"
}).html(el.nickname).appendTo(preview);
$("<div>", {
class: "revText"
}).html("<p>" + el.review + "</p>").appendTo(preview);
$("<hr>").appendTo(preview);
});
});
});
We can use jQuery to create the elements and append them as they are created. Using $.each(), we can itereate each of the items in data. WE also know there will be 5 'check' items, so we can simply create a small loop to create them. A number of them, equal to the rating will be "checked", so we can add a condition to check each one and mark it as needed.
For example, if the rating was 3, we would see:
<p class="checked"></p>
<p class="checked"></p>
<p class="checked"></p>
<p class="unchecked"></p>
<p class="unchecked"></p>
i will be 1 on the first iteration, and 1 is less than 3. On the 3rd loop, i will be 3 and will still meet the condition. When i is 4 or 5, it is no longer true so unchecked is supplied.
i have a problem.i want the last paragraph to be clear.in my code the last paragraph goes in below of div with position fixed and it's never shown.
div with class btn__container have position of fixed and bottom=0.so this element always stick to the bottom of the page.i want some how i can see the last element in my page.
this is my html & css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: Roboto, sans-serif;
background-color: #eee;
direction: ltr;
}
main {
padding: 15px;
}
h1 {
text-align: center;
}
p {
margin-top: 20px;
text-align: justify;
}
.card__container {
display: flex;
}
.card {
background-color: deepskyblue;
color: #eee;
padding: 15px;
border-radius: 10px;
flex: 0 0 40%;
margin-top: 20px;
margin-left: 10px;
}
.card > p {
text-align: start;
}
.btn__container {
width: 100%;
position: fixed;
bottom: 0;
right: 0;
display: flex;
justify-content: space-around;
background-color: lightgrey;
padding: 10px 0;
}
button{
border: 0;
outline: none;
color: #eee;
background-color: deepskyblue;
padding: 10px 0;
flex: 0 0 30%;
border-radius: 10px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<main>
<h1>This is a test page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda doloremque enim nulla perferendis praesentium
quos temporibus voluptas voluptatem? Error, illum.</p>
<div class="card__container">
<div class="card">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque error est porro, ratione recusandae
similique!</p>
</div>
<div class="card">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque error est porro, ratione recusandae
similique!</p>
</div>
<div class="card">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque error est porro, ratione recusandae
similique!</p>
</div>
<div class="card">
<h2>Card Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque error est porro, ratione recusandae
similique!</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda aut dignissimos doloremque esse impedit ipsam
itaque molestias obcaecati officia pariatur placeat praesentium quis rem rerum sit unde, vel vero?
Similique.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, expedita?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque eius enim impedit laboriosam officiis
possimus repellendus sed tempore, voluptates voluptatibus. Adipisci at ea possimus? Architecto autem,
consequatur culpa cumque earum eligendi illo in maxime, minus nam neque perferendis placeat quasi rerum
voluptas? Alias est facilis natus quis tempora totam ut!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi facere unde. Eaque est quidem
quisquam quos repellendus tempora ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex hic ipsa laudantium omnis reiciendis repellendus
repudiandae sed sit! Ad animi maiores nulla tempora ullam voluptas?</p>
<div class="btn__container">
<button>Cancel</button>
<button>More</button>
</div>
</main>
</body>
</html>
u have to use padding bottom for how much fixed div height that much u have to mention for main tag it will work its simple code try below code i have used 70px u can give ur fixed div height
main{
padding-bottom:70px
}
I've a navigation menu which dissappears when the breakpoint is 400px and icon bars appear. I added an eventListener and when I click on the icon I've my message in the console, but when I added if statements I've got an error message 'Cannot read property 'style' of null at HTMLBodyElement'.
I've already read similar questions but still I can't resolve the problem.
.cont-menu-a{
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 35%;
height: 62%;
#media only screen and (max-width: $sm) {
display : none;
}
}
.fa-grip-lines{
color: #212529;
font-size: 2rem;
margin-left: 5%;
margin-top: 5%;
#media only screen and (min-width: $sm) {
display : none;
}}
`<div class="about-page">
<div class="sous-menu-burger">
<i class="fas fa-grip-lines"></i>
</div>
<div class="cont-main">
<div class="cont-menu-a">
<div class="home-a">Home</div>
<div class="about-a">About</div>
<div class="skills-a">Skills</div>
<div class="projects-a">Projects</div>
<div class="contacts-a">Contacts</div>
</div>
<div class="cont-text">
<div class="titre">About</div>
<div class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A repellat natus praesentium ratione ullam ipsa, perspiciatis consectetur, optio excepturi id cum maxime recusandae corrupti nihil. Illo deleniti eaque quod enim.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil laudantium optio ex nobis. Voluptatibus optio inventore doloremque. Perspiciatis temporibus ipsa quisquam expedita officiis? Nulla quod perferendis maiores repudiandae, vero eaque!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis earum a impedit, laborum magni fugit molestias, modi possimus quod hic consequuntur ad rem sed. Repudiandae, cupiditate perspiciatis! Pariatur, quia voluptatem.
</div>
</div>
</div>
</div>`;
const contSousmenu = document.querySelector('.cont-menu-a');
document.body.addEventListener('click', function (e) {
if (e.target.matches('.fa-grip-lines')) {
console.log('toto');
if (contSousmenu.style.display === 'none') {
contSousmenu.style.display = 'block';
} else {
contSousmenu.style.display = 'none';
}
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="about-page">
<div class="sous-menu-burger">
<i class="fas fa-grip-lines"></i>
</div>
<div class="cont-main">
<div class="cont-menu-a">
<div class="home-a">Home</div>
<div class="about-a">About</div>
<div class="skills-a">Skills</div>
<div class="projects-a">Projects</div>
<div class="contacts-a">Contacts</div>
</div>
<div class="cont-text">
<div class="titre">About</div>
<div class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. A repellat
natus praesentium ratione ullam ipsa, perspiciatis consectetur,
optio excepturi id cum maxime recusandae corrupti nihil. Illo
deleniti eaque quod enim. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Nihil laudantium optio ex nobis. Voluptatibus
optio inventore doloremque. Perspiciatis temporibus ipsa quisquam
expedita officiis? Nulla quod perferendis maiores repudiandae, vero
eaque! Lorem ipsum dolor sit amet consectetur adipisicing elit.
Perspiciatis earum a impedit, laborum magni fugit molestias, modi
possimus quod hic consequuntur ad rem sed. Repudiandae, cupiditate
perspiciatis! Pariatur, quia voluptatem.
</div>
</div>
</div>
</div>
<script>
const hamburger = document.querySelector(".fa-grip-lines");
const contSousmenu = document.querySelector(".cont-menu-a");
hamburger.addEventListener("click", function (e) {
console.log("toto");
if (contSousmenu.style.display === "none") {
contSousmenu.style.display = "block";
} else {
contSousmenu.style.display = "none";
}
});
</script>
</body>
</html>
I have a lot of trouble with my slider arrows as I am following along with a tutorial on youtube. Instead of going next to the picture and testimonial, it goes on the top. It didn't happen this way at first, but then I had a problem with glider.js, so I rewrote the code, and then the flaw appeared
HTML Code
<section class="testimonials-section">
<div class="wrapper">
<h2>Testimonials</h2>
<div class="testimonials container">
<div class="testimonials">
<div class="testimonial">
<div class="slide-container">
<div class="content">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga.
Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a.
Quidem, deleniti provident.
</p>
<div class="name">
<strong>Darlene Richards,</strong> Amazon
</div>
</div>
<img src="images/testimonial1.png" alt="">
</div>
</div>
<div class="testimonial">
<div class="slide-container">
<div class="content">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga.
Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a.
Quidem, deleniti provident.
</p>
<div class="name">
<strong>Peter Williams,</strong> Louis Vuitton
</div>
</div>
<img src="images/testimonial3.png" alt="">
</div>
</div>
<div class="testimonial">
<div class="slide-container">
<div class="content">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga.
Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a.
Quidem, deleniti provident.
</p>
<div class="name">
<strong>Tara Green,</strong> Ferrari
</div>
</div>
<img src="images/testimonial2.png" alt="">
</div>
</div>
</div>
<span class="slider-prev">
<img src="images/left-arrow.svg" alt="">
</span>
<span class="slider-next">
<img src="images/right-arrow.svg" alt="">
</span>
</div>
</div>
</section>
CSS Code
.slider-prev,
.slider-next {
position: absolute;
top: 68px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.06);
border-radius: 50%;
cursor: pointer;
}
.slider-next {
right: 0;
}
This is because of how the css position property works more info
Try add this line and see if it helps:
edit use .testimonials.container selector not .testimonials
.testimonials.container {
position: relative;
}