Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
nb11
17,552 PointsWhy don't you need $( document ).ready() in the main.js file?
HI,
Just going through this course now and a little confused as to why in the sticky.js documentation it shows as you should include the $( document ).ready() but in the videos this is not used, it is written directly as $("#sticker").sticky({topSpacing:0});
is there a reason this is excluded in the main.js file? What is the purpose of the $(document).ready() part and when should you use it?
Cheers, Nolan
3 Answers
Erwin Meesters
15,088 PointsYou use the $( document ).ready() statement only in those cases when you want to be certain the javascript gets parsed after the document is rendered completely. By nature javascript is blocking the rendering of the html document. So when you put the link to a javascript file in the head of the html document, the rendering of the page is paused until the javascript file is completely parsed. This can cause a white screen or partially rendered screen until the requested javascript is ready parsing. A solution to prevent this is to wrap the javascript in the $( document ).ready() statement. This will ensure that the document gets rendered first and the javascript gets parsed on the document ready event.
Another solution is to put all the javascript at the end of the document right before the closing body tag (</body>). The page will render completely before the javascript gets parsed. The latter solution is the case in this course I believe, so that's the reason why $( document ).ready() isn't used. Wouldn't hurt though if it was used.
Alex Boyers
15,168 PointsI believe that it has to do with where you include/link your script in your HTML file. If you link it in the <head>, then the .js file should be wrapped in the $(document).ready() function, so that it waits for the HTML in the <body> to load before running.
However it is common practice to include your script link within the body of your HTML file, just before the closing </body> tag, so when the browser parses the file, it doesn't reach the .js file until it has loaded the rest of the HTML.
nb11
17,552 PointsOK I think I get it, so if you link to your .js file at the top of the html page then best use the $(document).ready() function in the .js file and also the same if you include the javascript in the html file between<script> tags.
But then if the link to the .js file is at the end of the html document then yes I see it loads all the html first then reads the .js file so it is not really needed in the .js file.
Cool got it now, thank you!
Jaime Rios
Courses Plus Student 21,100 PointsThat is exactly the answer to your question! Keep on learning.