I'm using JS to move images horizontally between page sections when the user scrolls down. My approach is to set their margin-left equal to window.scrollY. However, as you can see in my
CodePen link, this means that the second image, when activated, catches up to the horizontal position of the first image. I want each slider image to be independent, so that each one would flow off the right side of the page at a different pace relative to their order on the page. Can anyone give me a tip on how to think through this problem?
// this snippet controls how often the function runs, so that it doesn't run an insane amount of times
function debounce(func, wait = 2, immediate = true) {
var timeout;
return function() {
var context = this,
args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
const sliders = document.querySelectorAll(".sliders");
function checkSlide(e) {
sliders.forEach(slider => {
// my console logs
// console.log(window.innerHeight)
// halfway through the image, start
const slideInAt =
window.scrollY + window.innerHeight - slider.height / 1
// bottom of the image,
const imageBottom = slider.offsetTop + slider.height;
//
const isHalfShown = slideInAt > slider.offsetTop;
const isNotScrolledPast = window.scrollY < imageBottom;
if (isHalfShown && isNotScrolledPast) {
// sliderImage.classList.add("active");
slider.style.marginLeft = (window.scrollY) + "px"
} else {
// sliderImage.classList.remove("active");
slider.style.marginLeft = "0px"
}
});
}
window.addEventListener("scroll", debounce(checkSlide))
.frame {
background-color: lightgray;
width: 500px;
/*height: 200vh;*/
margin: auto;
padding: 20px;
}
.scrollImage {
width: 70px;
height: 70px;
margin: 5px;
mix-blend-mode: darken;
}
<div class="frame">
<h1>Welcome</h1>
<p>Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur
pariaturlores sunt esse magni, ut, dignissimos.</p>
<p>Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni,
ut, dignissimos.</p>
<p>Adipisicing elit. Tempore tempora rerum..</p>
<p>Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur
pariaturlores sunt esse magni, ut, dignissimos.</p>
<img src="https://image.freepik.com/free-icon/sail-boat_318-1522.jpg" class="scrollImage sliders" />
<p>Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni,
ut, dignissimos.</p>
<p>Adipisicing elit. Tempore tempora rerum..</p>
<img src="https://image.freepik.com/free-icon/sail-boat_318-1522.jpg" class="scrollImage sliders" />
</div>
Related
I am unable to present two paragraph's side by side without compromising the entire format. Here is a video that better explains the issue: Video
Link to Code
Link to Site
https://jsfiddle.net/1L5emghf/
CSS:
.app {
max-width: 1000px;
margin: 0 auto;
}
.app:after {
clear:both;
}
p {
display: block;
width: calc(50% - 10px);
float: left;
margin: 5px;
background-color: #CCC;
border: 3px;
padding: 20px;
box-sizing: border-box;
}
p:nth-child(even) {
float: right;
}
Is this the solution to your problem? If you want to have the same height against the underlying element use JS (you need to give the sibling a minimum height relative to the active element)
Full solution with JS
https://jsfiddle.net/1L5emghf/1/
HTML:
<div class="app">
<p contenteditable>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto vero officia id fugit accusantium unde, minima assumenda veniam deleniti perferendis.</p>
<p contenteditable>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor qui veritatis esse voluptatum, asperiores, quam tenetur quae porro voluptatibus facilis debitis est iure recusandae voluptates. Modi sapiente maxime libero deleniti ad excepturi nam natus iusto, doloribus esse vel, recusandae repellendus iste officiis quis cupiditate blanditiis perspiciatis, facere animi. Sunt, praesentium.</p>
<p contenteditable>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere omnis illum aperiam voluptates error doloremque quam, totam minima corrupti doloribus magni eaque velit ex? Eveniet praesentium, delectus cumque ullam velit dicta dolorum maiores, consequatur fugit nam nulla, quas veniam tempore repellendus voluptate! Cumque adipisci nesciunt quae iste esse commodi? Minima placeat, tempora ea harum ipsam vitae? Velit laudantium quibusdam iure facilis repellendus perspiciatis temporibus maiores necessitatibus alias, amet delectus quidem quia iusto eos eveniet explicabo modi voluptatibus sit harum aut provident corporis! Culpa soluta sunt, sapiente quasi officiis aliquid vitae, repellendus, repellat consectetur voluptatem, sed quas. Modi quod ab voluptatem debitis nulla eum, in, repellat cupiditate, eos voluptas quae commodi ut incidunt sapiente soluta doloribus consequuntur saepe. Officiis deserunt ab iste quae ullam cupiditate quis possimus, incidunt, voluptates distinctio doloremque dignissimos dicta dolore quo sit. Ullam asperiores maiores aliquam sint facere cumque quidem reiciendis natus, quo nobis quod aspernatur rem sapiente ipsum, voluptatibus tenetur non id modi adipisci sunt quae provident unde in! Esse placeat et recusandae nobis iste magni dolorem assumenda similique. Tempora magni repellat, fugiat officiis quam error non quisquam blanditiis nesciunt sint consectetur dolorem voluptates sed ipsum unde. At amet culpa excepturi possimus officiis magnam, accusantium fugit cupiditate voluptatibus harum explicabo quia vitae dolorum quam beatae, eveniet! Pariatur blanditiis iusto, est porro earum neque aperiam. Laudantium minima officia dolorem sit, enim blanditiis eius aspernatur dolor, assumenda, possimus ut hic id veniam unde odit nesciunt, explicabo odio vero ex! Ipsam velit, cupiditate nisi accusamus facilis aliquid ad ab omnis eveniet dolorem quaerat ea officia, necessitatibus quasi porro doloremque quis, rerum eligendi consectetur suscipit. Enim, fugiat, non? Suscipit dolorum nam assumenda nisi ipsa, voluptatum incidunt reprehenderit dolor molestiae dolores quae adipisci, dignissimos nobis illum praesentium architecto. Libero omnis velit, nihil, est consequuntur natus accusantium. Cumque numquam modi tenetur iste.</p>
<p contenteditable>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem praesentium consequatur quisquam facilis, magnam consequuntur asperiores optio architecto facere, obcaecati qui omnis cupiditate aspernatur repellat inventore illum similique placeat quas?</p>
<p contenteditable>5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit sint consequuntur non corporis hic vero ut ipsam reprehenderit rerum unde.</p>
<p contenteditable>6 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quis quibusdam eveniet soluta, iure dolor assumenda a aliquid autem sed tempora dignissimos laudantium? Ipsa maiores dolorum, optio temporibus iste dolore est nobis aspernatur placeat numquam eos fuga rerum quae sed.</p>
<p contenteditable>7 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto debitis beatae recusandae. Provident ea aut quia nemo corporis et unde iure dignissimos assumenda sed corrupti illum, harum, itaque ad ipsum.</p>
</div>
JS:
let els = document.querySelectorAll('[contenteditable]');
function syncHeight(activeEl, siblingEl) {
siblingEl.style.minHeight = activeEl.offsetHeight + 'px';
}
function prepare(el) {
let height = el.offsetHeight;
let even = !!(Array.prototype.slice.call(el.parentNode.children).indexOf(el)%2);
if(even) {
syncHeight(el, el.previousElementSibling);
} else {
if(el.nextElementSibling) {
syncHeight(el, el.nextElementSibling);
}
}
}
for(let el of els) {
prepare(el);
el.addEventListener('input', function(e) {
prepare(el);
});
}
Since all the paragraphs are using relative positions, you can set max-width / overflow-y styles for them :
CSS
p { max-height: 154px; overflow-y: scroll; }
Inline Styles
<p styles= "max-height: 154px; overflow-y: scroll; <....>" > mmmmmmmmm </p>
Incase paragraph widths are also being affected, add max-width: 483px; overflow-x: hidden; properties
I have got fixed block with scroll and when I scroll to the end of the block, the button should have a shadow. What are heights we need to be compared here?
function scrollButtonShadow() {
if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
$('.button').css('box-shadow', '0px 0px 13px 0px rgba(0, 0, 0, 1)');
} else {
$('.button').css('box-shadow', 'none');
}
}
$(window).on('scroll', scrollButtonShadow);
body {
overflow: hidden;
}
.block {
overflow: auto;
width: 200px;
height: 100%;
background: #ececec;
position: fixed;
}
.button {
position: fixed;
bottom: 0;
}
button {
border: none;
background: green;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi nihil magni placeat ducimus optio cupiditate sequi deleniti dolorem minus suscipit exercitationem fuga doloribus ipsa libero itaque dicta, error esse, nulla laudantium magnam officia tempore asperiores? Autem exercitationem nihil saepe hic laboriosam quos rerum id quod beatae natus cumque, ducimus eligendi dolores voluptas labore delectus nisi quidem culpa. Ad aperiam laboriosam inventore nisi accusamus, cum, voluptate tenetur. Facilis ratione maiores quibusdam consequuntur velit illo sit explicabo voluptates minus perspiciatis voluptatem optio commodi quos sint eligendi, beatae ipsa, et nam cupiditate at ducimus, ad accusantium sed. Iure repellendus deserunt veniam fugiat amet, sed aliquam ducimus labore necessitatibus ipsum odit voluptatem dicta sit voluptatum tempore possimus a? Ullam recusandae praesentium qui dolor officiis magni et molestiae quidem dolores dolorum animi repellat, iste, dolorem similique! Voluptate labore ipsam delectus totam, dolorum adipisci dolores, corporis amet repellendus iure animi. Vero eveniet eius dolore tempora, soluta explicabo ut, qui esse commodi, fuga debitis. Facilis tempora dolorum commodi in nesciunt culpa placeat praesentium, quis dignissimos ea asperiores ut omnis adipisci vero dolore aliquid architecto est quo, necessitatibus.
<div class="button"><button>Click</button></div>
</div>
In HTML you must add a paragraph tag (i.e. <p>) to calculate width of scrolled block:
<div class="block">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi nihil magni placeat ducimus optio cupiditate sequi deleniti dolorem minus suscipit exercitationem fuga doloribus ipsa libero itaque dicta, error esse, nulla laudantium magnam officia tempore asperiores? Autem exercitationem nihil saepe hic laboriosam quos rerum id quod beatae natus cumque, ducimus eligendi dolores voluptas labore delectus nisi quidem culpa. Ad aperiam laboriosam inventore nisi accusamus, cum, voluptate tenetur. Facilis ratione maiores quibusdam consequuntur velit illo sit explicabo voluptates minus perspiciatis voluptatem optio commodi quos sint eligendi, beatae ipsa, et nam cupiditate at ducimus, ad accusantium sed. Iure repellendus deserunt veniam fugiat amet, sed aliquam ducimus labore necessitatibus ipsum odit voluptatem dicta sit voluptatum tempore possimus a? Ullam recusandae praesentium qui dolor officiis magni et molestiae quidem dolores dolorum animi repellat, iste, dolorem similique! Voluptate labore ipsam delectus totam, dolorum adipisci dolores, corporis amet repellendus iure animi. Vero eveniet eius dolore tempora, soluta explicabo ut, qui esse commodi, fuga debitis. Facilis tempora dolorum commodi in nesciunt culpa placeat praesentium, quis dignissimos ea asperiores ut omnis adipisci vero dolore aliquid architecto est quo, necessitatibus.
</p>
<div class="button"><button>Click</button></div>
</div>
In script:
function scrollButtonShadow(event) {
var blockScrool = $(this).scrollTop();
var blockHeight = $(this).find('p').height() + $(this).find('div').height();
var windowHeight = $(window).innerHeight();
var delta = blockHeight - windowHeight - blockScrool;
if (delta < 0) {
$('.button').css('box-shadow', '0px 0px 13px 0px rgba(0, 0, 0, 1)');
} else {
$('.button').css('box-shadow', 'none');
}
}
I need to find the height of the biggest div in a group of divs with the class name termPanel.
How do I access each 'termPanel' div in the terms array?
function resizePanelsToBiggest(){
var maxheight = 0;
var terms = $('.termPanel');
for(var i = 0;i<terms.length;++i){
if(maxheight < terms[i].height){
maxheight = terms[i].height;
}
}
}
Use Math.max.apply
function resizePanelsToBiggest() {
var maxheight = 0;
var terms = $('.termPanel');
var allH = terms.map(function() {
return $(this).height();
}).get();
var maxH = Math.max.apply(null, allH);
console.log(maxH);
}
Check this demo:
resizePanelsToBiggest();
function resizePanelsToBiggest() {
var maxheight = 0;
var terms = $('.termPanel');
terms.each(function(ndx){
if ($(this).height() > maxheight) {
maxheight = $(this).height();
}
});
console.log(maxheight);
}
.termPanel {
width: 90px;
display: inline-block;
vertical-align: top;
color: white;
}
.termPanel:nth-of-type(even) {
background: black;
}
.termPanel:nth-of-type(odd) {
background: red;
}
.termPanel:nth-of-type(1) {
height: 100px;
}
.termPanel:nth-of-type(2) {
height: 250px;
}
.termPanel:nth-of-type(4) {
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="termPanel"></div>
<div class="termPanel"></div>
<div class="termPanel">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut temporibus reiciendis officia veniam quos id velit quibusdam, asperiores ipsum. Obcaecati illum, hic facere repellat dolor modi commodi eum tenetur voluptas veritatis expedita consequuntur repellendus provident error, nisi quos! Aliquid error consectetur voluptates ea dicta, vero, dolores numquam, rerum quasi molestias nemo. Explicabo tenetur, omnis quos unde iusto, necessitatibus consectetur, dolorem deleniti atque doloremque repellendus earum quae sit sint, inventore nesciunt sapiente perspiciatis voluptatum corporis soluta at fugiat. Delectus excepturi unde eos deleniti soluta natus commodi ipsum sit et veniam! Eius aut, ut, ad commodi at esse facere asperiores repellat labore alias nostrum, consequatur tempora illo quasi. Nulla deleniti, mollitia soluta, repellat fugiat officiis voluptatibus odio distinctio libero, illo delectus obcaecati!</div>
<div class="termPanel"></div>
This way it seems a bit easier and more understandable to me:
function returnHighest() {
var maxH = 0;
$('.termPanel').each(function(index, elmt){
var elmtH = $(elmt).outerHeight();
if (elmtH > maxH) {
maxH = elmtH;
}
});
return maxH;
}
var h = returnHighest();
$('.termPanel').css('height', h);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="termPanel" style="float:left;width:50px;border:2px solid red"></div>
<div class="termPanel" style="float:left;width:50px;border:2px solid green"></div>
<div class="termPanel" style="float:left;width:50px;border:2px solid blue"></div>
<div class="termPanel" style="float:left;width:300px;border:2px solid red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut temporibus reiciendis officia veniam quos id velit quibusdam, asperiores ipsum. Obcaecati illum, hic facere repellat dolor modi commodi eum tenetur voluptas veritatis expedita consequuntur repellendus provident error, nisi quos! Aliquid error consectetur voluptates ea dicta, vero, dolores numquam, rerum quasi molestias nemo....</div>
I have a fixed top navbar that should slide up when the user scrolls past a certain point and be replaced with a slimmer navbar. I'm using velocity.js to animate the switch with .velocity("slideUp") / ("slideDown"). However, the animation doesn't stop looping. The switch works fine with jQuery slideUp() and slideDown() though.
Here's the velocity version:
var offsetPos = $( "h1" ).offset().top;
var navFull = $( ".navbar-full" );
var navShrink = $( ".navbar-shrink" );
navShrink.hide();
function navChange() {
var scrollPos = $( this ).scrollTop();
if ( scrollPos > offsetPos ) {
navFull.velocity("slideUp");
navShrink.velocity("slideDown");
} else {
navFull.velocity("slideDown");
navShrink.velocity("slideUp");
}
}
$( window ).on( "scroll", navChange );
html, body {
position: relative;
margin: 0;
}
.content {
width: 600px;
margin: 0 auto;
position: relative;
}
nav {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
nav p {
text-align: center;
}
.content h1 {
margin-top: 150px;
}
.navbar-full {
height: 100px;
background: blue;
}
.navbar-shrink {
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.js"></script>
<nav class="navbar-full">
<p>Why doesn't this stop!</p>
</nav>
<nav class="navbar-shrink">
<p>Why doesn't this stop!</p>
</nav>
<div class="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ducimus quia sed, iusto alias temporibus perspiciatis placeat omnis cupiditate laborum ex neque excepturi, ipsum. Quibusdam deleniti porro, assumenda possimus deserunt maiores ipsam non fuga est, voluptatem. Placeat beatae voluptatibus dolores id quis, sit ipsum vitae ducimus ab ipsam eos qui tempo Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dolorum maxime hic eaque mollitia autem laboriosam eveniet dolores voluptates, nisi quos minus voluptate est placeat maiores earum assumenda ducimus laudantium. Labore obcaecati ipsum, molestiae harum, ex tenetur enim, aut asperiot consequuntur magnam magni. Eaque quidem explicabo tempora, cum numquam sint totam corporis sunt, deleniti illum perspiciatis molestiasam numquam deserunt optio molestiae deleniti maiores molestias! Beatae et non fuga consequatur ea quisquam, iusto minima cum eligendi. Molestiae possimus ipsa pariatur facilis at. Repudiandae inventore quod quis neque cumque, tenetur, cum. Numquam quas illum nihils veniam rem fuga, fugit nesciunt asperiores at facilis ut amet, quo! Laudantium consequatur quis, incidunt accusantium assumenda harum velit, saepe molestias omnis eveniet iste vel ea, eaque. Magnam porro eligendi quasi aspernatur. Numquam quis, eius?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis voluptas, labore odio. Laboriosam fugit voluptate velit. Cupiditate fugit optio illum porro deserunt qui, eius corrupti, quod quia rerum, molestiae nostrum asperiores voluptates fuga animi perferendis. Perspiciatis nulla exercitationem quis aliquam fugit minus unde architecto vero nostrum quos, repellendus delectus aperiam porro, voluptatum accusamus eius. Facilis dolores culpa aliquid temporibus, inventore ad quisquam numquam, eum voluptas, harum consequuntur est deleniti! Sit odio repudiandae tempore tempora, ut eum nam rem error ipsum enim maxime fugit, laudantium quidem labore aliquam eligendi est magnam? Obcaecati qui cupiditate cum quis soluta ut quod consequuntur, iste impedit, placeat cumque excepturi optio, eligendi vel. Cupiditate ut ducimus perferendis, delectus molestias doloremque laboriosam praesentium aut nostrum reprehenderit nihil ea quam quos eligendi dignissimos cumque nulla! Quae, voluptas eius totam veniam nulla minus itaque cupiditate incidunt rem temporibus debitis suscipit iusto nemo molestiae dolorum magni excepturi minima officiis inventore repellat. Porro non cumque adipisci iusto, molestias ipsum error. Perferendis labore est, ab similique, corporis eaque facilis aliquid dolore. Deleniti ut nesciunt optio distinctio vitae placeat ipsa officiis, temporibus nemo perspiciatis magnam. Quaerat voluptatibus minus dolore iure, perspiciatis similique saepe sint at, nulla, minima voluptate commodi? Deleniti, quos mollitia fuga.</p>
</div>
And here it is working with jQuery:
CodePen
I've tried the stop() and stop(true,true) trick to no avail...
[Realise I didn't ask a question!]
So, my question is: Why does this work in jQuery and not Velocity? Is there a way to make the event fire only once, specifically, at the scroll position? - as it looks like it fires on all scroll events.
A caveat: I'm only a couple of months in to jQuery...
It doesn't exactly loop. It's just being executed a lot by the scrollEvent. jQuery is probably stateful, I'm not sure about velocity. You'll need a variable that checks if you are scrolled down enough and that it has already run once.
var offsetPos = $("h1").offset().top;
var navFull = $(".navbar-full");
var navShrink = $(".navbar-shrink");
navShrink.hide();
var animateUp = false;
var animateDown = true;
function navChange() {
var scrollPos = $(this).scrollTop();
if (scrollPos > offsetPos) {
if(animateUp === false){
animateDown = false;
animateUp = true;
navFull.velocity("slideUp");
navShrink.velocity("slideDown");
}
} else {
if(animateDown == false){
animateUp = false;
animateDown = true;
navFull.velocity("slideDown");
navShrink.velocity("slideUp");
}
}
}
$(window).on("scroll", navChange);
html,
body {
position: relative;
margin: 0;
}
.content {
width: 600px;
margin: 0 auto;
position: relative;
}
nav {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
nav p {
text-align: center;
}
.content h1 {
margin-top: 150px;
}
.navbar-full {
height: 100px;
background: blue;
}
.navbar-shrink {
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.js"></script>
<nav class="navbar-full">
<p>Why doesn't this stop!</p>
</nav>
<nav class="navbar-shrink">
<p>Why doesn't this stop!</p>
</nav>
<div class="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ducimus quia sed, iusto alias temporibus perspiciatis placeat omnis cupiditate laborum ex neque excepturi, ipsum. Quibusdam deleniti porro, assumenda possimus deserunt maiores ipsam non
fuga est, voluptatem. Placeat beatae voluptatibus dolores id quis, sit ipsum vitae ducimus ab ipsam eos qui tempo Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dolorum maxime hic eaque mollitia autem laboriosam eveniet dolores
voluptates, nisi quos minus voluptate est placeat maiores earum assumenda ducimus laudantium. Labore obcaecati ipsum, molestiae harum, ex tenetur enim, aut asperiot consequuntur magnam magni. Eaque quidem explicabo tempora, cum numquam sint totam
corporis sunt, deleniti illum perspiciatis molestiasam numquam deserunt optio molestiae deleniti maiores molestias! Beatae et non fuga consequatur ea quisquam, iusto minima cum eligendi. Molestiae possimus ipsa pariatur facilis at. Repudiandae inventore
quod quis neque cumque, tenetur, cum. Numquam quas illum nihils veniam rem fuga, fugit nesciunt asperiores at facilis ut amet, quo! Laudantium consequatur quis, incidunt accusantium assumenda harum velit, saepe molestias omnis eveniet iste vel ea,
eaque. Magnam porro eligendi quasi aspernatur. Numquam quis, eius?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis voluptas, labore odio. Laboriosam fugit voluptate velit. Cupiditate fugit optio illum porro deserunt qui, eius corrupti,
quod quia rerum, molestiae nostrum asperiores voluptates fuga animi perferendis. Perspiciatis nulla exercitationem quis aliquam fugit minus unde architecto vero nostrum quos, repellendus delectus aperiam porro, voluptatum accusamus eius. Facilis dolores
culpa aliquid temporibus, inventore ad quisquam numquam, eum voluptas, harum consequuntur est deleniti! Sit odio repudiandae tempore tempora, ut eum nam rem error ipsum enim maxime fugit, laudantium quidem labore aliquam eligendi est magnam? Obcaecati
qui cupiditate cum quis soluta ut quod consequuntur, iste impedit, placeat cumque excepturi optio, eligendi vel. Cupiditate ut ducimus perferendis, delectus molestias doloremque laboriosam praesentium aut nostrum reprehenderit nihil ea quam quos eligendi
dignissimos cumque nulla! Quae, voluptas eius totam veniam nulla minus itaque cupiditate incidunt rem temporibus debitis suscipit iusto nemo molestiae dolorum magni excepturi minima officiis inventore repellat. Porro non cumque adipisci iusto, molestias
ipsum error. Perferendis labore est, ab similique, corporis eaque facilis aliquid dolore. Deleniti ut nesciunt optio distinctio vitae placeat ipsa officiis, temporibus nemo perspiciatis magnam. Quaerat voluptatibus minus dolore iure, perspiciatis
similique saepe sint at, nulla, minima voluptate commodi? Deleniti, quos mollitia fuga.</p>
</div>
Could someone help correct and explain to me why my JS code for toggling between showing more text and less text is not working? I want to have a user click on the "Show More" button to display more text, and allow them to click "Show Less" to go back to the original state.
HTML
<div class="content-section">
<h1>Our Team</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In sunt aut deleniti nihil quidem, maxime rem numquam ea quibusdam ut commodi hic fuga dolorum. Ab reprehenderit dolorem nemo error illo. Animi magni modi laudantium nisi eum cum sit minus. Repellat, esse nobis itaque ratione officia suscipit quo, saepe ipsam ab consequatur iusto commodi, quis praesentium aut consectetur sapiente officiis nesciunt quisquam velit magnam sequi nulla optio. Rem accusamus eum nam nobis officia? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem accusamus eum nam nobis officia?<a class="toggleButton" onclick="toggleText();" href="javascript:void(0);"> Show More </a>
<p class="show-text"></p>
</p>
</div>
JS
var status = "less"
function toggleText() {
var introText = "Animi magni modi laudantium nisi eum cum sit minus. Repellat, esse nobis itaque ratione officia suscipit quo, saepe ipsam ab consequatur iusto commodi, quis praesentium aut consectetur sapiente officiis nesciunt quisquam velit magnam sequi nulla optio. Rem accusamus eum nam nobis officia?";
if (status == "less") {
document.getElementsbyClassName("show-text").innerHTML = introText;
document.getElementsbyClassName("toggleButton").innerText = "Show Less"
status = "more";
} else if (status == "more") {
document.getElementsbyClassName("show-text").innerHTML = "";
document.getElementsbyClassName("toggleButton").innerText = "Show More";
status = "less";
}
}
There are two problems
Wrong getElementsbyClassName spelling, it should be getElementsByClassName
Access element from the given collection returned by getElementsByClassName using the indexer.
Live Demo
var status = "less";
function toggleText() {
var introText = "Animi magni modi laudantium nisi eum cum sit minus. Repellat, esse nobis itaque ratione officia suscipit quo, saepe ipsam ab consequatur iusto commodi, quis praesentium aut consectetur sapiente officiis nesciunt quisquam velit magnam sequi nulla optio. Rem accusamus eum nam nobis officia?";
if (status == "less") {
document.getElementsByClassName("show-text")[0].innerHTML = introText;
document.getElementsByClassName("toggleButton")[0].innerText = "Show Less";
status = "more";
} else if (status == "more") {
document.getElementsByClassName("show-text")[0].innerHTML = "";
document.getElementsByClassName("toggleButton")[0].innerText = "Show More";
status = "less";
}
}
use this this is working fine.
<script type="text/javascript">
var status = "less";
var introText = "Animi magni modi laudantium nisi eum cum sit minus. Repellat, esse nobis itaque ratione officia suscipit quo, saepe ipsam ab consequatur iusto commodi, quis praesentium aut consectetur sapiente officiis nesciunt quisquam velit magnam sequi nulla optio. Rem accusamus eum nam nobis officia?";
function toggleText()
{
if (status == "less") {
document.getElementsByClassName("show-text")[0].innerHTML = introText;
document.getElementsByClassName("toggleButton")[0].innerText = "Show Less"
status = "more";
}
else if (status == "more") {
document.getElementsByClassName("show-text")[0].innerHTML = "";
document.getElementsByClassName("toggleButton")[0].innerText = "Show More";
status = "less";
}
}
</script>