.slide is mentioned if all slide are empty


#1


What if we just mention active-slide in if function, it still works, why it is mentioned as Slide

if(nextSlide.length == 0)
{
nextSlide= $('.active-slide').first();
}


Replace this line with your code.


#2

Hello @niceash91,

I don't seem to understand your question. What is mentioned as slide?


#3

In the above code instead of active-slide if we are writing just SLIDE what difference would it make


#4

If we just write ".slide" we are talking about a class that stores all slides, while ".active-slide" refers to the slide that is activated...


#5

One more bartho

var main = function(){
};
$('.dropdown-toggle').click(function(){
$('.dropdown-menu').toggle();
});
$('.arrow-next').click(function(){
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();

 var currentDot = $('.active-dot');
 var nextDot = currentDot.next();
if(nextSlide.length == 0)
{
    nextSlide= $('.active-slide').first();
}
currentSlide.fadeOut(600).removeClass('.active-slice');
nextSlide.fadeIn(600).addClass('.active-slice');


 currentDot.removeClass('.active-dot');
 nextDot.addclass('.active-dot');
 if(nextDot.length == 0){
     nextDot= $('.nextDot').first()
 }
 $('.arrow-prev').click(function(){
     var currentSlide = $('.active-slide');
     var prevSlide = currentSlide.prev();

     if( prevSlide.length == 0){
         prevSlide = $('.active-slide').last();
     }

currentSlide.fadeOut().removeClass('.active-slide'); prevSlide.fadeIn().addClass('.active-slide');
});
});

$(document).ready(main);

please tell where I am wrong
as I am getting
Oops, try again. Remember to fade out the current slide and remove the 'active-slide' class.

as the message


#6

@niceash91under the body of your if statement that checks whether the nextSlide is empty, you have made a typo. Instead of adding and removing ".active-slide" you have instead added and removed ".active-slice". Fix this and you will be good to go! Keep coding hard :smile:!


#7

Bartho

var main = function(){
};
$('.dropdown-toggle').click(function(){
$('.dropdown-menu').toggle();
});
$('.arrow-next').click(function(){
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();

 var currentDot = $('.active-dot');
 var nextDot = currentDot.next();
if(nextSlide.length == 0)
{
    nextSlide= $('.active-slide').first();
}
currentSlide.fadeOut(600).removeClass('.active-slide');
nextSlide.fadeIn(600).addClass('.active-slide');


 currentDot.removeClass('.active-dot');
 nextDot.addclass('.active-dot');
 if(nextDot.length == 0){
     nextDot= $('.nextDot').first()
 }
 $('.arrow-prev').click(function(){
     var currentSlide = $('.active-slide');
     var prevSlide = currentSlide.prev();

     if( prevSlide.length == 0){
         prevSlide = $('.active-slide').last();
     }

currentSlide.fadeOut(600).removeClass('.active-slide'); prevSlide.fadeIn(600).addClass('.active-slide');

});

$(document).ready(main);

still not working


#8

@niceash91
From
https://api.jquery.com/first/
and
https://www.codecademy.com/forum_questions/5615308ab62548021c0000e4
where you could read

The DOM for 39-div

                        39 div
                          | (.slider)
        + - - - - - -+ - -+ - - -+ - - - - - -+
        |            |           |            |
      41-div       62-div      74-div       91-div
        |(.slide)   (.slide)    (.slide)    (.slide)
        |(.active-slide)
     42-div (.container)
     43-div (.row)
       |
  +- - + - - - - - - - - +
  |                      |
44-div (.slide-copy)   55-div (.slide-img)

From the DOM structure you can see

  • that there is only 1 div carrying the class-attribute "active-slide" at a time.....
  • that if you choose the jQuery-Selector
    $(".active-slide")
    you will get a jQuery Selection-Object containing 1 div and all its children
    and using the jQuery next() method would Always return a
    $('.active-slide').next().length === 0 as being true

#9

Where is the error
here
leo


#10

var main = function(){
};
$('.dropdown-toggle').click(function(){
$('.dropdown-menu').toggle();
});
$('.arrow-next').click(function(){
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();

 var currentDot = $('.active-dot');
 var nextDot = currentDot.next();
if(nextSlide.length == 0)
{
    nextSlide= $('.slide').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');


 currentDot.removeClass('.active-dot');
 nextDot.addclass('.active-dot');
 if(nextDot.length == 0){
     nextDot= $('.nextDot').first()
 });

 $('.arrow-prev').click(function(){
     var currentSlide = $('.active-slide');
     var prevSlide = currentSlide.prev();

     if(prevSlide.length == 0){
         prevSlide= $('.slide').last();
     }

currentSlide.fadeOut(600).removeClass('active-slide'); prevSlide.fadeIn(600).addClass('active-slide');
});

$(document).ready(main);

it still isnt working, i understood the concept, but still not helping


#11

var main = function(){
};
$('.dropdown-toggle').click(function(){
$('.dropdown-menu').toggle();
});
$('.arrow-next').click(function(){
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();

 var currentDot = $('.active-dot');
 var nextDot = currentDot.next();
if(nextSlide.length == 0)
{
    nextSlide= $('.slide').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');


 currentDot.removeClass('.active-dot');
 nextDot.addclass('.active-dot');
 if(nextDot.length == 0){
     nextDot= $('.nextDot').first()
 });

 $('.arrow-prev').click(function(){
     var currentSlide = $('.active-slide');
     var prevSlide = currentSlide.prev();

     if(prevSlide.length == 0){
         prevSlide= $('.slide').last();
     }

currentSlide.fadeOut(600).removeClass('active-slide'); prevSlide.fadeIn(600).addClass('active-slide');
});

$(document).ready(main);
it still not working
please help me i am stuck at this level


#12

@niceash91,

+++++ flipboard the next && prev steps
You will have to keep a strict order in your code.....

s t e p s - - f o r - - n e x t S l i d e
-1
-1a create a selection of nextSlide (2 steps, capture 'active-slide, capture next() slide )'
-1b create a selection of nextDot
-2 check if selection of nextSlide is EMPTY
-2a if EMPTY change nextSlide selection to first slide
-2b and change nextDot selection to first Dot
-3 swap -active-slide- and -active-dot- class from current to next
Step3 is done by

   currentSlide.fadeOut(600).removeClass('active-slide');
   nextSlide.fadeIn(600).addClass('active-slide');
   currentDot.removeClass('active-dot');
   nextDot.addClass('active-dot');

s t e p s - - f o r - - p r e v S l i d e
-1
-1a create a selection of prevSlide
-1b create a selection of prevDot
-2 check if selection of prevSlide is EMPTY
-2a if EMPTY change prevSlide selection to last slide
-2b and change prevDot selection to last Dot
-3 swap -active-slide- and -active-dot- class from current to prev
Step3 is done by

    currentSlide.fadeOut(600).removeClass('active-slide');
    prevSlide.fadeIn(600).addClass('active-slide');
    currentDot.removeClass('active-dot');
    prevDot.addClass('active-dot');

#13

var main = function(){
};
$('.dropdown-toggle').click(function(){
$('.dropdown-menu').toggle();
});
$('.arrow-next').click(function(){
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();

 var currentDot = $('.active-dot');
 var nextDot = currentDot.next();
if(nextSlide.length == 0)
{
    nextSlide= $('.slide').first();
}
if(nextDot.length == 0){
     nextDot= $('.nextDot').first()
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('.active-dot');
 nextDot.addclass('.active-dot');





 });

 $('.arrow-prev').click(function(){
     var currentSlide = $('.active-slide');
     var prevSlide = currentSlide.prev();

     if(prevSlide.length == 0){
         prevSlide= $('.slide').last();
     }

currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide,fadeIn(600).addClass('active-slide');
});

$(document).ready(main);

still not working


#14

@niceash91

+++++ flipboard click Eventhandler structure
Within the =main= function

var main = function() {
     //Begin of =main= FUNCTION-BODY
       //your code
     //End of =main= FUNCTION-BODY
};
$(document).ready( main );

you are placing =click= Eventhandlers,
which are attached to specific HTML-Elements by using
a jQuery-Selector.like $('.arrow-prev')

var main = function() {
     //Begin of =main= FUNCTION-BODY
        $('.arrow-prev').click();
     //End of =main= FUNCTION-BODY
};
$(document).ready( main );

Now as a so-called argument of the =click= Eventhandler
you are placing a so-called anonymous function

var main = function() {
     //Begin of =main= FUNCTION-BODY
        $('.arrow-prev').click( function() {
             //code which gets executed when =click=ed
        });
     //End of =main= FUNCTION-BODY
};
$(document).ready( main );

#15

Sir I have followed the same please let me know my pinpointing my error in the code
var main = function(){

$('.dropdown-toggle').click(function(){
$('.dropdown-menu').toggle();
});
$('.arrow-next').click(function(){
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();

 var currentDot = $('.active-dot');
 var nextDot = currentDot.next();
if(nextSlide.length == 0)
{
    nextSlide= $('.slide').first();
}
if(nextDot.length == 0){
     nextDot= $('.nextDot').first()
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('.active-dot');
 nextDot.addclass('.active-dot');

 });

 $('.arrow-prev').click(function(){
     var currentSlide = $('.active-slide');
     var prevSlide = currentSlide.prev();

     if(prevSlide.length == 0){
         prevSlide= $('.slide').last();
     }

currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide,fadeIn(600).addClass('active-slide');
});
};

$(document).ready(main);