Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Dave Six
Dave Six
8,366 Points
Posted by Dave Six
Dave Six
8,366 Points

jQuery addClass only on reload

I'm trying to add a class to an element as soon as one li of my navigation element gets the class "active" (by scrolling). So far the script is working but only if the li element in the navigation already has the class "active" and I am refreshing. The class is not applying to the element while scrolling.

My code looks like this

if(jQuery(".nav li.ziele").hasClass("active")) {
        jQuery("#index ul li.ziele").addClass("active");
}

Hope you guys can help me out!

Dave

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Is there more to your script? What's giving your .nav li its active class?

Dave Six
Dave Six
8,366 Points
Dave Six
Dave Six
8,366 Points

I am using bootstrap for giving the classes.

4 Answers

Michael Collins
Michael Collins
433 Points
Michael Collins
Michael Collins
433 Points

I think I got what you are trying to do. Let me paraphrase ...

You need to Listen for when an element has a class added to it so that you can trigger the adding of a class to another element. Is that right?

When you "hear" that a class has been added to a particular element, you need to immediately add a class to a different element.

Checking that something has a class isn't going to get you an immediate response. That code will just run once. top to bottom when the page and script loads.

  1. Page and Script Loads
  2. You scroll down and the "active" class gets added to a certain element
  3. Page Loaded. Script Ran. User Scrolled. Class got added to element. There's nothing to cause that code to run again to check again to see if that class has been added.

So, the question is How to constantly check for whether that element had a class added to it? I see 2 distinct approaches

1) Listen for the changing of the DOM--which is the example I showed you above.

#mutable is the ID of the element to which you are listening ..... constantly listening to see if a class gets added to it.

#changeClass is just a demo button that allows you to add a class and see that the concept works. In your instance, You wouldn't click on that button, instead the class would be added by someone scrolling down the page until the "active" class gets added to the element.

A closer approximation of what I think you are looking for would be as follows. This would listen constantly and then you could add your class to the other element the moment the scroll action adds "active" to the triggering class.

$(document).ready(function() {
  $('.nav li.ziele').bind('DOMSubtreeModified', function(e) {
      alert('a class has been added to an element');
     // You could check here to see WHICH class has been added to this element.
     // Put code here for adding class to other element
    $("#index ul li.ziele").addClass("active");
  });
});

Another approach would be to keep your code as it is but to wrap it in Window onScroll function. The window onScroll function is also a constant listener whenever the window is scrolling

$(document).ready(function() {
  $(window).on('scroll resize', function(e) {
    if($(".nav li.ziele").hasClass("active")) {
        $("#index ul li.ziele").addClass("active");
    }
  });
});
Michael Collins
Michael Collins
433 Points
Michael Collins
Michael Collins
433 Points

DOMSubtreeModified: Here's the HTML

<html>
<head>

  <title>Listening for a Change</title>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="js/app2.js" type="text/javascript" charset="utf-8"></script>

<style>

#changeClass {
  width: 150px;
  height: 150px;
  background-color: #0F0;
   border-style: solid;
  border-color: #000;
  border-width: 1px;
}

#mutable {
  width: 150px;
  height: 150px;
  border-style: solid;
  border-color: #000;
  border-width: 1px;
}

.red {
  background-color: #F00;
}

</style>

</head>
<body>


<div id="changeClass">This is the Element that causes a class change</div>

<div id="mutable">Mutable: this is the element that gets changed </div>

</body>
</html>

Here's the JavaScript

$(document).ready(function() {
  $('#changeClass').click(function() {
    $('#mutable').addClass("red");
  });

  $('#mutable').bind('DOMSubtreeModified', function(e) {
      alert('a class has been added to an element');
  });
});
Dave Six
Dave Six
8,366 Points
Dave Six
Dave Six
8,366 Points

Hey Michael,

sorry, I guess I didn't describe my problem very well. My function is actually working. It's not a click function, it is a function which adds a class to the navigation element in which you are navigating / scrolling to a certain area since it is a one pager. So for example if your code looks like 

HTML

<ul id="navigation">
<li>Home</li>
<li>What we are doing</li>
<li>About Us</li>
</ul>

and you're scrolling down to "What we are doing" then this list item gets the Class "active" - at the same time (and this is what I am actually trying to achieve) another side element with the similar HTML should be added an "active"-class. Instead, nothing happens but only when I reload the page it'll be added. I've tried to wrap the whole function into a ready statement already but it didn't help.

Dave

Dave Six
Dave Six
8,366 Points
Dave Six
Dave Six
8,366 Points

Hey Michael,

Thanks a lot for your great reply! This really helped me out understanding how this is supposed to work!

Dave