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

266 points
Faa44a3ab9d6d73eef256847cb3d23e6?s=140&d=retro
Submitted by
darthone
over 3 years ago

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();
  }

});

0 votes

permalink

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

3701 points
5334fc819c4e9db930001a0d_32139218
Submitted by
Leon
over 3 years ago


0 votes

permalink

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 **

3701 points
5334fc819c4e9db930001a0d_32139218
Submitted by
Leon
over 3 years ago


0 votes

permalink

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)

3701 points
5334fc819c4e9db930001a0d_32139218
Submitted by
Leon
over 3 years ago


0 votes

permalink

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/

3701 points
5334fc819c4e9db930001a0d_32139218
Submitted by
Leon
over 3 years ago


0 votes

permalink

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

3701 points
5334fc819c4e9db930001a0d_32139218
Submitted by
Leon
over 3 years ago


0 votes

permalink

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

3701 points
5334fc819c4e9db930001a0d_32139218
Submitted by
Leon
over 3 years ago


0 votes

permalink

++ 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

3701 points
5334fc819c4e9db930001a0d_32139218
Submitted by
Leon
over 3 years ago