This forum is now read-only. Please use our new forums! Go to forums
Not working? 9/12
can’t seem to figure out why this won’t pass…
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');
});
$('arrov-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);
Answer 55e4c9039113cb67140004de
Answer 55e4e68686f5526e7b00056b
+++++ flipboard the next && prev steps
s t e p s - - f o r - - n e x t S l i d e -1 -1a create a selection of nextSlide -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');
Answer 55e4e6b6d3292fe88600055b
+++++ 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”
Reference::
google search class site:jquery.com https://api.jquery.com/category/selectors/ http://api.jquery.com/class-selector/ https://api.jquery.com/element-selector/ http://www.w3schools.com/jquery/jquery_ref_selectors.asp http://www.w3schools.com/jquery/trysel.asp
what is CSS explained site:developer.mozilla.org https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/What_is_CSS
Some reference-material: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page
1 comments
Got it to work :) thanks for the help and references!
Popular free courses
- Free Course
Learn SQL
In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.Beginner friendly,4 LessonsLanguage Fluency - Free Course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner friendly,11 LessonsLanguage Fluency - Free Course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner friendly,6 LessonsLanguage Fluency
2 comments
nope, still doesn’t work. i get a “ Oops, try again. Remember to fade out the current slide and remove the ‘active-slide’ class. “ error ://
look at the removeClass() addClass() method usage….see post below…