The o shortcut


#1

here is my code

$(document).keypress(function(event) { if(event.which == 111) { 
    $('.current').children('.description').toggle();}
});

here is what the description in the instructions says to have it as

$(document).keypress(function(event) {
  if(event.which === 111) {
    $('.current').children('.description').toggle();
  }
});

i have the same exact code and am still getting a message saying

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.

any ideas?


#2

@10dechad,
Have you tried
++++ reset of session *****************
under certain circumstances you can shoot your Browser in an
inconsistent state.

Therefor it is of an advantage to know that you have 2 reset facilities:

One is the use of the F5-key which does a refresh Browser

and

Two, select&copy your code
Then use the Reset Code button of the course-window,
then paste your code back in.

Addendum
General Notes:
Always refresh the browser after making corrections:
CTRL f5 ( if on Windows or Linux)
CMD r ( if on a MAC).
CTRL 0 to reset browser zoom


#3

There is a mistake in the instructions. You should write your code outside the event handler.


#4

@10dechad,

Could you provide the full code you are using....
as the above should be encapsulated in a function
like

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

and should then be called, AFTER the document has changed into the =ready= state
with

 $(document).ready(main);

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

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]

++ explain main click-event-handler && keypress-event-handler +++++

79 is uppercase O, 111 is lowercase o. (courtesy to Roy aka mtf)
78 is uppercase N, 110 is lowercase n.
This explanation tries to give you the insight, in the structure of your
main-function.
It consists of 3 parts:
1 The structure of the main-function
2 The structure with comments and 2 Event Handlers...
3 The structure stripped of most comments.

1 The structure of the main-function

You are defining a function by the name main.

var main = function() {
     //BEGIN of function-body 
    //
    //Here comes all the code that will
    //be excuted, AFTER the DOCUMENT is READY
    // $(document).ready(main);

   //END of function-body
   };

  $(document).ready(main);

2 The structure with comments and 2 Event Handlers...

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

3 The structure 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);

#5

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

where do i put

$(document).ready(main);

?


#6

i tried to reset the session and it still came out as

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.

when i have the code the same as the instructions.


#7

leonhard's comment can answer all your questions, i think :slightly_smiling:
But if you ask.. Firstly, you create a function, which describe all actions at your page. It looks like
var main = function(argument) {function body, actions;}
Then, to use it on the page, you should call it with

So, this string you should write after the end of the function body.


#8

what do you mean write my code outside the event handler?