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
Le Var Range
Front End Web Development Techdegree Student 18,011 PointsI would like to know why doesn't the append method work when I do one of the workspace projects on jquery .
var $overlay = $('<div id="overlay"></div>');
$("body").append($overlay);
this does not work when I do on the workspace but when the instructor does the same exact thing it works
21 Answers
Tushar Singh
Courses Plus Student 8,692 Pointsvar $overlay = $('');
you declared a variable $overlay and it's value is?????Make sure you re-check your code because it's an empty variable(and you din't close your quotations). In the video, there must be some kind of an id or a class in that variable you are referring to.
Le Var Range
Front End Web Development Techdegree Student 18,011 Pointsvar $overlay = $('<div id="overlay"></div>');
$("body").append($overlay);
Le Var Range
Front End Web Development Techdegree Student 18,011 Pointsthis doesn't work in the workshop on building a jQuery interactive photo album.. its suppose to be appended to the body and the css is suppose to be a dark transparent black.. but this sample code should work //// it works on my text editor which is strange
Le Var Range
Front End Web Development Techdegree Student 18,011 Pointsi just doesn't work in the workshop .. it might be a bug .. maybe
Steven Parker
243,318 PointsI suspect it does work, but what you are appending is an empty (and therefore invisible) element.
var $overlay = $('<h1>Hello</h1>');
Or maybe you do have some code there, but markdown is eating it since you did not blockquote it.
Also make sure you have JQuery loaded.
Le Var Range
Front End Web Development Techdegree Student 18,011 Pointsthats not how its done in the workshop though ... the instructor does nothing of the such
Steven Parker
243,318 PointsCan you provide a link to what you are working on?
Le Var Range
Front End Web Development Techdegree Student 18,011 Pointsits weird it works in my text editor .. wish it worked in the workshop though so i could follow along
Tushar Singh
Courses Plus Student 8,692 PointsI checked the video, you are supposed to do this.
var $overlay = $('<div id="overlay"></div>');
and then using css you will get the desired effect.
Steven Parker
243,318 PointsIt looks OK now that it's blockquoted. But where's the original HTML and the CSS?
Could you link to the video AND make a snapshot of the workspace and post a link to that?
Le Var Range
Front End Web Development Techdegree Student 18,011 PointsjQuery basics perform : part 1
Tushar Singh
Courses Plus Student 8,692 Pointsyou should have something in your overlay variable, what are you appending really, just think about it for a moment--nothing. And in this particular project you have to create a div element with an id=overlay.
Le Var Range
Front End Web Development Techdegree Student 18,011 Pointsi did i don't know why its not showing up in the post
Le Var Range
Front End Web Development Techdegree Student 18,011 Pointsvar $overlay = $('<div id="overlay"></div>');
$("body").append($overlay);
````js
Le Var Range
Front End Web Development Techdegree Student 18,011 Pointsthis is what i did and its not working in the workshop
Tushar Singh
Courses Plus Student 8,692 PointsNext step is add some css to your id=overlay and and when the image gallery is clicked show overlay. Did you assigned a click handler to the images???
Steven Parker
243,318 PointsThis part looks fine. Without seeing a snapshot of your workspace I can only guess, but these things come to mind:
- your CSS might not be correct
- your HTML might not be loading your CSS
- your HTML might not be loading JQuery
Le Var Range
Front End Web Development Techdegree Student 18,011 Pointsno everything is correct ... it works on my text editor i was trying to figure out for the passed hour on why instead of moving on .. kinda baffilng .
Tushar Singh
Courses Plus Student 8,692 PointsCan you share your complete code??? And there has been some issues in the workspaces lately anyway https://teamtreehouse.com/community/workspaces-status-update
Le Var Range
Front End Web Development Techdegree Student 18,011 Pointsbody {
font-family: sans-serif;
background: #384047;
}
h1 {
color: #fff;
text-align: center
}
ul {
list-style:none;
margin: 0 auto;
padding: 0;
display: block;
max-width: 780px;
text-align: center;
}
ul li {
display: inline-block;
padding: 8px;
background:white;
margin:10px;
}
ul li img {
display: block;
}
a {
text-decoration: none;
}
/** Start Coding Here **/
#overlay {
background: black;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
``` css
Tushar Singh
Courses Plus Student 8,692 Pointsyou may want to add display: none to your overlay
Le Var Range
Front End Web Development Techdegree Student 18,011 Pointsvar $overlay = $('<div id="overlay"></div>');
$("body").append($overlay);
$("#imageGall a").click(function(e) {
e.preventDefault();
var href = $(this).attr("href");
$overlay.show();
});
``` js
Le Var Range
Front End Web Development Techdegree Student 18,011 Points<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
<title>Image Gallery</title>
</head>
<body>
<h1>Image Gallery</h1>
<ul id="imageGall">
<li><a href="images/refferal_machine.png"><img src="images/refferal_machine.png" width="100" alt="Refferal Machine By Matthew Spiel"></a></li>
<li><a href="images/space-juice.png"><img src="images/space-juice.png" width="100" alt="Space Juice by Mat Helme"></a></li>
<li><a href="images/education.png"><img src="images/education.png" width="100" alt="Education by Chris Michel"></a></li>
<li><a href="images/copy_mcrepeatsalot.png"><img src="images/copy_mcrepeatsalot.png" width="100" alt="Wanted: Copy McRepeatsalot by Chris Michel"></a></li>
<li><a href="images/sebastian.png"><img src="images/sebastian.png" width="100" alt="Sebastian by Mat Helme"></a></li>
<li><a href="images/skill-polish.png"><img src="images/skill-polish.png" width="100" alt="Skill Polish by Chris Michel"></a></li>
<li><a href="images/chuck.png"><img src="images/chuck.png" width="100" alt="Chuck by Mat Helme"></a></li>
<li><a href="images/library.png"><img src="images/library.png" width="100" alt="Library by Tyson Rosage"></a></li>
<li><a href="images/boat.png"><img src="images/boat.png" width="100" alt="Boat by Griffin Moore"></a></li>
<li><a href="images/illustrator_foundations.png"><img src="images/illustrator_foundations.png" width="100" alt="Illustrator Foundations by Matthew Spiel"></a></li>
<li><a href="images/treehouse_shop.jpg"><img src="images/treehouse_shop.jpg" width="100" alt="Treehouse Shop by Eric Smith"></a></li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
``` html
Steven Parker
243,318 PointsTrying the complete code - it does indeed cover the window with black. It's not transparent, though. For that you'd need to specify the opacity property, or use an rgba color instead of black.
Le Var Range
Front End Web Development Techdegree Student 18,011 Pointsit doesn't make the screen black in the workshop but i will do the whole code and see if that works.
Julien riera
14,665 PointsHello,
Tu parles français ?
Le Var Range
Front End Web Development Techdegree Student 18,011 Pointshello
Tushar Singh
Courses Plus Student 8,692 PointsTushar Singh
Courses Plus Student 8,692 Pointsyou are missing something here, what is it are you appending actually?? It would be really helpful if you could share your code.