Click red bars to advance sldes:
var elem = document.querySelector(".hero-hero-md .slider-float-jumbotron-floating-, .hero-lg.jumbotron-float, .hero-md.jumbotron-float, .hero-sm.jumbotron-float");
var style = document.querySelector(".field--name-field-description").style;
var element = this.document.querySelector(".field--name-field-description");
var elements = document.querySelectorAll(".field--name-field-description");
if ((elem.clientHeight >= 432) && (document.querySelector('.hero-hero-md .slider-float-jumbotron-floating-'))) {
if ((typeof(elem) != 'undefined' && elem != null)) {
const options = {
root: null,
rootMargin: '0px',
threshold: .5,
/* required options*/
trackVisibility: true,
delay: 100 // minimum 100
};
const sliders = document.querySelectorAll('.slider-float-jumbotron-floating-');
const observer = new IntersectionObserver(entries => {
entries.forEach(function(entry,index) {
if((entry.isIntersecting) && (element.clientHeight < 432)) {
console.log('Intersecting',index);
entry.target.classList.toggle('align-items-end',false);
console.log('If client Height is' + " " + element.clientHeight + " " + 'add start');
} else {
console.log('Leave',index);
entry.target.classList.toggle('align-items-start',true);
console.log('Else client height is' + " " + element.clientHeight + " " + 'add end');
}
})
}, options);
sliders.forEach(slider => observer.observe(slider));
console.log(observer);
console.log(sliders);
}
} else if((elem.clientHeight >= 530) && (document.querySelector('.hero-lg.jumbotron-float'))) {
if((typeof(elem) != 'undefined' && elem != null)) {
//element.style.setProperty('--fade', 'linear-gradient(to bottom, black 70%, transparent 100%');
//element.style.setProperty('mask-image', 'none', 'important');
//var sliders = document.getElementsByClassName("slider-float-jumbotron-floating-");
for (var i = 0; i < sliders.length; i++) {
if (document.querySelector('.field--name-field-description').clientHeight > 530) {
sliders[i].classList.replace("align-items-end", "align-items-start");
}
}
}
} else if ((elem.clientHeight >= 432) && (document.querySelector('.hero-md.jumbotron-float'))) {
if ((typeof(elem) != 'undefined' && elem != null)) {
// element.style.setProperty('--fade', 'linear-gradient(to bottom, black 65%, transparent 100%');
// Loop over each class
//var sliders = document.getElementsByClassName("slider-float-jumbotron-floating-");
for (var i = 0; i < sliders.length; i++) {
if (document.querySelector('.field--name-field-description').clientHeight > 432) {
sliders[i].classList.replace("align-items-end", "align-items-start");
}
}
}
} else if ((elem.clientHeight >= 250) && (document.querySelector('.hero-sm.jumbotron-float'))) {
if ((typeof(elem) != 'undefined' && elem != null)) {
//element.style.setProperty('--fade', 'linear-gradient(to bottom, black 50%, transparent 100%');
//element.style.setProperty('mask-image', 'none', 'important');
//var sliders = document.getElementsByClassName("slider-float-jumbotron-floating-");
for (var i = 0; i < sliders.length; i++) {
if (document.querySelector('.field--name-field-description').clientHeight > 250) {
sliders[i].classList.replace("align-items-end", "align-items-start");
}
}
}
} else {
//element.style.setProperty('--fade', 'none');
}
'use strict';
var heroSlideshowTabs;
if (heroSlideshowTabs === undefined) {
heroSlideshowTabs = 0;
}
function getHeroSlideshowId() {
var ret = heroSlideshowTabs;
heroSlideshowTabs += 1;
return ret;
}
function initSlideshows() {
function getSlides(slideshow) {
return slideshow.querySelector('div.field--name-field-slides').children;
}
function slide(slideshow, data, increment) {
var slides = getSlides(slideshow);
var nextActive = ((data.active + increment) % slides.length + slides.length) % slides.length;
jump(slideshow, data, nextActive);
}
function jump(slideshow, data, destination) {
if (data.active === destination) {
return;
}
var slides = getSlides(slideshow);
slides[data.active].classList.remove('active');
slides[data.active].setAttribute('aria-expanded', 'false');
slides[data.active].setAttribute('aria-hidden', 'true');
slides[destination].classList.add('active');
slides[destination].setAttribute('aria-expanded', 'true');
slides[destination].removeAttribute('aria-hidden');
var dots = slideshow.querySelector('div.slideshow-dots').children;
dots[data.active].classList.remove('active');
dots[data.active].setAttribute('aria-selected', 'false');
dots[destination].classList.add('active');
dots[destination].setAttribute('aria-selected', 'true');
data.active = destination;
}
function createIcon(name) {
var icon = document.createElement('i');
icon.classList.add('fa');
icon.classList.add('fa-' + name);
icon.setAttribute('aria-hidden', 'true');
return icon;
}
var slideshows = document.querySelectorAll('div.paragraph--type--hero-slideshow');
slideshows.forEach((slideshow) => {
var data = {
active: 0
};
var slides = slideshow.querySelector('div.field--name-field-slides').children;
slides[0].classList.add('active');
slides[0].setAttribute('aria-expanded', 'true');
for (var k = 1; k < slides.length; k++) {
slides[k].setAttribute('aria-expanded', 'false');
slides[k].setAttribute('aria-hidden', 'true');
}
for (var k = 0; k < slides.length; k++) {
slides[k].setAttribute('role', 'tab');
slides[k].id = 'hero-slideshow-panel-' + getHeroSlideshowId();
slides[k].setAttribute('aria-labelledby', slides[k].id.replace('panel', 'tab'));
}
var controls = document.createElement('div');
controls.classList.add('slideshow-controls');
slideshow.appendChild(controls);
var buttonLeft = document.createElement('button');
buttonLeft.classList.add('slideshow-arrow');
buttonLeft.classList.add('slideshow-left');
buttonLeft.type = 'button';
buttonLeft.setAttribute('aria-label', 'Previous');
buttonLeft.appendChild(createIcon('chevron-left'));
buttonLeft.onclick = (e) => slide(slideshow, data, -1);
controls.appendChild(buttonLeft);
var buttonRight = document.createElement('button');
buttonRight.classList.add('slideshow-arrow');
buttonRight.classList.add('slideshow-right');
buttonRight.type = 'button';
buttonRight.setAttribute('aria-label', 'Next');
buttonRight.appendChild(createIcon('chevron-right'));
buttonRight.onclick = (e) => slide(slideshow, data, 1);
controls.appendChild(buttonRight);
var dots = document.createElement('div');
dots.classList.add('slideshow-dots');
dots.setAttribute('role', 'tablist');
controls.appendChild(dots);
for (let k = 0; k < slides.length; k++)
{
var dot = document.createElement('button');
dot.id = slides[k].getAttribute('aria-labelledby');
dot.classList.add('slideshow-dot');
dot.type = 'button';
dot.setAttribute('aria-label', 'Go to Slide ' + (k + 1));
dot.setAttribute('role', 'tab');
dot.setAttribute('aria-selected', 'false');
dot.setAttribute('aria-controls', slides[k].id);
dot.onclick = (e) => jump(slideshow, data, k);
dots.appendChild(dot);
}
dots.firstElementChild.classList.add('active');
dots.firstElementChild.setAttribute('aria-selected', 'true');
});
}
initSlideshows();/*------------------------------------*\ $HEROES \*------------------------------------*/
.hero {
overflow: hidden;
}
.hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero.jumbotron-float .jumbotron-wrap {
height: auto;
background-color: rgba(0, 0, 0, 0.5);
max-width: 50%;
}
@media (min-width: 576px) {
.hero.jumbotron-float .jumbotron-wrap {
background-color: transparent;
}
}
@media (max-width: 576px) {
.hero.jumbotron-float .jumbotron-wrap {
min-width: 100%;
min-height: 100%;
padding: 0;
margin: 0 !important;
padding-left: 10% !important;
padding-right: 10% !important;
}
}
.hero.jumbotron-float .jumbotron {
background-color: transparent;
max-height: 100%;
}
@media (min-width: 576px) {
.hero.jumbotron-float .jumbotron {
background-color: rgba(0, 0, 0, 0.5);
}
}
.hero.jumbotron-full-height .jumbotron-wrap {
background-color: rgba(0, 0, 0, 0.5);
}
.hero.jumbotron-full-height .jumbotron {
background-color: transparent;
}
.hero-sm.jumbotron-float img {
height: 250px;
}
.jumbotron-wrap {
max-width: 50%;
}
.jumbotron-wrap.jumbotron-full-height img {
height: 250px;
}
@media (min-width: 576px) {
.jumbotron-wrap.jumbotron-full-height .jumbotron-wrap {
height: 250px;
}
}
.hero-md.jumbotron-float img {
height: 432px;
}
.jumbotron-wrap {
max-width: 50%;
}
.jumbotron-wrap.jumbotron-full-height img {
height: 432px;
}
@media (min-width: 576px) {
.jumbotron-wrap.jumbotron-full-height .jumbotron-wrap {
height: 432px;
}
}
.hero-lg.jumbotron-float img {
height: 530px;
}
.jumbotron-wrap {
max-width: 50%;
}
.jumbotron-wrap.jumbotron-full-height img {
height: 530px;
}
@media (min-width: 576px) {
.jumbotron-wrap.jumbotron-full-height .jumbotron-wrap {
height: 530px;
}
}
.hero.jumbotron-full-height img {
height: 432px;
}
.hero-sm .slider-float-jumbotron-floating- .jumbotron img {
height: 250px;
}
.hero-sm .slider-float-jumbotron-floating- .jumbotron .jumbotron {
background-color: transparent;
max-height: 250px;
}
@media (min-width: 576px) {
.hero-sm .slider-float-jumbotron-floating- .jumbotron .jumbotron {
background-color: rgba(0, 0, 0, 0.5);
}
}
@media (min-width: 576px) {
.hero-sm .slider-full-height-jumbotron-full-height-.jumbotron img .float-left {
display: none !important;
}
}
@media (min-width: 576px) {
.hero-sm .slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap {
height: 432px;
padding: 4px !important;
max-width: 33%;
}
}
@media (max-width: 576px) {
.hero-sm .slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap {
padding: 0 32px 0 32px !important;
max-width: 100%;
}
}
.hero-sm .slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap .jumbotron {
background-color: transparent !important;
}
.hero-md .slider-float-jumbotron-floating- .jumbotron img {
height: 432px;
}
.hero-md .slider-float-jumbotron-floating- .jumbotron .jumbotron {
background-color: transparent;
max-height: 432px;
}
@media (min-width: 576px) {
.hero-md .slider-float-jumbotron-floating- .jumbotron .jumbotron {
background-color: rgba(0, 0, 0, 0.5);
}
}
@media (min-width: 576px) {
.hero-md .slider-full-height-jumbotron-full-height-.jumbotron img .float-left {
display: none !important;
}
}
@media (min-width: 576px) {
.hero-md .slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap {
height: 432px;
padding: 4px !important;
max-width: 33%;
}
}
@media (max-width: 576px) {
.hero-md .slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap {
padding: 0 32px 0 32px !important;
max-width: 100%;
}
}
.hero-md .slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap .jumbotron {
background-color: transparent !important;
}
.hero-lg .slider-float-jumbotron-floating- .jumbotron img {
height: 530px;
}
.hero-lg .slider-float-jumbotron-floating- .jumbotron .jumbotron {
background-color: transparent;
max-height: 530px;
}
@media (min-width: 576px) {
.hero-lg .slider-float-jumbotron-floating- .jumbotron .jumbotron {
background-color: rgba(0, 0, 0, 0.5);
}
}
@media (min-width: 576px) {
.hero-lg .slider-full-height-jumbotron-full-height-.jumbotron img .float-left {
display: none !important;
}
}
@media (min-width: 576px) {
.hero-lg .slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap {
height: 432px;
padding: 4px !important;
max-width: 33%;
}
}
@media (max-width: 576px) {
.hero-lg .slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap {
padding: 0 32px 0 32px !important;
max-width: 100%;
}
}
.hero-lg .slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap .jumbotron {
background-color: transparent !important;
}
@media (max-width: 576px) {
.slider-float-jumbotron-floating- .jumbotron-wrap {
min-width: 100%;
min-height: 100%;
padding: 0;
margin: 0 !important;
padding-left: 10% !important;
padding-right: 10% !important;
}
}
.paragraph--type--hero-slideshow img {
height: 432px;
object-fit: cover;
width: 100%;
}
.paragraph--type--hero-slideshow .jumbotron {
background-color: rgba(0, 0, 0, 0.5);
}
.slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap .jumbotron {
background-color: transparent;
}
@media (max-width: 576px) {
.slider-full-height-jumbotron-full-height-.jumbotron .jumbotron-wrap .jumbotron {
padding: 79px;
}
}
.slider-full-height-jumbotron-full-height- .jumbotron-wrap {
height: 432px;
}
@media (max-width: 576px) {
.slider-full-height-jumbotron-full-height- .jumbotron-wrap {
max-width: 100%;
}
}
@media (max-width: 576px) {
.slider-full-height-jumbotron-full-height-.jumbotron img.float-left {
display: none;
}
}
.slider-float-jumbotron-floating- .jumbotron-wrap .field.field--name-field-description {
--fade: none;
mask-image: var(--fade);
-webkit-mask-image: var(--fade);
-webkit-mask-size: 100% 100%;
}
/*-------------------------------------------*\ HERO SLIDER \*-------------------------------------------*/
div.view-hero div.views-row {
width: 100%;
}
slideshow div.paragraph--type--hero-slideshow {
position: relative;
}
div.slideshow-controls {
width: 100%;
height: 50%;
}
div.slideshow-controls button {
cursor: pointer;
}
div.slideshow-controls button.slideshow-arrow {
position: absolute;
top: 0;
width: 48px;
height: 100%;
border: none;
background-color: red;
}
div.slideshow-controls button.slideshow-arrow:active {
background-color: transparent;
color: lightgrey;
}
div.slideshow-controls button.slideshow-left {
left: 0;
color: #000;
}
div.slideshow-controls button.slideshow-arrow.slideshow-left:focus {
outline: none;
}
div.slideshow-controls button.slideshow-right {
right: 0;
color: #000;
}
div.slideshow-controls button.slideshow-arrow.slideshow-right:focus {
outline: none;
}
div.slideshow-controls div.slideshow-dots {
display: none;
}
div.paragraph--type--hero-slideshow > div.field--name-field-slides > div.field__item {
position: absolute;
left: -999em;
}
div.paragraph--type--hero-slideshow > div.field--name-field-slides > div.field__item.active {
position: relative;
left: 0;
}
div.HeroSlideshow-container {
position: relative;
}
/* Fading animation */
.HeroFades {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes HeroFades {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
@keyframes HeroFades {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
.HeroSlides {
text-align: center;
}
.HeroSlides img {
height: 400px;
width: 100%;
}
.HeroSlides .slider {
position: relative;
display: inline-block;
}
.HeroSlidePrev, .HeroSlideNext {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.HeroSlideNext {
right: 0;
border-radius: 3px 0 0 3px;
}
.HeroSlidePrev:hover, .HeroSlideNext:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.svg-inline--fa {
font-size: 1.7em;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="paragraph paragraph--type--hero-slideshow paragraph--view-mode--default hero-hero-md">
<div class="field field--name-field-slides field--type-entity-reference-revisions field--label-hidden field__items">
<div class="field__item active" aria-expanded="true" role="tab" id="hero-slideshow-panel-0" aria-labelledby="hero-slideshow-tab-0"><style>
.field--name-field-image-height.field--type-list-string.field--label-hidden.field__item {
display:none;
}
</style>
<div class="field__item">
<div class="slider-float-jumbotron-floating- paragraph--view-mode--default">
<div class="slider-float-jumbotron-floating- paragraph--view-mode--default justify-content-center align-items-end position-relative row d-flex">
<div class="col-12 px-0">
<img src="/sites/m1acsf.dd/files/2020-08/bigstock-Downtown-La-Skyline-Cityscape-109918208.jpg" alt="Downtown Los Angeles Skyline">
</div>
<div class="jumbotron-wrap px-4 m-5 position-absolute d-flex align-items-center">
<div class="jumbotron text-white m-0 p-4 rounded-0 position-relative">
<div class="clearfix text-formatted field field--name-field-description field--type-text-long field--label-hidden field__item"><p><span class="display-4">Welcome!</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi quis eleifend quam adipiscing. Tempor id eu nisl nunc mi ipsum faucibus. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Turpis nunc eget lorem dolor sed viverra. </p>
<p><a class="btn btn-default" href="#"><span class="text">A Button</span></a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
<div class="field__item" aria-expanded="false" role="tab" id="hero-slideshow-panel-1" aria-labelledby="hero-slideshow-tab-1" aria-hidden="true"><style>
.field--name-field-image-height.field--type-list-string.field--label-hidden.field__item {
display:none;
}
</style>
<div class="field__item">
<div class="slider-full-height-jumbotron-full-height- paragraph--view-mode--default jumbotron secondary-bg p-0 m-0">
<div class="row d-flex align-items-center">
<div class="col-sm-4 col-12 px-0">
<img class="float-left" src="/sites/m1acsf.dd/files/2020-08/photo-1480498073050-4c6abeee90c1.jpeg" alt="Sepia City of LA">
</div>
<div class="col-sm-8 jumbotron-wrap p-0 p-sm-4 d-flex align-items-center">
<div class="jumbotron text-white m-0 py-4 rounded-0">
<div class="clearfix text-formatted field field--name-field-description field--type-text-long field--label-hidden field__item"><p><span class="display-4"><span> </span>Welcome!</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi quis eleifend quam adipiscing. Tempor id eu nisl nunc mi ipsum faucibus. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Turpis nunc eget lorem dolor sed viverra. </p>
<p><a class="btn btn-default" href="#"><span class="text">A Button</span></a></p></div>
</div>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
<div class="field__item" aria-expanded="false" role="tab" id="hero-slideshow-panel-2" aria-labelledby="hero-slideshow-tab-2" aria-hidden="true"><style>
.field--name-field-image-height.field--type-list-string.field--label-hidden.field__item {
display:none;
}
</style>
<div>
<div class="col-12 px-0">
<img src="/sites/m1acsf.dd/files/2020-08/pier.jpg" alt="Picture of a Pier">
</div>
</div>
</div>
<div class="field__item" aria-expanded="false" role="tab" id="hero-slideshow-panel-3" aria-labelledby="hero-slideshow-tab-3" aria-hidden="true"><style>
.field--name-field-image-height.field--type-list-string.field--label-hidden.field__item {
display:none;
}
</style>
<div class="field__item">
<div class="slider-float-jumbotron-floating- paragraph--view-mode--default">
<div class="slider-float-jumbotron-floating- paragraph--view-mode--default justify-content-start align-items-end position-relative row d-flex">
<div class="col-12 px-0">
<img src="/sites/m1acsf.dd/files/2020-08/Los-Angeles-Wallpaper-1.jpg" alt="la">
</div>
<div class="jumbotron-wrap px-4 m-5 position-absolute d-flex align-items-center">
<div class="jumbotron text-white m-0 p-4 rounded-0 position-relative">
<div class="clearfix text-formatted field field--name-field-description field--type-text-long field--label-hidden field__item"><p><span class="display-4"> Welcome!</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisi quis eleifend quam adipiscing. Tempor id eu nisl nunc mi ipsum faucibus. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Turpis nunc eget lorem dolor sed viverra. </p>
<p><a class="btn btn-default" href="#"><span class="text">A Button</span></a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
</div>
<div class="slideshow-controls"><button class="slideshow-arrow slideshow-left" type="button" aria-label="Previous"><i class="fa fa-chevron-left" aria-hidden="true"></i></button><button class="slideshow-arrow slideshow-right" type="button" aria-label="Next"><i class="fa fa-chevron-right" aria-hidden="true"></i></button><div class="slideshow-dots" role="tablist"><button id="hero-slideshow-tab-0" class="slideshow-dot active" type="button" aria-label="Go to Slide 1" role="tab" aria-selected="true" aria-controls="hero-slideshow-panel-0"></button><button id="hero-slideshow-tab-1" class="slideshow-dot" type="button" aria-label="Go to Slide 2" role="tab" aria-selected="false" aria-controls="hero-slideshow-panel-1"></button><button id="hero-slideshow-tab-2" class="slideshow-dot" type="button" aria-label="Go to Slide 3" role="tab" aria-selected="false" aria-controls="hero-slideshow-panel-2"></button><button id="hero-slideshow-tab-3" class="slideshow-dot" type="button" aria-label="Go to Slide 4" role="tab" aria-selected="false" aria-controls="hero-slideshow-panel-3"></button></div></div></div>
</body>
</html>I am trying to use clientHeight with Intersection Observer, when the clientHeight of the div changes replace classes based on div is a greater than or equal to X. I got everything working and it can read the height of the div on first page load but after that I get a constant height that is not the height of the div I am targeting and the classes do not get applied. I tried using this and querySelectorAll but nothing works. Is this even possible? Can someone tell me what I am doing wrong?
var elem = document.querySelector(".hero-hero-md .slider-float-jumbotron-floating-, .hero-lg.jumbotron-float, .hero-md.jumbotron-float, .hero-sm.jumbotron-float");
var style = document.querySelector(".field--name-field-description").style;
var element = document.querySelector(".field--name-field-description");
var elements = this.document.querySelectorAll(".field--name-field-description");
if ((elem.clientHeight >= 432) && (document.querySelector('.hero-hero-md .slider-float-jumbotron-floating-'))) {
if ((typeof(elem) != 'undefined' && elem != null)) {
const options = {
root: null,
rootMargin: '0px',
threshold: .5,
/* required options*/
trackVisibility: true,
delay: 100 // minimum 100
};
const observer = new IntersectionObserver(entries => {
entries.forEach(function(entry,index) {
if((entry.isIntersecting) && (document.querySelector(".jumbotron-wrap").clientHeight < 432)) {
console.log('Intersecting',index);
sliders.forEach(slider => slider.classList.toggle('align-items-end','align-items-start'));
console.log('If client Height is' + " " + document.querySelector(".jumbotron-wrap").clientHeight + " " + 'add start');
} else if (document.querySelector(".jumbotron-wrap").clientHeight >= 432){
console.log('Leave',index);
sliders.forEach(slider => slider.classList.toggle('align-items-start','align-items-end'));
console.log('Else client height is' + " " + document.querySelectorAll(".jumbotron-wrap").clientHeight + " " + 'add end');
}
})
}, options);
const sliders = document.querySelectorAll('.slider-float-jumbotron-floating-');
sliders.forEach(slider => observer.observe(slider));
console.log(observer);
console.log(sliders);
}
output (230 is the only correct height the rest are 206 and are not correct)
