CODEWITHSUNDEEP
javascripthtmlcss
Pedro Corchero Murga
Pedro Corchero Murga

Reputation: 505

Get all children's with document.querySelector

I'm using Intersection Observer to make the content load when a insersection point is defined. I'm using it with a bootstrap 4 carousel, the intersection point is in the h1. The problem is that the script only catch the first h1, if the carousel goes to the second h1 when the user make the intersection on it, the slider don't appear, because the added class that show the content with an animation is applied only in the first div h1 parent content. So, I want to get all the h1, not only the first one. I tried to stop the carousel for intersection forever with the first h1, but i can't get to start it again when it displayed finally with the animation. You can see an example here, in the middle of the page.

// Instantiate a new Intersection Observer
let observer5 = new IntersectionObserver(onEntry5);
let test = document.querySelector('#carouselExampleControls3');


let element5 = document.querySelector(".test-h1");
observer5.observe(element5);

function onEntry5(entry5) {

  if (entry5[0].isIntersecting) {
    test.classList.add("active");

  }
}

HTML

<div id="carouselExampleControls3" class="carousel slide test-slider" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active carousel-item-left">
<div class="container">
    <div class="row">
        <div class="banner col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mx-auto">
            <img alt="Bootstrap Image Preview" src="img/_MG_6501-copia.jpg" class="img-thumbnail" style="padding-right: 200px;padding-bottom: 200px;border: 0px; ">
      <h1 class="test-h1" style="z-index: 1000000;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    color: #c33e69;
    font-size: 5em;
    position: absolute;
    right: 70px;
    bottom: 60px;
    width: 363px;">ESTA ES MI SEGUNDA CASA</h1>
        </div>
    </div>

</div>    </div>

<div class="carousel-item carousel-item-next carousel-item-left">
<div class="container">
    <div class="row">
        <div class="banner col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mx-auto">
            <img alt="Bootstrap Image Preview" src="https://www.eharmony.co.uk/dating-advice/wp-content/uploads/2011/04/profilephotos.jpg" class="img-thumbnail" style="padding-right: 200px;padding-bottom: 200px;border: 0px; ">
      <h1 class="test-h1" style="     z-index: 1000000;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    color: #c33e69;
    font-size: 5em;
    position: absolute;
    right: 70px;
    bottom: 60px;
    width: 363px;">ESTA ES MI SEGUNDA CASA</h1>
        </div>
    </div>

</div>    </div>

</div>
      </div>

CSS

#carouselExampleControls3 {opacity: 0; transition: 1.5s opacity;}
#carouselExampleControls3.active {opacity: 1;  cursor: pointer;
  animation: zoomin 1.5s alternate infinite;
  animation-iteration-count: 1;
  animation-fill-mode:  forwards;}

Upvotes: 1

Views: 728

Answers (1)

BugsArePeopleToo
BugsArePeopleToo

Reputation: 2996

Welcome to document.querySelectorAll()! Grab all elements that match the query then use a forEach loop to apply whatever functionality you want.

Resource: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

For your use case I would do something like this:

const carousels = document.querySelectorAll('.wrapper-carousel-thingy');

if (carousels) {
  carousels.forEach((carousel) => {
    const trigger = carousel.querySelector('.some-inner-trigger-element');
    trigger.addEventListener('mouseenter', () => {
      carousel.classList.add('active');
    });
    trigger.addEventListener('mouseleave', () => {
      carousel.classList.remove('active');
    });
  });
}
.wrapper-carousel-thingy {
  border: 2px solid black;
  padding: 20px;
}
.wrapper-carousel-thingy.active {
  border-color: red; /* border color change just an example of how you can update the parent element based on hover of interior element */
}
.some-inner-trigger-element:hover {
  background: yellow; /* just to emphasize which element is the trigger */
}
<div class="wrapper-carousel-thingy class-that-makes-me-unique"> <!-- as many of these as you want -->
  <div class="whatever-in-between">
    <h1 class="some-inner-trigger-element">I am the trigger</h1>
  </div>
</div>

Upvotes: 1

Related Questions