Animate scrolling to top of element within an overflow div - javascript

I am struggling to figure this out. I have a div that is set to overflow: scroll;. I want to be able to click a link and have the content in that div scroll to the top of the linked element. For some reason it always seems like it scrolls until the top of the element hits the top of the body. I need it to stop when it hits the top of the overflow div. In the example I have below when you click "link to paragraph 3" I need it to put paragraph 3 at the top of the scrollable div.
$(document).ready(function(){
$("a").click(function(e){
e.preventDefault();
var anchor = $(this).attr("href");
console.log(anchor);
$(".parent").animate({
scrollTop: $(anchor).offset().top - $(".parent").offset().top
}, 2000);
});
});
body {background-color:tan;}
.parent {height:100px; overflow-y:scroll; background-color:#ffff; margin-top:100px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Link to paragraph 3
Link to paragraph 4
<div class="parent">
<div id="child1">
<p><strong>paragraph 1</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
</p>
</div>
<div id="child2">
<p><strong>paragraph 2</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
</p>
</div>
<div id="child3">
<p><strong>paragraph 3</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
</p>
</div>
<div id="child4">
<p><strong>paragraph 4</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
</p>
</div>
<div id="child5">
<p><strong>paragraph 5</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
</p>
</div>
</div>

jQuery's .offset() method returns the offset of the element relative to the document. To counteract this, you need to substract the offset of the container. Below I have modified the 4th line of javascript only.
$(document).ready(function(){
$("a").click(function(e){
e.preventDefault();
var anchor = $(this).attr("href");
console.log(anchor);
$(".parent").animate({
scrollTop: $(".parent").scrollTop() + $(anchor).offset().top - $(".parent").offset().top
}, 2000);
});
});
body {
background-color:tan;
}
.parent {
height:100px;
overflow-y:scroll;
background-color:#ffff;
margin-top:100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Link to paragraph 3
Link to paragraph 4
<div class="parent">
<div id="child1">
<p><strong>paragraph 1</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
</p>
</div>
<div id="child2">
<p><strong>paragraph 2</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
</p>
</div>
<div id="child3">
<p><strong>paragraph 3</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
</p>
</div>
<div id="child4">
<p><strong>paragraph 4</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
</p>
</div>
<div id="child5">
<p><strong>paragraph 5</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
</p>
</div>
</div>

Related

Click in an html tag and display another that is initially hidden

Each <p> are hidden on initial load and I want to click on the <h3> then want the p-tag to show using Javascript.
I have a section in my HTML that looks as follow
<div id="bio-sections">
<div id="history">
<h3 onclick="openFunction()">My History</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<div id="schooling">
<h3>My Schooling</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure distinctio voluptatum non quia maxime numquam amet eum at, quo ut iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.</p>
</div>
<div id="work">
<h3>My Work experience</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore porro natus voluptates nam, consectetur corporis vitae eius hic sed ea earum.</p>
</div>
<div id="hobbies">
<h3>My Hobbies</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor perspiciatis ipsam suscipit voluptas ab distinctio a doloribus, dolorem officia iure nemo qui incidunt soluta dolores ratione saepe. In, mollitia! Voluptatem!</p>
</div>
</div>
My question is how do you reference the following div (or in this case p-tag) given the H3 you pressed?
If you press the H3 under #history then only that p-tag must show and the same with the other divs. But how do you do this in Javascript without duplicating code with different id's or classes.
My approach avoid the use of inline JS inside HTML, which is a bad practice.
Select all <h3> that are clickable and should open the <p> tags, then add the listener to them all.
Now, all you need is the function using this, that refers to the clicked h3, get it's sibling element, check if it is displaying or not, and do the toggle.
See below code
openFunction = function(ev) {
let pTagElem = this.nextElementSibling
if (pTagElem.style.display == "inline") {
pTagElem.style.display = "none"
} else {
pTagElem.style.display = "inline"
}
}
//select all <h3> that should be clickable (inside bio-sections divs)
let h3s = document.querySelectorAll("#bio-sections div h3")
//add the listener to them all
for (let h3 of h3s) {
h3.onclick = openFunction
}
#bio-sections div p {
display: none
}
#bio-sections div h3 {
cursor: pointer
}
<div id="bio-sections">
<div id="history">
<h3>My History</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<div id="schooling">
<h3>My Schooling</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure distinctio voluptatum non quia maxime numquam amet eum at, quo ut iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.</p>
</div>
<div id="work">
<h3>My Work experience</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore porro natus voluptates nam, consectetur corporis vitae eius hic sed ea earum.</p>
</div>
<div id="hobbies">
<h3>My Hobbies</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor perspiciatis ipsam suscipit voluptas ab distinctio a doloribus, dolorem officia iure nemo qui incidunt soluta dolores ratione saepe. In, mollitia! Voluptatem!</p>
</div>
</div>
you can use javascript parameters like this, and move the id into the p tag
<div>
<h3 onclick="openFunction('history')">My History</h3>
<p id="history">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<script>
function openFunction(id) {
document.getElementById(id).show()
}
</script>
You can use closest() and delegation.
const container = document.querySelector("#bio-sections");
container.addEventListener("click", function (event) {
const parentSectionDiv = event.target.closest(".section");
if (parentSectionDiv !== null) {
parentSectionDiv.querySelector("p").classList.remove("hidden");
}
});
.hidden {
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link rel="stylesheet" href="style.css" /> -->
<title>Sign in & Sign up Form</title>
</head>
<body>
<div id="bio-sections">
<div id="history" class="section">
<h3>My History</h3>
<p class="hidden">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias
hic officia dolor quidem maiores quasi architecto veritatis obcaecati
debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum
quae!
</p>
</div>
<div id="schooling" class="section">
<h3>My Schooling</h3>
<p class="hidden">
Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure
distinctio voluptatum non quia maxime numquam amet eum at, quo ut
iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.
</p>
</div>
<div id="work" class="section">
<h3>My Work experience</h3>
<p class="hidden">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam
dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore
porro natus voluptates nam, consectetur corporis vitae eius hic sed ea
earum.
</p>
</div>
<div id="hobbies" class="section">
<h3>My Hobbies</h3>
<p class="hidden">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
perspiciatis ipsam suscipit voluptas ab distinctio a doloribus,
dolorem officia iure nemo qui incidunt soluta dolores ratione saepe.
In, mollitia! Voluptatem!
</p>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
It depends a bit on how stable your HTML is, but if you are confident it remains like that you don't need to change it and can on the click get the p element.
There's several ways of doing this. This snippet gets the common parent and the first p element in it.
function openFunction() {
console.log(event.target);
console.log(event.target.parentElement.querySelector('p:first-of-type'));
}
<div id="bio-sections">
<div id="history">
<h3 onclick="openFunction()">My History</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<div id="schooling">
<h3>My Schooling</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure distinctio voluptatum non quia maxime numquam amet eum at, quo ut iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.</p>
</div>
<div id="work">
<h3>My Work experience</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore porro natus voluptates nam, consectetur corporis vitae eius hic sed ea earum.</p>
</div>
<div id="hobbies">
<h3>My Hobbies</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor perspiciatis ipsam suscipit voluptas ab distinctio a doloribus, dolorem officia iure nemo qui incidunt soluta dolores ratione saepe. In, mollitia! Voluptatem!</p>
</div>
</div>

Make absolutely positioned button same width as its content

I have floating buttons that I want to be exactly as wide as their content. The content may be several lines long.
I have tried a lot of things, but nothing seems to work. Any ideas how to achieve this?
$('button').css('width', $('button span').outerWidth() + 'px')
$.each($('button'), (i, v) => {
$(v).css('width', $(v).find('span').outerWidth() + 'px');
$(v).css('top', i*100 + 'px');
});
section {
position: relative;
width: 300px;
}
button {
position: absolute;
padding: 0;
text-align: left;
}
span { background: lightcoral; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<button>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis iure nostrum dicta cumque. Nisi facilis corporis hic, pariatur molestiae error distinctio architecto quas itaque deserunt aliquam quo molestias dolor ex!</span>
</button>
<button>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
</button>
<button>
<span>Lorem ipsum dolor sit amet.</span>
</button>
<button>
<span>Lorem.</span>
</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
</section>
you need to consider the border so add box-sizing: content-box; and also 1px to the final width (I am finding why ...)
$.each($('button'), (i, v) => {
$(v).css('width', ($(v).find('span').outerWidth() + 1) + 'px');
$(v).css('top', i * 100 + 'px');
});
section {
position: relative;
width: 300px;
}
button {
position: absolute;
box-sizing: content-box;
padding: 0;
text-align: left;
}
span {
background: lightcoral;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<button>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis iure nostrum dicta cumque. Nisi facilis corporis hic, pariatur molestiae error distinctio architecto quas itaque deserunt aliquam quo molestias dolor ex!</span>
</button>
<button>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
</button>
<button>
<span>Lorem ipsum dolor sit amet.</span>
</button>
<button>
<span>Lorem.</span>
</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
</section>

how to divide a long paragraph from API into 3 section using CSS or Javascript

currently, I am trying to get a long paragraph or news into 3 sections from API so it can take a layout like in example picture. but the problem I can't divide the paragraph to make it like a layout unless I got 3 attributes for every section and just read it in angular.
I already read this Divide HTML into pages, split long paragraphs
but it still not solve my problem, can someone help me to solve this problem only using 1 attribute?
this is my example data for news:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.
this is my html code :
<!-- start section -->
<section class="wow fadeIn">
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 d-flex flex-wrap mx-auto last-paragraph-no-margin text-center text-md-left">
<div class="col-12 col-lg-4 pl-0 text-center text-large md-no-padding-lr md-margin-30px-bottom">
<!-- start blockquote -->
<p class="text-extra-dark-gray margin-50px-bottom md-margin-20px-bottom alt-font">
<i class="fas fa-quote-left text-light-gray icon-medium margin-15px-bottom"></i>
Apa yang mendefinisikan siapa kita, tidak ada artinya dibandingkan apa yang menyatukan kita.
<i class="fas fa-quote-right text-right text-light-gray icon-medium margin-15px-bottom"></i>
</p>
<!-- end blockquote -->
</div>
<div class="col-12 col-lg-8 pr-0 text-large md-no-padding-lr text-center text-md-left">
<p class="text-large line-height-30 text-medium-gray text-center text-md-justify sm-line-height-26">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga autem eius, hic tempore neque vel beatae facilis quaerat excepturi, minima odio dolore! Atque non quo illo, odio est vel consequuntur! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quis ex aspernatur ab sunt repellat in ratione. Suscipit fugiat, sed laborum debitis, soluta dolores ipsum hic quae, corporis dignissimos unde! Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus impedit repudiandae illum, incidunt tenetur sapiente ad itaque odio, ipsa cupiditate saepe omnis voluptatibus! Ipsum beatae, nihil voluptatem earum illum non. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium sunt aliquam corrupti sed voluptates, suscipit quibusdam rerum inventore molestiae, ullam fugiat ducimus, debitis mollitia consequatur. Maiores, cupiditate! Nesciunt, odio modi.</p>
</div>
</div>
</div>
</div>
</section>
<!-- end section -->
<!-- start parallax section -->
<section class="wow fadeIn parallax p-0 height-400px md-height-200px sm-height-100px background-position-x-50 cover-background" data-stellar-background-ratio="0.5" style="background-image: url('../../../assets/img/galeri/mpkmb-6.webp');">
<div class="container">
<div class="row">
<div class="col-12"></div>
</div>
</div>
</section>
<!-- end parallax section -->
<!-- start section -->
<section class="wow fadeIn">
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 d-flex flex-wrap mx-auto last-paragraph-no-margin text-center text-md-left">
<div class="col-12 col-lg-5 pl-0 text-large md-no-padding-lr md-margin-30px-bottom">
<p class="text-large line-height-30 text-medium-gray text-center text-md-justify sm-line-height-26">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur, ab minima! Aliquid unde architecto, omnis, quisquam, rem exercitationem fuga reiciendis quam voluptatibus aliquam minima aperiam dolore voluptatem sunt alias quis.</p>
</div>
<div class="col-12 col-lg-7 pr-0 text-large md-no-padding-lr text-center text-md-left">
<p class="text-large line-height-30 text-medium-gray text-center text-md-justify sm-line-height-26">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum placeat officiis laborum. Amet harum placeat, eos, mollitia laudantium odio, quam rerum ut esse provident explicabo asperiores in possimus molestiae officia.</p>
</div>
</div>
</div>
</div>
</section>
<!-- end section -->
so to sum it:
how can I make a sentence which can continue to the next section like the layout or example image do?
As for my code, it already done slicing the layout image but still not divide or make the news continue to the next section since in my code I divide it into 3 section

Automatic scroll To element on a list when open this

) ,
I explain my little problem ( sorry for my english):
I have a list of element (div) in left ( constraint in size) with a scrollbar (auto)
(a custom scroll but it's the same problem with the basic scroll).
All of this "element" can be open (with a "+" button) that open a "sub element" IN the list.
Problem , by example if you open the last element you can't see the sub element without scroll to this sub element, i would like add a js for scrolling to this open sub-element"
I explain with image what i would like have: http://www.nanosix.be/test/help.jpg
and i make a simply version on jsfiddle here :
https://jsfiddle.net/9Lrhfqmk/
<body>
<div class="menu">
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
</div>
<script>
$(".button").click(function() {
$(this).parent(".ele").children(".other").toggleClass("displayblock");
});
</script>
</body>
Here is the updated fiddle: https://jsfiddle.net/9Lrhfqmk/2/
You have to do something like this:
$( ".button" ).click(function() {
var parent = $(this).parent(".ele");
var other = parent.children(".other");
other.toggleClass("displayblock");
if(other.hasClass("displayblock")){
$(".menu").scrollTop(other.offset().top);
}
else{
$(".menu").scrollTop(parent.offset().top);
}
});

Getting the distance from an element and top of the document

I'm trying to get the distance from the top of an element and the top of the page every time the user scrolls. I got it to work but when you scroll, it says the distance hasn't changed. I tried to solve this with a closure but I am not really great with closures. Theres a demo of what I have so far here: http://addisonbean.com/test/ it logs the distance in the console.
I know there may be an easier way to do this, but I'm would really like to know what I'm doing wrong. Can anyone help me with this?
And this is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FitGird</title>
<link rel="stylesheet" href="fitgrid.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="fg12">Addison Bean.</h1>
<div class="row">
<h2>Article</h2>
<hr class="fg6">
<hr class="fg6 hidden">
<p class="fg6">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
<p class="fg6">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
</div>
<div class="row">
<p class="fg6">3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
<p class="fg6">4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
</div>
<div class="row">
<p class="fg6">5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
<p class="fg6">6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
</div>
<div class="row">
<p class="fg6">5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
<p class="fg6">6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
</div>
<div class="row">
<p class="fg6">5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
<p class="fg6">6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
</div>
<div class="row">
<p class="fg6">5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
<p class="fg6">6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
</div>
</div>
<script>
var elem = document.getElementsByTagName('h2')[0];
function makeScrollOffset(el) {
function getWindowOffset() {
var woff = el.getBoundingClientRect().top,
soff = window.pageYOffset;
var dist = Math.round(woff + soff);
console.log(dist);
}
return getWindowOffset;
}
window.onscroll = makeScrollOffset(elem);
</script>
</body>
</html>
With your code it should be:
var dist = Math.round(woff-soff);
Example here
this works very well and returns the distance:
window.onscroll = function ()
{
console.log(document.getElementsByTagName('h2')[0].getBoundingClientRect().top);
}
note that negative number means the selected elements is above the viewport's top line and positive numbers means under this line. if you get the number 0, the element's top is perfectly aligned with the viewport's top line.

Categories