Push Menu Interactivity- error message

jquery

#1

Hi!
Push Menu Interactivity exercise

My code reads:

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

});
};

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?
Thx


#2

@indeedy-o,
With

 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
$(document).ready(main):
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
and
icon-close =click= Eventhandler
are activated....


#3

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?


#4

@indeedy-o,
The short answer
-1
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
like

var myFunction = function() {
       //function-body
      };

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=
myFunction();
or in our case let jQuery's ready() method execute the main =function= with
$(document).ready(main);

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

function main() {
   //function-body
}

( 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 )
https://stackoverflow.com/questions/7911255/how-do-javascript-variables-work

http://stackoverflow.com/questions/7336742/what-is-the-explanation-of-this-behavior-when-are-functions-created/7336792

http://stackoverflow.com/questions/336859/javascript-function-declaration-syntax-var-fn-function-vs-function-fn?rq=1

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

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