This forum is now read-only. Please use our new forums at discuss.codecademy.com.
Why putting <script>'s links at the end of the body ?
Why we don't just put them in ?
$(document).ready() makes it load at last, when elements loaded completely, so i guess there is no difference where to put the s...
++ general search
Did you try...
== the Book ==
jquery [your question] site:developer.mozilla.org
CSS [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
== guidance ==
[your question] site:crockford.com
+++++ 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" )
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 )_
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.