CODEWITHSUNDEEP
javascriptjquerycss
trying_to_learn
trying_to_learn

Reputation: 61

changing colors on scroll

Trying to add classes to the img and title(h3) to change the color. It's working to add class to .test-shadow but the h3 is not working. Tried changing siblings to .closest/.find but they don't work either. Ideas?

	          /* highlight border of winner */
        $('.img-winner').each( function(i){
            
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            
            /* If the object is completely visible in the window, animate border or box shadow */
            if( bottom_of_window > bottom_of_object ){
                
			$(this).siblings('.test-shadow:first').addClass('greenit');
			  $(this).siblings('h3.test-who-us:first').addClass('green');
                    
            }
            
        }); 
<ul class="2-column center test-images">
<li>
<h3 class="test-who-us">Medsite Medical</h3>
<div class="test-img">
<img class="img-winner" src="/wp-content/uploads/2016/07/test-desktop-us.png" alt="test-desktop">
<div class="test-shadow"></div>
</div>
</li>
<li>
<h3 class="test-who-them">Top competitor</h3>
<div class="test-img">
<img class="img-loser" src="/wp-content/uploads/2016/07/test-desktop-them.png" alt="test-desktop-competitors">
<div class="test-shadow"></div>
</div>
</li>
</ul>

Upvotes: 0

Views: 42

Answers (2)

andre mcgruder
andre mcgruder

Reputation: 1520

There is no need for the each loop. jQuery selectors already loop through your HTML grabbing all of the elements that apply. Also creating a monitor on the scroll event is not necessary. If the element/s with the img-winner class are already in the document but not on the page it is more efficient to go ahead and style it or add the class in the HTML. Changing things after render often cause reflow. Prevent Browser Reflow

However this is how you could achieve what you want based on your HTML code.

var $winnerElem = $('.img-winner'); // cache the winner element

// add classes
$winnerElem.addClass('greenit');
$winnerElem.parent().siblings().addClass('green');

Upvotes: 0

Iceman
Iceman

Reputation: 6145

The <h3 is a sibling of the parent of the .img-winner.

So replace $(this).siblings('h3.test-who-us:first') with $(this).parent().siblings('h3.test-who-us:first')

/* highlight border of winner */
$('.img-winner').each(function(i) {

  var bottom_of_object = $(this).offset().top + $(this).outerHeight();
  var bottom_of_window = $(window).scrollTop() + $(window).height();

  /* If the object is completely visible in the window, animate border or box shadow */
  if (bottom_of_window > bottom_of_object) {

    $(this).siblings('.test-shadow:first').addClass('greenit');
    $(this).parent().siblings('h3.test-who-us:first').addClass('green');

  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="2-column center test-images">
  <li>
    <h3 class="test-who-us">Medsite Medical</h3>
    <div class="test-img">
      <img class="img-winner" src="/wp-content/uploads/2016/07/test-desktop-us.png" alt="test-desktop">
      <div class="test-shadow"></div>
    </div>
  </li>
  <li>
    <h3 class="test-who-them">Top competitor</h3>
    <div class="test-img">
      <img class="img-loser" src="/wp-content/uploads/2016/07/test-desktop-them.png" alt="test-desktop-competitors">
      <div class="test-shadow"></div>
    </div>
  </li>
</ul>

Upvotes: 1

Related Questions