This forum is now read-only. Please use our new forums at discuss.codecademy.com.

144 points
59cb36bcd3167e3f1dafec29142627bf?s=140&d=retro
Submitted by
mrRyuk
about 4 years ago

Changing the slide to auto?

Hello everyone, i just completed this course and i was wondering, if i wanted the slide to go automatically without clicking on the arrow, how can i do that? cheers!

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();
        nextDot = $('.dot').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();
    var currentDot = $('.active-dot');
    var prevDot = currentDot.prev();    

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

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

  });
};
$(document).ready(main);

3 votes

permalink

Since we already have a function to advance the carousel, (the arrow-next click event handler) all we need is a timed event to trigger that event at intervals.

var int = self.setInterval(function(){
    $('.arrow-next').trigger('click');
},5000);

That should start the carousel, in theory. But now we need a way to stop it. It cannot under the current circumstances be part of the click event handler because the timer is triggering it so we need another event, such as a click on the '.active-slide', for instance.

$('.active-slide').click(function(){
    window.clearInterval(int);
    return false;
});

Again, in theory. I can sense that this won't work. Rather than wait until I have a working solution, I'll post this so we can all dig in to it. Keep us posted!

8787 points
5958b8ebe12813a2a3000034_980106998
Submitted by
Roy
about 4 years ago

2 Comments

5958b8ebe12813a2a3000034_980106998 Roy about 4 years ago

I just dropped this code into the function and saw it go to work. And the click on the slide stopped the timer. We're on the right track. Now to figure how to restart the timer.

5958b8ebe12813a2a3000034_980106998 Roy about 4 years ago

Buggy. Going to try clicking on '.dot' indiscriminately, see if that offers a better solution.


2 votes

permalink

This selector rule was added to the style sheet to make things more transparent:

.dot {
    cursor: pointer;
}

Now we get a hand that suggests we can click this and get some form of response. Because of the five second delay it's not immediately obvious, but we do get something when we click. No more carousel, or more carousel. We just have to wait the five seconds to see it happen. More than five seconds with nothing happening means, it's stopped.

8787 points
5958b8ebe12813a2a3000034_980106998
Submitted by
Roy
about 4 years ago

8 Comments

5958b8ebe12813a2a3000034_980106998 Roy about 4 years ago

This has been fun. So glad this question came up! Thank you, @ mrRyuk.

59cb36bcd3167e3f1dafec29142627bf?s=140&d=retro mrRyuk about 4 years ago

LOL, thank YOU, how much time you've been coding?

5958b8ebe12813a2a3000034_980106998 Roy about 4 years ago

On this post, about two hours. In JS, about forever, but I forget as fast as I learn so trip over the same rock repeatedly. I never give up, that's the key.

5958b8ebe12813a2a3000034_980106998 Roy about 4 years ago

Actually I started applying JS to my HTML pages about 8 years ago. I learned what I needed to learn to solve each problem, very seat of the pants. It was only when I finally took up learning the language as a whole (here at CC) that I was able to find all the things I was doing wrong. Still, I'm no expert, just a die hard hobbyist, which gives me the time to help out around here.

54b1479b9113cb2e89003b1e_580704040 Wolf72x about 4 years ago

Hey Roy, do You have portfolio site or blog? :D

5958b8ebe12813a2a3000034_980106998 Roy about 4 years ago

Nothing that's a going concern and my production sites that are going concerns I don't promote... Their owners do, so no links from me. Sorry.

5674c6dae39efec455000434_879409444 Zeke Y about 4 years ago

@Roy

I'm no expert, just a die hard hobbyist

I always thought you were a full time professional programmer of some sort!


2 votes

permalink

This is my exercise 12 submission, which exceeds the lesson requirements, but spells out what we are working toward:

var int;
function rotate(){
    function next(){
        $('.arrow-next').trigger('click');
    }
    int = self.setInterval(next,5000);
}
function freeze(){
    window.clearInterval(int);
    return false;
}
function arrowNext() {
    var currentSlide = $('.active-slide');
    var nextSlide, nextDot;
    var currentDot = $('.active-dot');
    if ($('.slide').last().hasClass('active-slide')){
        nextSlide = $('.slide').first(); 
        nextDot = $('.dot').first();
    } else { 
        nextSlide = currentSlide.next();
        nextDot = currentDot.next();
    }
    currentSlide.slideUp(600).removeClass('active-slide');
    nextSlide.slideDown(600).addClass('active-slide');
    currentDot.removeClass('active-dot');
    nextDot.addClass('active-dot');
}
function arrowPrev() {
    var currentSlide = $('.active-slide');
    var prevSlide, prevDot;
    var currentDot = $('.active-dot');
    if ($('.slide').first().hasClass('active-slide')){
        prevSlide = $('.slide').last();
        prevDot = $('.dot').last();
    } else { 
        prevSlide = currentSlide.prev();
        prevDot = currentDot.prev();
    }
    currentSlide.slideUp(600).removeClass('active-slide');
    prevSlide.slideDown(600).addClass('active-slide');
    currentDot.removeClass('active-dot');
    prevDot.addClass('active-dot');
}
function dropDown(){
    var currMen = $(this).siblings('.dropdown-menu');
    $('.dropdown-menu').not(currMen).hide();
    currMen.toggle();
}
var main = function(){
  $(document)
    .on('click','.dropdown-toggle',dropDown)
    .on('click','.arrow-next',arrowNext)
    .on('click','.arrow-prev',arrowPrev);
  $('.slider-dots')
    .on('click','.dot',freeze)
    .on('click','.active-dot',rotate);
  rotate();
};
$(document).ready(main);

8787 points
5958b8ebe12813a2a3000034_980106998
Submitted by
Roy
about 4 years ago

3 Comments

55d6c265937676eae7000628_259096068?awsaccesskeyid=akiajkz7qvqfd72xnj3q&expires=1550967548&signature=qir%2ffy2nhcho6mrgkggbn5ituyu%3d Boris Atanasov over 3 years ago

and if the user would be happy to stop all these activity what will be the code? Just curious. And this is very interesting about your experience in the past.

5958b8ebe12813a2a3000034_980106998 Roy over 3 years ago

Not sure I understand the question. 'stop all these activity'. clicking on a dot freezes the current pane.

55d6c265937676eae7000628_259096068?awsaccesskeyid=akiajkz7qvqfd72xnj3q&expires=1550967548&signature=qir%2ffy2nhcho6mrgkggbn5ituyu%3d Boris Atanasov over 3 years ago

I meant to ask how the user can stop the auto-movement of the slides. Sorry for my bad english. I think you guessed right.


1 vote

permalink

So far this seems like a nice working solution. The code below is from the bottom of the existing code inside the main function. The closing RBRACE for main() is indicated.

  $('.slider-dots')
    .on('click','.dot',freeze)
    .on('click','.active-dot',rotate);
  rotate();
} // end of main()
var int;
function rotate(){
    function next(){
        $('.arrow-next').trigger('click');
    }
    int = self.setInterval(next,5000);
}
function freeze(){
    window.clearInterval(int);
    return false;
}
$(document).ready(main);

The carousel is triggered when main() has been read in and all the event listeners are registered. Note the rotate() at the last line of the function.

The two functions we use for this are both in window scope, outside of the function. The .on() listeners for '.slider-dots' delegate two ways. Click a grayed out dot and it stops the carousel. Click on the dark (active) dot and the carousel resumes.

It turned out to be something not that difficult, at all. Always love when a plan comes together.

8787 points
5958b8ebe12813a2a3000034_980106998
Submitted by
Roy
about 4 years ago

1 Comment

5958b8ebe12813a2a3000034_980106998 Roy over 3 years ago

$(main); kicks it off nicely.


1 vote

permalink

Help me, please, to understand! Why $('.active-slide') is written with ".", but ...removeClass('active-slide'); - without "."

Thanks!)

144 points
553a992c95e3787d0b0002e9_194145808
Submitted by
Andrey Veselov
almost 4 years ago

1 Comment

5958b8ebe12813a2a3000034_980106998 Roy almost 4 years ago

removeClass() is a method specifically targeting class attributes. The argument for the method is simply the string value of the attribute in the DOM. 'active-slide' is not a selector, but a class name. '.active-slide' is a selector that denotes a class name.