Push menu, #5 code error


#1

Hello guys,

I cannot see where I have typed things wrong, yet my result says:

Oops, try again. Add code for $('body') inside $('.icon-menu').click(). Look back at the instructions for the code.

Here is what I have

 var main = function (){
$('.icon-menu') .click (function(){
    $('.menu') .animate ({
        left: '0px'
    }, 200);
    $('.body') .animate ({
        left:'285px'
    },200);
});
};
$(document) .ready (main);

Thank you!


#2

@reazzee,

You should be aware that jQuery uses the same =selector=-criteria
as the CSS-interpreter.

If you want to select a HTML-Element
on the basis of it's TAG-name
you use the TAG-name as a string
like

$('p')
$('div')
$('body')

If you want to select a HTML-Element
on the basis of it's id-attribute
you use the id-attribute's-name as a string prepend with a hash-#
like

$('#first_Id')
$('#anOther')

If you want to select a HTML-Element
on the basis of it's class-attribute
you use the class-attribute's-name as a string prepend with a dot-.
like

$('.first_Class')
$('.anOtherClass')

Play around a bit....
http://www.w3schools.com/jquery/trysel.asp


#3

@reazzee,

+++++ DOM representation of push menu

If your HTML-page is loaded into memory by the Browser
the memory-layout will be build
using the rules, as defined in the Document Object Model
in short the DOM

The DOM representation of the index.html file would look like:

               html
                |
         |------+---------|
         |                |
        head             body
         |                |
    |----+----|      |----+-----------|
    |    |    |      |                |
   link link link  10div(.menu)     27div(.jumbotron)
                    |                 |
     |--------------+----|          29div(.icon-menu)
     |                   |             |
   13div(.icon-close)  18ul          30i (.fa
     |                   |             |  and .fa-bars)
    img       |-----|----+|-----|    text  
              |     |     |     |    node
             19li  20li  21li  22li
              |     |     |     |
              a     a     a     a
              |     |     |     |
            text   text  text  text
            node   node  node  node

Now if you look at the DOM representation
the body-Tag is parent to
a 10div Element's Tree ( with class-attribute with class-name "menu" )
and
a 27div Element's Tree ( with class-attr. with class-name "jumbotron" set )

Now if you look in the style.css file,
with which you manage the Display of your Elements,
you will find that
the body object has the property left: 0; being set
( the body-Tree has a _start-Display at position left-0 )_

but
the .menu object has the property left: -285px; being set
and therefor the 10div-Tree is outside of Display.

In your 'app.js' file you are
CREATING a VARIABLE main
to which you assign a so-called anonymous Function
and in the FUNCTION-BODY of this anonymous Function
we are attaching our click Event-handlers
to the HTML-Elements which are
-1 carrying the "icon-menu" class-name as class-attribute
-2 carrying the "icon-close" class-name as class-attribute
( during the assignment the function is NOT executed )

You will have to add the code-line
$(document).ready( main );
which will result in the =main= Function to be executed
AFTER the Browser has set the ready Event-flag.

Reference::

google search
class site:jquery.com
https://api.jquery.com/category/selectors/
http://api.jquery.com/class-selector/
https://api.jquery.com/element-selector/
http://www.w3schools.com/jquery/trysel.asp

what is CSS explained site:developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/What_is_CSS

= http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page

++++++++++ structure P u s h M e n u function
The structure of your =main= Function should look like....

  var main= function() {
     $('.icon-menu').click( function() {
           //Your animation
     });

     $('.icon-close').click( function() {
           //Your animation
      });
   };
 $(document).ready(main);

explanation of the push-menu setup
https://www.codecademy.com/forum_questions/55b3d3c1d3292f529b00005e


#4

Thanks Leon!
That really helped, I appreciate it :smile: