This forum is now read-only. Please use our new forums! Go to forums
does the order of the code matter?
why does this only work if I place the if statement before the current slide/next slide animation?
$('.arrow-next').click(function(){
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
if(nextSlide.length == 0){
nextSlide = $('.slide').first();
}
$(currentSlide).fadeOut(600).removeClass('active-slide');
$(nextSlide).fadeIn(600).addClass('active-slide');
});
previously ordered below did not work
$('.arrow-next').click(function(){
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
$(currentSlide).fadeOut(600).removeClass('active-slide');
$(nextSlide).fadeIn(600).addClass('active-slide');
if(nextSlide.length == 0){
nextSlide = $('.slide').first();
}
});
Answer 561697fc937676939b000154
I think it is better, if one understands the concept.
It all start’s with you, using a Browser in which you load a HTML-file, which we will call the HTML-Document.
This document has a minimal build of
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
The Browser =load’s= this document into Memory in a pattern that is described as the Document Object Model in short the DOM. ( the interpretation of the DOM is Browser & Version specific )
html
|
+-----+------+
| |
head body
|
title
In the description of your document in DOM-talk… you will encounter terms like: parent children sibling descendants ascendants…
The HTML-Element has no parent but is a parent to 2 child-Element’s the ‘head’-Element and the ‘body’-Element.
The ‘head’- and ‘body’-Element, both being children to the ‘html’-Element are siblings to each-other.
The ‘head’-Element is parent to the ‘title’-Element… the ‘title’-Element is a child of the ‘head’-Element the ‘title’-Element is also a descendant of the ‘html’-Element.
The DOM has several interface‘s over which you can access the data**/**information held by the DOM.
One of the interface‘s is the Element-interface you can divide the interface into properties ( consisting of a property-key and it’s associated VALUE ) and methods ( giving you the functionality to manipulate the Elements ) https://developer.mozilla.org/en-US/docs/Web/API/Element https://developer.mozilla.org/en-US/Learn/HTML/HTML_tags
Answer 5616a5ed937676cd380001e6
The basic Document Object Model
of the Flipboard index.html document
html
|
+- - - - - - - - -+- - - - - - - -+
| |
head body
| |
+ - -+ - -+ + - - - - - - + - - -+- - -+- - - - - -+
| | | | | | |
link link link div(header) div(Slider) div(Slider-nav) script
4 5 6 10 39 114 125
** line-number in index.html **
Answer 5616b395b62548a9e5000209
As you can see in the DOM representation the 39-div which has the class-attribute with class-name ‘slider’ encapsulate’s 4 div’s, each carrying the class-name ‘slide’
Of those 4-slide-div’s only one is given an extra class-name ‘active-slide’ which will be the one, which is on DISPLAY
If you look into the index.html file you will see that the 41-div is given this class-name ‘active-slide’ and the 41-div and all it’s descendants will be Displayed as in the stylesheet.css file you also defined
.active-slide {
display: block;
}
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)
Answer 5616b97c9113cb21fa000018
The 41, 62, 74 and 91-div are all on the same level They are all children of the 39-div. They are brothers and sisters of each-other in DOM-talk they are sibling to each-other.
With jQuery you have a facility with which you can create DOM-Selections. If you would use the jQuery-Selector $(‘.slide’) you would get a selection of all 4 div’s AND there descendants. ( length -> 4 ) $(‘.active-slide’) you would only get one div AND it’s descendants ( length -> 1 ) $(‘.slide’).first() you will get the 41-div and its descendants ( length -> 1 ) $(‘.slide’).last() you will get the 91-div and its descendants ( length -> 1 ) $(‘.slide’).first().next() you will get the 62-div and its descendants ( length -> 1 ) $(‘.slide’).last().next() you will get NO-Selection as there is NO-div to select, ( length -> 0 ) The length-property of the jQuery-Selection is =zero= https://api.jquery.com/next/
Answer 5616bc1186f552f8e00000de
Thus with the code
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
if(nextSlide.length == 0){
nextSlide = $('.slide').first();
}
-1 you determine which div is the currentSlide. (the Slide-on-Display) -2 then with jQuery next() you are going to try and grab the =next= div and by checking on the length-property of the =new= Selection you determine if you went past the last div, and if so you are changing the jQuery-Selection to the first-div ( 41-div ) $(‘.slide’).first();
Answer 5616bc3951b88736110000d2
+++++ 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 (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');
Answer 5616bd12d3292f208500010d
++ bootstrap http://getbootstrap.com/getting-started/ http://getbootstrap.com/2.3.2/components.html We now have .col-xs (phones), .col-sm (tablets), .col-md (desktops), and .col-lg (large desktops).
++ general search Did you try… http://www.codecademy.com/guidance/choose
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://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page http://www.w3schools.com/jquery/jquery_ref_selectors.asp
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