Some questions


#1



var main=function(){
    
    $('.article').click(function(){
        
     $('.article').removeClass('current');
           
        $('.description').hide();
        $(this).addClass('current');
        $(this).children('.description').show();
      
        });
  $(document).keypress(function(event){
      if(event.which===111){
          $('.current').children('.description').toggle();
       } 
       else if(event.which===110){
  var currentArticle= $('.current');    var nextArticle=currentArticle.next();
   currentArticle.removeClass('current');
   nextArticle.addClass('current');
           }  
    });
            
    };
    
    $(document).ready(main);


I have some questions about this code:
Why i cannot have $(this).children('.description').toggle(); instead of .show(); so i can toggle when click
If var currentArticle= $('.current'); and we remove the current class like: currentArticle.removeClass('current'); is the same thing with $('.current').removeClass('current); I d like too know how the jQuery knows whos element to remove that current class. It sounds a little confusing to me cause it seems like: remove the current class of the...current class..
I hope someone can enlighten with some explanations


#2

@ad01,
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>
       <!-- here you insert your HTML-code -->
     </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.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

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/HTML/Element
https://developer.mozilla.org/en-US/docs/Web/API/Element
https://developer.mozilla.org/en-US/Learn/HTML/HTML_tags


#3

@ad01,

If you use $( )
you are using the so called jQuery selector

The selector will select ALL the HTML-Elements of the active HTML-page,
which have an attribute equal to the one you use as an argument.

Thus if you use
$(".article") you are selecting all the HTML-Element's
which have the class="article" set
( you will find 7 Article's)

The jQuery Selector will create an object
which will contain all those selected Elements. AND its children..

Talking in terms of DOM (=Document Object Model )
you select a parent and all its children which are in its tree

Here is the how the Document Object Model view looks like for
this HTML-page..

                   html
                    |
      + - - - - - - + - - - - - -+
      |                          |
      3                          7
     head                       body
      |                          |
  + - + - +          + - - - - - + - - - - - - +
  |       |          |           |             |
  4       5          8          165           166
 link    link       div        script        script
                 .articles
                 .container
                     |
 + - - - + - - - + - + - + - - - + - - - + - - - +
 |       |       |       |       |       |       |
 10      32      54      76      98     120     142
 div     div     div     div     div    div     div  < .article
                      .current                     sibling's  
                          |                          .next()
           +- - - - - - - + - - - - - - - - +
           |                                |
           77                               88
          .item                        .description
           div                              div
            |                                |
  + - - - - + - - - -+           + - - - - - + - - - - -+
  |         |        |           |           |          |
  78        81       84          89          90         94
  div       div      div         div         div        div
                                              |
                                      + - - - + - - - +
                                      |               |
                                      h1              p

The numbers in the Diagram
represent the line-number in the index.HTML file.

So to get to the articles we follow the path
html -> 7-body -> 8-div
(we landed at the PARENT of ALL the Articles)
Those Articles are the CHILDREN to this PARENT.
And the CHILDREN between themselves are SIBLINGS.
And ALL these CHILDREN are carrying the Class article.

In this Diagram i have
put the current Class on the 4th Article...
this would happen if you clicked on the 4th-Article
at wich point you have this article at your fingers via this

$('.article').removeClass('current'); <select all 7 Elements with Class "article" & remove the attribute class=current from all those Elements.

$('.description').hide(); <select all 7 Elements with Class "description" & hide those Elements.

$(this).addClass('current'); <select the Element you just clicked-on, using this as the way to identify this Element, add the Class attribute "current", which via the style.CSS file will cause the change of color via the .current CSS-object,
but from now on if we use the jQuery Selection with the argument '.current'
like $('.current') , we know that we have selected 1 Article-Element, with ALL its CHILDREN

$(this).children('.description').show(); <select the'clicked-on Article and ALL its Elements, and from this collection of Elements, choose the Element with the Class "description" set, and show that Element and all its Children.

\==================================
$('.description').show(); <select all 7 Elements with the Class "description" and show them...you will see all 7 Articles with their description shown.

$('.current').children('.item').toggle()
$('.current').children('.description').toggle()
< select the current Article and ALL it member Elements
step 1 , hide the Article-line using the ".item" Class as sub-selection
step 2 , show the Children Elements of the Parent with Class "description"

===========================================================

References::
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 << Javascript coding convention
- - http://javascript.crockford.com/survey.html

http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page
http://www.w3schools.com/jquery/trysel.asp


#4

I tried to replace show(); with toggle but it doesn t work when i click, only with keypress event it works toggle();
Also that line with removing class current is confusing


#5

@ad01
Then give the FULL code you are using now.....


#6

HTML

<!doctype html>
<html>
  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="articles container">
      
      <div class="article current">
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">FLIGHT</p>
          </div>
          <div class="col-xs-6">
            <p class="title">Embraer adds third Legacy 500 prototype to flight test campaign</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Mar 23</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3">&nbsp;</div>
          <div class="col-xs-6">
            <h1>Embraer adds third Legacy 500 prototype to flight test campaign</h1>
            <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
          </div>
          <div class="col-xs-3">&nbsp;</div>
        </div>
      </div>

      <div class="article">
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">AW Commercial Aviation</p>
          </div>
          <div class="col-xs-6">
            <p class="title">CSeries Supplier Scramble</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Mar 22</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3">&nbsp;</div>
          <div class="col-xs-6">
            <h1>CSeries Supplier Scramble</h1>
            <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
          </div>
          <div class="col-xs-3">&nbsp;</div>
        </div>
      </div>

      <div class="article">
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">AW business aviation</p>
          </div>
          <div class="col-xs-6">
            <p class="title">Flying the Gulfstream G650</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Mar 22</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3">&nbsp;</div>
          <div class="col-xs-6">
            <h1>Flying the Gulfstream G650</h1>
            <p>Gulfstream is turning up the heat in the large-cabin business aircraft competition with its new G650 flagship, the largest, fastest, farthest-ranging...</p>
          </div>
          <div class="col-xs-3">&nbsp;</div>
        </div>
      </div>

      <div class="article">
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">FLIGHT</p>
          </div>
          <div class="col-xs-6">
            <p class="title">New retirements cut RAF VC10 fleet to four</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Mar 22</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3">&nbsp;</div>
          <div class="col-xs-6">
            <h1>New retirements cut RAF VC10 fleet to four</h1>
            <p>The UK Royal Air Force has retired another two of its Vickers VC10 tankers, with the pair's departure reducing its inventory of the Rolls-Royce...</p>
          </div>
          <div class="col-xs-3">&nbsp;</div>
        </div>
      </div>

      <div class="article">
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">FLIGHT</p>
          </div>
          <div class="col-xs-6">
            <p class="title">Virgin can deliver more value for Delta than for SIA: Bastian</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Jul 17</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3">&nbsp;</div>
          <div class="col-xs-6">
            <h1>Virgin can deliver more value for Delta than for SIA: Bastian</h1>
            <p>Delta Air Lines president Ed Bastian is confident that the carrier can extract far more value from its shareholding in Virgin Atlantic compared with...</p>
          </div>
          <div class="col-xs-3">&nbsp;</div>
        </div>
      </div>

      <div class="article">
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">AW Defense</p>
          </div>
          <div class="col-xs-6">
            <p class="title">Freedom Experiences Two More Power Outages</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Mar 22</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3">&nbsp;</div>
          <div class="col-xs-6">
            <h1>Freedom Experiences Two More Power Outages</h1>
            <p>The Littoral Combat Ship (LCS-1) USS Freedom’s first overseas deployment to Southeast Asia has been marred by two more power outages...</p>
          </div>
          <div class="col-xs-3">&nbsp;</div>
        </div>
      </div>

      <div class="article">
        <div class="item row">
          <div class="col-xs-3">
            <p class="source">FLIGHT</p>
          </div>
          <div class="col-xs-6">
            <p class="title">FedEx to acquire up to 30 United 757s</p>
          </div>
          <div class="col-xs-3">
            <p class="pubdate">Mar 22</p>
          </div>
        </div>
        <div class="description row">
          <div class="col-xs-3">&nbsp;</div>
          <div class="col-xs-6">
            <h1>FedEx to acquire up to 30 United 757s</h1>
            <p>United Airlines is to sell up to 30 Boeing 757s to freight operator FedEx Express, with deliveries of the twinjets set to start this year.</p>
          </div>
          <div class="col-xs-3">&nbsp;</div>
        </div>
      </div>

    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

#7

CSS

body {
  background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/reader/bg.png');
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

p {
  margin: 0;
}

.row {
  margin: 0;
}

.articles {
  margin-top: 30px;
  margin-bottom: 30px;
}

.article {
  color: #222;
  background: rgba(255,255,255,.9);
  border-spacing: 2px;
  border-color: gray;
  font-family: arial,sans-serif;
  border-bottom: 1px #e5e5e5 solid;
}

.current .item {
  background: rgba(206,220,206,.9);
}

.item {
  cursor: pointer;
  padding-top: 7px;
  padding-bottom: 7px;
  
}

.item .source {
  margin-left: 20px;
}

.item .title {
  font-weight: bold;
}

.item .pubdate {
  margin-right: 20px;
}

.item .pubdate {
  text-align: right;  
}

.description {
  display: none;
  padding-top: 10px;
  padding-bottom: 10px;
}

.description h1 {
  margin-top: 0px;
  font-size: 23px;
}

#8

And JS

var main=function(){
    
    $('.article').click(function(){
        
     $('.article').removeClass('current');
           
        $('.description').hide();
        $(this).addClass('current');
        $(this).children('.description').show();
      
        });
  $(document).keypress(function(event){
      if(event.which===111){
          $('.current').children('.description').toggle();
       } 
       else if(event.which===110){
  var currentArticle= $('.current');    var nextArticle=currentArticle.next();
   currentArticle.removeClass('current');
   nextArticle.addClass('current');
           }  
    });
            
    };
    
    $(document).ready(main);

#9

@ad01
In
https://api.jquery.com/category/effects/basics/
you read the definitions
Category: Basics
.hide() Hide the matched elements.

.show() Display the matched elements.

.toggle() Display or hide the matched elements.

Try to draw the DOM representation on a piece of paper.....
and then read what you are doing in your =click= Eventhandler

  • $('.article').removeClass('current');
    <select all 7 Elements with Class "article" & remove the attribute class=current from all those Elements.

  • $('.description').hide();
    <select all 7 Elements with Class "description" & hide those Elements.

  • $(this).addClass('current');
    <select the Element you just clicked-on, using this as the way to identify this Element, add the Class attribute "current", which via the style.CSS file will cause the change of color via the .current CSS-object,
    but from now on if we use the jQuery Selection with the argument '.current'
    like $('.current') , we know that we have selected 1 Article-Element, with ALL its CHILDREN

  • $(this).children('.description').show();
    <select the'clicked-on Article and ALL its Elements, and from this collection of Elements, choose the Element with the Class "description" set, and show that Element and all its Children.


#10

Found the solution i tested it and i had to remove
$('.description').hide(); in order to work then i replaced .show(); with .toggle();


#11

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.