6/8 menu doesnt appear


#1

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

    $('.body').animate({
        left: '285px'
    }, 200);
});

};

$(document).ready(main);

the menu doesnt appear
theres just a message about some error but i cant find find any missing ")": SyntaxError: missing ) after argument list

could someone help me? :slightly_smiling:


#2

sorry code wasa bit messed up by copying...


#3

@ceeker,

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

HTML Elements can also carry attribute's
like:
the **id="id-name-as-string"
the **class="class-name1 class-name2"

In the Cascading Style Sheet syntax,
you have to prepend-a-dot to the classname
so the CSS will interpret it as a class-attribute
So in the file style.css you will find an object
identified by .class-name1
OR
the Cascading Style Sheet syntax,
you have to prepend-a-hash to the id-name
so the CSS will interpret it as an id-attribute
So in the file style.css you will find an object
identified by #id-name-as-string

An object is encapsulated in a pair of curly-brackets-{ }
and contains one or more properties.
Each property consists of a property-key and it's associated Value
A property-definition is terminated with a semi-colon-;

Thus in your style.css file you would have an object

#id-name-as-string {
   color: green;
}
.class-name1 {
   color: red;
}

You could also present the color-Value
in the so-called Red Green Blue format.
Depending on the Browser you use
[255,255,255] for white
or
#FFFFFF for white

Thus you could have used

#id-name-as-string {
   color: #00FF00;
}
.class-name1 {
   color: #FF0000;
}

#4

@ceeker,

+++++ 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/jquery_ref_selectors.asp
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
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

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