Move class/style based on input range value - javascript

I wonder how I can highlight only the paragraph that at any moment correspondes to value retrieved from the input with a type of range.
When I move the slider I want to add a class to the paragraph which correspondes to the input value at that given time. I have achieved setting the class (I just used inline styling to test with), but how can I also at the same time remove the class from all the other paragraphs which don't correspond to the value?
This is what I got now:
<input id="part" type="range" min="1" max="6" value="6" step="1">
<p class="update-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In nobis nemo porro saepe facere minus!</p>
<p class="update-2">Lorem ipsum dolor sit amet.</p>
<p class="update-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem impedit neque odio, aut. Quos sapiente quisquam molestias, fugit iste aliquid, aperiam porro cumque quaerat pariatur obcaecati.</p>
<p class="update-4">Lorem ipsum dolor.</p>
<p class="update-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, eius dolorum consectetur.</p>
<p class="update-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, dolore nesciunt nisi porro odit explicabo debitis? Iure qui, impedit fugiat officia itaque dolores. Laudantium.</p>
JS / jQuery:
var p = document.getElementById('part');
p.addEventListener('input', function () {
$('p.update-' + p.value).css('color', 'red');
}, false )

On the following example, when the range input moves, all <p> elements are changed to the .transparent class, then the selected one receives the new .selected class.
function highlight(){
var x = document.getElementsByTagName("p");
var i;
for (i = 0; i < x.length; i++) {
x[i].className = "transparent";
}
var sell = document.getElementById("parag").value;
document.getElementById("a" + sell).className = "selected";
}
body {
background: #f7f7f7;
}
.selected {
color: #000000;
background: rgba(215, 255, 0, 0.8);
}
.transparent {
color: #666666;
background: transparent;
}
<input id=parag type="range" name="range" min="1" max="6" step="1" oninput="highlight()">
<p id=a1 class="transparent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In nobis nemo porro saepe facere minus!</p>
<p id=a2 class="transparent">Lorem ipsum dolor sit amet.</p>
<p id=a3 class="transparent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem impedit neque odio, aut. Quos sapiente quisquam molestias, fugit iste aliquid, aperiam porro cumque quaerat pariatur obcaecati.</p>
<p id=a4 class="transparent">Lorem ipsum dolor.</p>
<p id=a5 class="transparent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, eius dolorum consectetur.</p>
<p id=a6 class="transparent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, dolore nesciunt nisi porro odit explicabo debitis? Iure qui, impedit fugiat officia itaque dolores. Laudantium.</p>

An alternative solution only using javascript and reducing the number of operations is:
// save the previous selected paragraph
var oldSelectedParagraph = null;
window.onload= function(e) {
document.getElementById('part').addEventListener('change', function () {
// if the previous selected paragraph exists remove the attribute
if (oldSelectedParagraph != null) {
oldSelectedParagraph[0].style.color = '';
}
//save current selected paragraph if valid and set the attribute
oldSelectedParagraph = document.querySelectorAll('p.update-' + this.value);
if (oldSelectedParagraph.length == 1) {
oldSelectedParagraph[0].style.color = 'red';
} else {
oldSelectedParagraph = null;
}
}, false )
}
<input id="part" type="range" min="1" max="6" value="6" step="1">
<p class="update-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In nobis nemo porro saepe facere minus!</p>
<p class="update-2">Lorem ipsum dolor sit amet.</p>
<p class="update-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem impedit neque odio, aut. Quos sapiente quisquam molestias, fugit iste aliquid, aperiam porro cumque quaerat pariatur obcaecati.</p>
<p class="update-4">Lorem ipsum dolor.</p>
<p class="update-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, eius dolorum consectetur.</p>
<p class="update-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, dolore nesciunt nisi porro odit explicabo debitis? Iure qui, imped</p>

Related

My toggle for my button text wont work.. jQuery [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 days ago.
Improve this question
HTML
<span
id="hs_cos_wrapper_petition-area-module-2_"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="rich_text"
><h1 style="font-size: 42px">
<span style="color: #ffffff"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, iusto,
voluptatibus blanditiis totam eligendi vitae</span
>
</h1>
<h1 style="font-size: 30px">
<span style="color: #ffffff"
>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span
>
</h1>
<p style="font-weight: normal">
<span style="color: #ffffff"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, iusto,
voluptatibus blanditiis totam eligendi vitaeLorem ipsum dolor sit amet
consectetur adipisicing elit. Quidem, iusto, voluptatibus blanditiis totam
eligendi vitae</span
>
</p>
<p>
<span style="color: #ffffff"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, iusto,
voluptatibus blanditiis totam eligendi vitaeLorem ipsum dolor sit amet
consectetur adipisicing elit. Quidem, iusto, voluptatibus blanditiis totam
eligendi vitaeLorem ipsum dolor sit amet consectetur adipisicing elit.
Quidem, iusto, voluptatibus blanditiis totam eligendi vitaex
</span>
</p>
<p>
<span style="color: #ffffff"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, iusto,
voluptatibus blanditiis totam eligendi vitaeLorem ipsum dolor sit amet
consectetur adipisicing elit. Quidem, iusto, voluptatibus blanditiis totam
eligendi vitaeLorem ipsum dolor sit amet consectetur adipisicing elit.
Quidem, iusto, voluptatibus blanditiis totam eligendi vitaex
</span>
</p>
<p>
<span style="color: #ffffff"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, iusto,
voluptatibus blanditiis totam eligendi vitaeLorem ipsum dolor sit amet
consectetur adipisicing elit. Quidem, iusto, voluptatibus blanditiis totam
eligendi vitaeLorem ipsum dolor sit amet consectetur adipisicing elit.
Quidem, iusto, voluptatibus blanditiis totam eligendi vitaex
</span>
</p>
<p>
<span style="color: #ffffff"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, iusto,
voluptatibus blanditiis totam eligendi vitaeLorem ipsum dolor sit amet
consectetur adipisicing elit. Quidem, iusto, voluptatibus blanditiis totam
eligendi vitaeLorem ipsum dolor sit amet consectetur adipisicing elit.
Quidem, iusto, voluptatibus blanditiis totam eligendi vitaex
</span>
</p>
<p>
<span style="color: #ffffff"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, iusto,
voluptatibus blanditiis totam eligendi vitaeLorem ipsum dolor sit amet
consectetur adipisicing elit. Quidem, iusto, voluptatibus blanditiis totam
eligendi vitaeLorem ipsum dolor sit amet consectetur adipisicing elit.
Quidem, iusto, voluptatibus blanditiis totam eligendi vitaex
</span>
</p>
<p>
<span style="color: #ffffff"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, iusto,
voluptatibus blanditiis totam eligendi vitaeLorem ipsum dolor sit amet
consectetur adipisicing elit. Quidem, iusto, voluptatibus blanditiis totam
eligendi vitaeLorem ipsum dolor sit amet consectetur adipisicing elit.
Quidem, iusto, voluptatibus blanditiis totam eligendi vitaex
</span>
</p>
<p>
<span style="color: #ffffff"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, iusto,
voluptatibus blanditiis totam eligendi vitaeLorem ipsum dolor sit amet
consectetur adipisicing elit. Quidem, iusto, voluptatibus blanditiis totam
eligendi vitaeLorem ipsum dolor sit amet consectetur adipisicing elit.
Quidem, iusto, voluptatibus blanditiis totam eligendi vitaex
</span>
</p>
</span>
jQuery
<script>
//Read more button
var parsToHide = 3;
var initReadMore = function() {
$('#hs_cos_wrapper_petition-area-module-2_').children().each(function( index, element ) {
if ( index == parsToHide + 5) {
console.log("Logging from read more function");
$( '<button id="read-more-button" class="read-more-btn" onclick="readMore()">READ MORE </button>' ).insertAfter( $( element ) );
}
if (index > parsToHide + 1) {
$(element).hide();
$(element).addClass('read-more-hidden');
}
});
}
var readMore = function(){
$('#hs_cos_wrapper_petition-area-module-2_ .read-more-hidden').toggle();
console.log($('.read-more-btn').text() == 'READ MORE' ? 'READ LESS' : 'READ MORE');
}
document.addEventListener("DOMContentLoaded", () => {
initReadMore();
});
Above is my script. I am essentially trying to get my button to show Read Less once clicked and then show Read more when clicked again. Essentially toggling the text. I've done a ternary check in my readMore function but in the log, it shows "READ MORE" every time it's clicked. It doesn't toggle between "READ LESS" and "READ MORE".
Any idea why?
I am trying to toggle the text for my button. It seems correct but the toggle wont occur.

Tabs and tab content not displaying content on click

I've created some clickable tabs but for some reason the tab content does not display on click. I can't see anything out of place with my code. Any ideas would be greatly appreciated. Thanks.
<div className="container-tabs">
<ul className="tablist">
<li data-tab-target="engage" className="active-tab tab">01</li>
<li data-tab-target="scope" className="tab">02</li>
<li data-tab-target="build" className="tab">03</li>
</ul>
<div className="tab-content py">
<div id="engage" data-tab-content className="active-tab">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus aperiam repudiandae animi rerum
quae porro molestias placeat iure nostrum doloribus.
</p>
</div>
<div id="scope" data-tab-content>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam sit iste, veritatis iusto nulla delectus
voluptatibus neque. Tenetur, aperiam itaque.
</p>
</div>
<div id="build" data-tab-content>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut quas nulla, necessitatibus expedita illum
in numquam omnis tempora illo consequuntur.
</p>
</div>
</div>
</div>
const tabs = document.querySelectorAll('[data-tab-target]');
const tabContents = document.querySelectorAll('[data-tab-content]');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = document.querySelector(tab.dataset.tabTarget)
tabContents.forEach(tabContents => {
tabContents.classList.remove('active-tab')
})
tabs.forEach(tab => {
tab.classList.remove('active-tab')
})
tab.classList.add('active-tab')
target.classList.add('active-tab')
})
});
you can keep a variable with the selected tab, and go from there, also it's better to have only one listener on your tablist, i would set an id to <ul class="tablist"> for faster select.. something like this:
const tabs = document.getElementById("tablist");
let selected = document.querySelectorAll("[data-tab-target]")[0];
const tabContents = document.querySelectorAll("[data-tab-content]");
let selectedContent = tabContents[0];
tabs.addEventListener("click", (e) => {
selected.classList.remove("active-tab");
selected = e.target;
selected.classList.toggle("active-tab");
const index = [...selected.parentNode.children].indexOf(selected);
selectedContent.classList.remove("active-tab");
selectedContent = tabContents[index];
selectedContent.classList.toggle("active-tab");
});
.active-tab {
color: red;
}
<div class="container-tabs">
<ul class="tablist" id="tablist">
<li data-tab-target="engage" class="active-tab tab">01</li>
<li data-tab-target="scope" class="tab">02</li>
<li data-tab-target="build" class="tab">03</li>
</ul>
<div class="tab-content py">
<div id="engage" data-tab-content class="active-tab">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus aperiam repudiandae animi rerum quae porro molestias placeat iure nostrum doloribus.
</p>
</div>
<div id="scope" data-tab-content>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam sit iste, veritatis iusto nulla delectus voluptatibus neque. Tenetur, aperiam itaque.
</p>
</div>
<div id="build" data-tab-content>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut quas nulla, necessitatibus expedita illum in numquam omnis tempora illo consequuntur.
</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>

Animate scrolling to top of element within an overflow div

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>

When scrolling down increment from 1 to 100

So I when I start scrolling into my div, my initial value is 0. When I reach the bottom of the div, I want my value to be 100.
Here's an example :
var initial = 0;
var end = 100;
$('div').scroll(function() {
initial++;
console.log(initial);
});
div {
width: 200px;
height: 300px;
border: 1px solid;
overflow-y: scroll;
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus exercitationem numquam assumenda alias blanditiis, neque labore eaque veritatis dignissimos, odio atque praesentium ut, itaque! Neque sed voluptas, similique ullam omnis.lorem Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Soluta eos quas ea quia fuga aperiam maxime amet, a odit adipisci earum autem necessitatibus. Quidem obcaecati eveniet maxime ducimus provident saepe. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Ipsum deserunt, ipsam explicabo voluptate laborum nam odio nemo neque, libero iusto officia consequuntur dolorem quis est quod eaque? Similique, porro, et!</div>
In this example, if you check the console, When I scroll, the last value is 5, I want it to be 100
Thanks for your help !
You can set initial to be the percentage of the scrollable height
var $test = $('.test');
var scrollableHeight = $test.height() - $test[0].scrollHeight; // get amount of scroll available
$test.scroll(function() {
var $this = $(this);
var initial = $this.scrollTop() / scrollableHeight * -100; // divide the scroll top by the amount of scrollable height to get the percentage then times by -100 to make it a positive number out of 100
console.log(parseInt(initial)); // parseInt is optional - just gives you integers
});
.test {
width: 200px;
height: 300px;
border: 1px solid;
overflow-y: scroll;
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus exercitationem numquam assumenda alias blanditiis, neque labore eaque veritatis dignissimos, odio atque praesentium ut, itaque! Neque sed voluptas, similique ullam omnis.lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta eos quas ea quia fuga aperiam maxime amet, a odit adipisci earum autem necessitatibus. Quidem obcaecati eveniet maxime ducimus provident saepe. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum deserunt, ipsam explicabo voluptate laborum nam odio nemo neque, libero iusto officia consequuntur dolorem quis est quod eaque? Similique, porro, et!</div>

Categories