Push Menu Interactivity- error message



Push Menu Interactivity exercise

My code reads:

var main = function() {

$('.icon-menu').click(function () {
left: "0px"
}, 200);

    left: "285px"
}, 200);


$('.icon-close').click(function() {
        left: "-285px"
    }, 200);

        left: "0px"
    }, 200);


Which is IDENTICAL to the suggested code in the hint, I've gone over & over, but keep getting this error message: It looks like the '.menu' didn't animate 285px back to the right. Check your $('.menu').animate() function.

It's true, the menu doesn't animate. Any ideas why?



 var main = function() {

    $('.icon-menu').click(function () {
        $('.menu').animate({        left: "0px"    }, 200);
        $('body').animate({left: "285px"}, 200);

    $('.icon-close').click(function() {
        $('.menu').animate({left: "-285px"}, 200);
        $('body').animate({left: "0px"}, 200);

you have defined the =main= function
which is not yet executed....

You will have to add 1 code-line
Now if your HTML document is loaded by your Browser
and jQuery has set the ready-flag
this =main= function is executed
and both the
icon-menu =click= Eventhandler
icon-close =click= Eventhandler
are activated....


Thanks, I've put the document.ready(main) underneath the var main = function, when it appears to only work at the end, after the main function is complete!

Why does it need to be at the end?


The short answer
If your Javascript code is executed
the Javascript interpreter will do that in 2 phases

  • first comes the parse phase in which the code is loaded into memory
    • eventual syntax-errors are then presented as parse-errors
    • variable declarations are hoisted but NOT the assigned Values
  • secondly comes the execution phase

If you define a =function= using the so-called function statement

var myFunction = function() {

defining the variable myFunction
to which you assign
a so-called anonymous function,
the actual function is first known as execution has read the var statement
AFTER which you can then call this =function=
or in our case let jQuery's ready() method execute the main =function= with

However there is a second possibility
using the so-called function Declaration
also called defining a named function

function main() {

( please note the absence of the semi-colon-; )

This function is hoisted during the parse phase
which means that the function is known as soon as the Javascript parser
went over this declaration,
and in your code
you could then call the function BEFORE it is seen in your physical code....

Here some articles
== discussions / opinions == ( stackoverflow.com used by a lot of programmers )




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 ==
[your question] site:crockford.com
- - http://javascript.crockford.com/code.html << Javascript coding convention
- - http://javascript.crockford.com/survey.html