If a parent element contains a specific class, then this class should also be added

Question

If a parent element contains a specific class, then this class should also be added

Is there a way to dynamically add a class to an img element for animation purposes, based on the parent of 'image-reveal-check' having an active class?

To clarify: The parent class does not always have 'active', it is only added when the element comes into view.

HTML Code Snippet

<div class="active">
    <div class="image-reveal-check">
        <div class="image-reveal-inner">
            <img>
        </div>
    </div>
</div>

jQuery Code Snippet

if ($(".image-reveal-check").parent().hasClass('active')) {
    $(".image-reveal-inner img").addClass('image-reveal-start');
}

javascript jquery html css

Answer 1

Answer №1

To activate the event, simply include the active class within the div.

In this example, I have added the class through a button click, but in your scenario, you can trigger it when the element enters the viewport.

$("#addClassActive").click(function() { 

//Upon clicking the button, the active class is added to the div. In your case, this action should be performed when the element enters the viewport
    $('.image-reveal-check').parent().addClass('active').trigger('classChange');
});

$('div:eq(0)').on('classChange', function() { //Locating the root div, finding the image, and applying the specified class
     $(this).find("img").addClass("image-reveal-start")
});

.image-reveal-start
{
 border: solid 1px red;
 width: 50px;
 height: 50px;
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div class="image-reveal-check">
        <div class="image-reveal-inner">
            <img src="#" title="I am Image!" alt="I am Image!" />
            
            <button id="addClassActive">Add Class</button>
        </div>
    </div>
</div>

Answer 2

To activate the event, simply include the active class within the div.

In this example, I have added the class through a button click, but in your scenario, you can trigger it when the element enters the viewport.

$("#addClassActive").click(function() { 

//Upon clicking the button, the active class is added to the div. In your case, this action should be performed when the element enters the viewport
    $('.image-reveal-check').parent().addClass('active').trigger('classChange');
});

$('div:eq(0)').on('classChange', function() { //Locating the root div, finding the image, and applying the specified class
     $(this).find("img").addClass("image-reveal-start")
});

.image-reveal-start
{
 border: solid 1px red;
 width: 50px;
 height: 50px;
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div class="image-reveal-check">
        <div class="image-reveal-inner">
            <img src="#" title="I am Image!" alt="I am Image!" />
            
            <button id="addClassActive">Add Class</button>
        </div>
    </div>
</div>

Answer 3

Answer №2

Give this a try, it's functioning properly. You can view the results in the Code Snippet section.

$( document ).ready(function() {
console.log( "ready!" );
if ($(".image-reveal-inner").parent().hasClass('image-reveal-check')) {
$(".image-reveal-inner img").addClass('image-reveal-start-add');
console.log( "done!" );
}
});

<div class="active">
    <div class="image-reveal-check">
        <div class="image-reveal-inner">
        ASD
            <img alt="img title">
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

Answer 4

Give this a try, it's functioning properly. You can view the results in the Code Snippet section.

$( document ).ready(function() {
console.log( "ready!" );
if ($(".image-reveal-inner").parent().hasClass('image-reveal-check')) {
$(".image-reveal-inner img").addClass('image-reveal-start-add');
console.log( "done!" );
}
});

<div class="active">
    <div class="image-reveal-check">
        <div class="image-reveal-inner">
        ASD
            <img alt="img title">
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

Answer 5

Answer №3

To achieve the desired effect, you don't need to rely on JavaScript at all. Simply include a rule in your CSS code like this:

div.active .image-reveal-inner img { }

The following example demonstrates that only the first image with a parent containing the class active will have the specified animation, while the second image without the active class will not.

div.active .image-reveal-inner img {
  position: relative;
  -webkit-animation: floatBubble 2s normal ease-out;
  animation: floatBubble 2s normal ease-out;
}

@-webkit-keyframes floatBubble {
  0% {
    right: 300px;
  }
  100% {
    right: 0px;
  }
}

@keyframes floatBubble {
  0% {
    right: 300px;
  }
  100% {
    right: 0px;
  }
}

<div class="active">
  <div class="image-reveal-check">
    <div class="image-reveal-inner">
      <img alt="img title" src="https://i.sstatic.net/2lRQ9.png">
    </div>
  </div>
</div>

<div>
  <div class="image-reveal-check">
    <div class="image-reveal-inner">
      <img alt="img title" src="https://i.sstatic.net/2lRQ9.png">
    </div>
  </div>
</div>

Answer 6

To achieve the desired effect, you don't need to rely on JavaScript at all. Simply include a rule in your CSS code like this:

div.active .image-reveal-inner img { }

The following example demonstrates that only the first image with a parent containing the class active will have the specified animation, while the second image without the active class will not.

div.active .image-reveal-inner img {
  position: relative;
  -webkit-animation: floatBubble 2s normal ease-out;
  animation: floatBubble 2s normal ease-out;
}

@-webkit-keyframes floatBubble {
  0% {
    right: 300px;
  }
  100% {
    right: 0px;
  }
}

@keyframes floatBubble {
  0% {
    right: 300px;
  }
  100% {
    right: 0px;
  }
}

<div class="active">
  <div class="image-reveal-check">
    <div class="image-reveal-inner">
      <img alt="img title" src="https://i.sstatic.net/2lRQ9.png">
    </div>
  </div>
</div>

<div>
  <div class="image-reveal-check">
    <div class="image-reveal-inner">
      <img alt="img title" src="https://i.sstatic.net/2lRQ9.png">
    </div>
  </div>
</div>

If a parent element contains a specific class, then this class should also be added

Answer №1

Answer №2

Answer №3

Similar questions

javascript the unseen element becomes visible upon page loading

Retrieve a specified child object within its parent object using a string identifier

Tips for creating a responsive div that contains both an image and description, including automatically resizing the image to fit the

Can PHP offer a more streamlined method for displaying the chosen item from SQL in a dropdown menu?

jQuery: Display a modal window when a table is selected

How to bind clickable labels to a model using a radio button in .NET Core?

Error with REST service and browser history in ReactJS

Can the dimensions of an element be determined before adding it to the DOM using HTML, CSS, and JS?

Updating a URL for all users using React/Next.js and Firebase: a guide to refreshing the page

The process of retrieving request data from axios.get and storing it in the Redux store

obtaining the complete file path from fileupload in Java servlet via an HTML form

Retrieve the Span class value contained within a Select Option

Maintain selected values in a dropdown list that is generated dynamically

Ways to incorporate useEffect within a function or the other way around

Issue: TypeError - 'process.env' can only accept a configurable while installing windows-build-tools

Is it possible to align text to an image within an input text field?

The beforeCreate function is failing to execute when a new user is being created

Assigning properties to the constructor using `this.prop`

Changing the background color of the dropdown button in Vue Bootstrap: A step-by-step guide

The React Apexchart fails to correctly adjust its height based on its parent container when set to 100%