Help me on o shortcut


#1

I can't figure out what I'm doing wrong can somebody help me please. My code should be below.

var main = function() {
    $('.article').click(function() {
        $(this).children('.description').show();
    });
};
$(document).ready(main);

var main = function() {
  $('.article').click(function() {
      $('.article').removeClass('current');
    $('.description').hide();

    $(this).addClass('current');
    $(this).children('.description').show();
  }
}
var main = function() {
    $('.article').click(function() {
        
    });
    
    $(document).keypress(function(event) {
     if(event.which === 111) {
      $('.current').children('.description').toggle();
     }
   });

#2

@329281,

You are using a Browser and are opening the index.html-file into a Browser -tab-.
http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page

As the $(document).ready() stage is reached the Javascript-function main
will be executed if we use
$(document).ready(main);

As the html-page is fully loaded into memory
you have a representation of this page,
using the Document Object Model as guide-line, browser-specific
If you want to navigate through this represention,
you are using terms like
parent
child or children (in jQuery you use... .last() .first() )
sibling (all the chidren are sibling to each other .prev() .next() )

++++ DOM representation Interactive Website +++++++++++
As a starter, I took the index.html apart...
This is a Document Object Model representation
The numbers are the line-numbers where the Tag can be found...
So we have a 76-div which in this diagram has the class attribute current
I will use this diagram as reference in the explanation in separate Post's
( this is what DOM looks like when clicked on the 4th Article )

                   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

By using the description-class in the jQuery selector $('.description')
you will create a jQuery object which has 7 properties
which are the 7 div Element's that have the class="description" set.
We hide them all by using:
$('.description').hide();

By using the current-class in the jQuery selector, $(".current")
you will create a jQuery object which has 2 Children
being the 77-div and the 88-div,
these can be targeted by using their ".item" or ".description" class-attribute
$('.current').children('.description').show();

In this diagram you see that the 8-div has 7 Children,
These Children are Siblings to each other,

  8-div - - - - -+
                  | /7-Children/
        .article  + 10-div [first-child]
                  |
        .article  + 32-div    As these div's are
                  |           'siblings' of each-other
                  |           we can use the
                  |           .prev() and .next() methods
                  |                           to navigate
        .article  + 54-div [prev]
                  |
        .article  + 76-div class="current"  - +/2children/
                  |                           + 77-div .item
        .article  + 98-div [next]             |
                  |                           + 88-div .description
        .article  +120-div                    
                  |
        .article  +142-div [last-child]

Within the function-body of the main function
we are going to define 2 so-called EVENT-Handlers
1 click-event-handler
2 keypress-event-handler

var main = function() {
     //BEGIN of function-body 
    //
    //The CLICK event-handler is
    //  attached to ALL elements with class=".article" in index.html
    // by using the -selector- $('.article') we SELECT all articles.
    $('.article').click(function() {
        //BEGIN of CLICK function-body
       //
       // Here we put all the code which is
       // executed when we CLICK on an -article-

       //END of CLICK function-body && CLICK event-handler
     });

     //now comes the KEYPRESS event-handler
     // this is attached to the WHOLE of the HTML-page//document
     //by using a -selector- $(document) we select the WHOLE page..

     $(document).keypress(function(event) {
          //BEGIN of KEYPRESS function-body

       //Here comes the code which is executed 
       // as a KEYBOARD key is Pressed we know which-key is pressed
       //by evaluating the EVENT.WHICH value.
       //  http://msdn.microsoft.com/en-us/library/60ecse8t(v=vs.80).aspx
       // look in the column "Dec"

       //END of KEYPRESS function-body && close of KEYPRESS event handler
       });
   //END of function-body
   };

  $(document).ready(main);

The structure of the =main= function stripped of most comments.

So the structure of our main-function looks like:

var main = function() {
     //BEGIN of main function-body 
    //
    //The CLICK event-handler is

    $('.article').click(function() {

     });

     //now comes the KEYPRESS event-handler

     $(document).keypress(function(event) {

       });
   //END of main function-body
   };

  $(document).ready(main);

Oops, try again. It looks like the o key isn't opening a description. Remember to toggle the current article's description inside the event handler. Look back at the instructions for the code
The o shortcut
The N shortcut 2
The n shortcut 2- translation needed
O shortcut lesson #7
Developing the exercise further
Why the 0 short cut does not work?
#3

@329281,

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 attribute 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, usingthisas 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').hide().children('.description').show()
<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"


#4

@329281,

Now encapsulated within the keypress Event-handler
as its function-body

$(document).keypress( function(event) {
    if ( condition1 ) {
        // this code which will be executed IF CONDITION1 is TRUE
    }
    else if ( condition2 ) {
       // condition1 ran into a -false-
       // this code which will be executed IF CONDITION2 is TRUE
    }
  });

++++++++++++++++++++++++++++++++++++++++

As a function of the keypress Event-handler we are going to evaluate
the object which we get as a return value in the variable event.
_( An object has one or more properties
Each property consists of a property-key and it's associated VALUE )_

If we write event.which
we are reading the associated VALUE of the which property-key.
We are using the Decimal column of the table
http://msdn.microsoft.com/en-us/library/60ecse8t(v=vs.80).aspx
( arrow left-37 up-38 right-39 down-40 )
and we see that the letter o is represented with the Decimal value 111

if ( event.which === 111 ) {
// if you have made the preview-screen on-focus by clicking in the 'green'
// and you have pressed the o-keyboard-key
// the "description" will be shown
// of the article which is carrying the Class-attribute 'current'.
} herewith we close the if code-block

if ( event.which === 111 ) {
   $('.current').children('.description').toggle();
   // replace .toggle() with .show()
}

Now if didn't press the o key but for instance the n-keyboard-key
(looking in the Decimal column we see the VALUE 110)
Now we are entering the ELSE-IF
else if ( event.which === 110) {
// we are going to capture the jQuery object which we get
// as return VALUE of using the jQuery-Selector $('.current')
// var currentArticle = $('.current');

// as all articles are Siblings to each other,
// we can use the next() Method
// to orientate ourselves on the next 'article'
// and capture the returned jQuery Object
//we assign this returned jQuery Object to its own variable
// var nextArticle = currentArticle.next();

// now want to remove the Class-attribute 'current' from the currentArticle
// currentArticle.removeClass('current');
// we want the next-'article' to carry this Class-attribute 'current' by addClass
//**nextArticle.addClass('current');**
// you will see the current'article' will lose it's highlight
// and the next'article' will be highlighted.
} we close the ELSE-IF statement !!

  $(document).keypress(function(event) {
     // if the "o" keyboard-key is pressed
     if ( event.which === 111 ) {
       $('.current').children('.description').toggle()
     }
     // if the "n" keyboard-key is pressed
     else if ( event.which === 110 ) {
       var currentArticle = $('.current');
       var nextArticle = currentArticle.next();
       // swap the Class-attribute 'current'
       currentArticle.removeClass('current');  //it loses highlight
       nextArticle.addClass('current');  // it is highlighted
     }
     // if the "a" keyboard-key is pressed.
     else if ( event.which = 97 ) {
        $('.item').toggle();
        $('.description').toggle();
     }
    });

#5

I'm sorry but can just tell me what I need to do to fix it


#6

And does it want me to change one of my already written code or make a new piece of code


#7

@329281,
Look at the structure of the code you will have to write

var main = function() {
     //BEGIN of main function-body 
    //
    //The CLICK event-handler is

    $('.article').click(function() {

     });

     //now comes the KEYPRESS event-handler

     $(document).keypress(function(event) {

       });
   //END of main function-body
   };

  $(document).ready(main);

#8

No what I mean is to tell me what I'm doing wrong please.


#9

Leon is showing you that you should have only one function called main. Every time that you go: var main = you wipe out the previous definition of main.

Your function called main should contain two event handlers. One for clicks and one for keypresses.

Does that help you at least see where you are headed?


#10

I understood just now! If move keypress function outside the click function - it will work!

My code:

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

};

$(document).ready(main);indent preformatted text by 4 spaces

O shortcut lesson #7
#11

thanks again leonhard...great post

very comprehensive...can always count on you