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

JavaScript

Andrei Duhanes
Andrei Duhanes
14,155 Points
Posted by Andrei Duhanes
Andrei Duhanes
14,155 Points

Does this jq code seem correctly written? Starting to lose it...can't figure why it would not work.

Hello dear reader and helpful stranger!

  • This is the exact code from the exercise so It did work on workspaces but on my own project failed.

My ISSUE:

  • It only shows on half of my page not the entire body. So I am assuming there is a problem with how I am declaring #overlay, but I can't exactly put my finger on it. And yes I have tried out different properties and values for #overlay but still no.

What do you think?

//Js code var $overlay = $('<div id="overlay"></div>'); $("body").append($overlay);

//Css code

overlay {

background: green; width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-align: center; }

4 Answers

Steven Parker
Steven Parker
231,108 Points
Steven Parker
Steven Parker
231,108 Points

There's nothing obvious in the supplied code.

Perhaps it has something to do with an HTML component not shown here? And could you give more details about how you made your "own project" outside of the workspace?

Also please see the Markdown Cheatsheet link at the bottom of the "Add an Answer" section for instructions on how to format posted code. :arrow_heading_down:

Andrei Duhanes
Andrei Duhanes
14,155 Points
Andrei Duhanes
Andrei Duhanes
14,155 Points

Hi Steven,

Thanks for the response. Let me provide more info: The project was made using sass and bootstrap, and a separate js file.

The css links and js scripts are copied from bootstrap so their order is not conflicting, I think. And the green overlay covers only a part of the "body". To visualize the effect imagine a green overlay 100% width that covers 1/3 of the page from the top down.

It's like it doesn't recognize the body in the DOM correctly OR it is being overwritten by some bootstrap styles. I would provide the entire code for html but it's kind of long and there is nothing special about it. ...html head header (only for the navigation) body(rest of the page)...

If you need any specific details please let me know.

Andrei Duhanes
Andrei Duhanes
14,155 Points
Andrei Duhanes
Andrei Duhanes
14,155 Points

An update:

If I use an absolute length like: 700px instead of 100% it does stretch the overlay down the page, so I could put the exact size of my page which would mean length: 4000px but that doesn't actually fix my problem, it means only treating the symptoms and not the cause.

Steven Parker
Steven Parker
231,108 Points
Steven Parker
Steven Parker
231,108 Points

I suspect you're on the right track about bootstrap styles. When you use a comprehensive framework like bootstrap, you have to expect to do thing "the bootstrap way". I would check first to see if bootstrap provides an overlay or lightbox facility itself, and use that instead if so.

Otherwise, this may become an opportunity to exercise your diagnostic skills using the browser DevTools.

Andrei Duhanes
Andrei Duhanes
14,155 Points
Andrei Duhanes
Andrei Duhanes
14,155 Points

Thank you very much for your help Steven!