Interactive Website: 7. Next dot 2


#1

Hi there. I can't seem to find the problem with my code.
My error is oops, try again. When on the last slide, it looks like next arrow isn't wrapping back to the first dot. Look back at the instructions and check the code inside the if statement.

Can someone help? My code is below, thanks.

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');

});

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


#2

@hudsonmckie,

+++++ addClass removeClass

Every HTML-Element has so called attributes.
One of the possible attributes, is the class-attribute.

If you write the HTML-document, you add the class-attribute
within the Element-Tag by using the syntax
class-keyword = then a string
containing the class-name
OR mutliple class-names which are =separated=from=eachother= by a space

Thus with

 <div class="myClass1 myClass2 myClass3" ></div>

you now have a DIV-Element carrying 3 classes myClass1, myClass2 and myClass3

As part of its CSS-category-of-Methods jQuery gives you the ability
to manipulate this class-attribute
by providing the addClass()-, removeClass()-, toggleClass()-Methods.
You will have to provide the Method at least 1 argument
which is the string VALUE of the class-name.
Thus you have to change
**$('.article').removeClass('.current')
$(this).addClass('.current')**
into
**$('.article').removeClass('current')
$(this).addClass('current')**

The confusion when to use a pre-pending dot or NOT...
In the Cascading Style Sheet syntax,
you have to prepend-a-dot to the classname
so the CSS will interpret it as a class-attribute
So in the file style.css you will find an object
identified by .current,
In this .current object
the background property-key is set to a particular VALUE

jQuery uses the same syntax to identify a class-attribute
like in the jQuery-selector
$(".current") by which this HTML-Element and all it's CHILDREN
are selected into a jQuery-object,

This parent-HTML-Element carries the class-attribute with class-name "current"

google search
== the Book ==
jquery [your question] site:developer.mozilla.org
CSS [your question] site:developer.mozilla.org
javascript [your question] site:developer.mozilla.org
[your question] site:jquery.com
[your question] site:getbootstrap.com

== discussions / opinions ==
jquery [your question] site:stackoverflow.com
CSS [your question] site:stackoverflow.com
javascript [your question] site:stackoverflow.com

== guidance ==
www.crockford.com
[your question] site:crockford.com
- - http://javascript.crockford.com/code.html
- - http://javascript.crockford.com/survey.html

http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page


#3

I appreciate the effort you went into for that response, however, I still don't understand which classes should have dots and which shouldn't. Also, is that the only problem with the code?


#4

@hudsonmckie,

As part of its CSS-category-of-Methods
jQuery gives you the ability
to manipulate this class-attribute
by providing the addClass()-, removeClass()-, toggleClass()-Methods.

You will have to provide the Method at least 1 argument
which is the string VALUE of the class-name. ( NO prepending DOT )
Thus you have to change

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

into

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

#6

This worked, thank you very much for your help!


#8

Thank you leonhard.wettengmx.n :slightly_smiling: I learned the structure of the code from another post of yours. I went by the tutorial that the issue with the order only reflected in this chapter :smiley: