4. Next Slide: Want to make sure I understand the logic behind the code. Error message: Add code for $('.arrow-next').click();


#1

Currently on click,slide will fade in/out once but then no more and code does not pass. Error message: Add code for $('.arrow-next').click(); Just want to run through the code line by line to make sure I'm understanding it correctly!

Here is all code:

 var main = function() {
    $(".dropdown-toggle").click(function() {
        $(".dropdown-menu").toggle();
    });
    
    $(".arrow-next").click(function() {
      var currentSlide = $(".active-slide");
      var nextSlide = currentSlide.next();
        
      currentSlide.fadeOut(600).removeClass(".active-slide");
      nextSlide.fadeIn(600).addClass(".active-slide");
     });
}


$(document).ready(main);

So first line:
var main = function()_ {

Is setting up a variable called main and saying everything between the brackets ie other variables, functions etc is what you want this variable to contain. This is then run after the page has loaded with the last line:

$(document).ready(main);

Essentially, the entire program is stored in a function inside a var we are calling main and run when everything is ready.

Next line:
$(".dropdown-toggle").click(function() {

Here we select the CSS class .dropdown-toggle then on a mouse .click on that class perform the following function...

$(".dropdown-menu").toggle();

The function here selects CSS class .dropdown-menu and performs a .toggle on it. The .toggle is a piece of jQuery script that hides/shows the selected .dropdown-menu CSS class. This in turn will .toggle any HTML element the CSS class is attached to. After this, close brackets as this section is complete and clicking on the dropdown menu has the desired result.

Next section:

$(".arrow-next").click(function() {

Here we are selecting CSS element .arrow-next, then on mouse .click perform a function that is described between the next brackets.

var currentSlide = $(".active-slide");
var nextSlide = currentSlide.next();

Here we first setup a var called currentSlide (notice the capital) and we give this varible the value of the CSS class .active-slide. We setup a second var called nextSlide whos value is the previous variable currentSlide with the addition of jQuery .next. This essentially goes to the next available sibling in the current set of HTML elements. I think!

Next lines are what to do with these new variables we've setup:

currentSlide.fadeOut(600).removeClass(".active-slide");`

Firstly we take the variable currentSlide (which contains CSS class .active-slide) then jQuery .fadeOut over 600 milliseconds. Then use jQuery removeClass to remove .active-slide from the set of elements we are currently in. That way we know whatever slide we were on is done and no longer has the class of .active-slide as it is no longer active.

On to the next line:

nextSlide.fadeIn(600).addClass(".active-slide");

Here we take the variable nextSlide which is actually the variable currentSlide with jQuery .next applied to it. We then jQuery fadeIn over 600 milliseconds while adding the CSS class .active-slide.

So now we know nextSlide variable has faded in and has been given the class .active-slide. Now when we select the variable currentSlide it will select the CSS class active-slide, which is now whatever slide we have now moved to. Basically we are removing and adding the CSS class active-slide depending whether we are on the current or next slide.

How far off am I here? Tried to get the correct terminology and think I understand what I'm seeing but please point me in the right direction where I'mgoing off track! As the title says I'm getting an error message but can't quite see what I'm missing!

Many thanks!


#2

Yes you are on track, but in the addClass and removeClass you are making a mistake. The dot before the name is to identify wether it is a class or an element. You are basically telling jquery that it is a class twice. Already at addClass jquery knew that it was a class that it should be loking for a class so by typing .active-slide, jquery is loking for a class named .active-slide and not a class named active-slide as you want it to.


#3

Oh I see!

So addClass("active-slide") adds the class active-slide.

But I was asking for addClass(".active-slide") so jQuery looked for a class called .active-slide, which doesn't exist!

Code now works but does not pass. Still getting error message: Add code for $('.arrow-next').click();

 var main = function() {
    $(".dropdown-toggle").click(function() {
        $(".dropdown-menu").toggle();
    });
    
    $(".arrow-next").click(function() {
      var currentSlide = $(".active-slide");
      var nextSlide = currentSlide.next();
        
      currentSlide.fadeOut(600).removeClass("active-slide");
      nextSlide.fadeIn(600).addClass("active-slide");
     });
}


$(document).ready(main);

#4

Even though it does not matter in reality, the verificator or what it is called get really annoyed when you write " instead of '.


#5

Awesome, thanks for your help! That's sorted it! :slightly_smiling:


#6

I only knew because I had the same problems, both of them, haha.