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 jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 1

Mark Bradshaw
PLUS
Mark Bradshaw
Courses Plus Student 7,658 Points
Posted by Mark Bradshaw
Mark Bradshaw
Courses Plus Student 7,658 Points

I can't get event.preventDefault(); to work.

I'm trying to get prevent the user from being taken to a dead end when they click on a pick in my image gallery so I've used event.preventDefault() within the .click() method. This is not working. Any ideas?

Here's my jquery code: 

$("#imageGallery a").click(function(event){
event.preventDefault();
var href = $(this).attr("href");
$overlay.show();
});
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Mark,

Are you saying that when you click on the link you're taken to the url?

Can you post the html that you have for this part of the code?

One thing you can try is to put a console.log statement at the top of the handler and see if you're even seeing that in your console.

Mark Bradshaw
Mark Bradshaw
Courses Plus Student 7,658 Points
Mark Bradshaw
Mark Bradshaw
Courses Plus Student 7,658 Points

Here's my html and css code. Notice the id under my first header: 

<!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="imageGallery">
        <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>

CSS code: 

body {
    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:rgba(0,0,0,0.7);
  width:100%;
  height:100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

So is it going to the url when you click?

Did you try putting in a console log statement like I mentioned?

6 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

I took the HTML, CSS & JSyou had and put in in JSBin.

I then defined the overlay and appended it to the body

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

Finally I added in console.log(href);to the click function to see the value of the href

You can check it out for yourself: http://jsbin.com/wovepa/1/edit?js,console,output

The only issue I had was originally I used

var $overlay = '<div id="overlay"></div>';

Note the missing parentheses around the div, that will throw an error.

Mathias Menzl
Mathias Menzl
7,366 Points
Mathias Menzl
Mathias Menzl
7,366 Points

have same issue. In Firefox it works, in Chrome it doesn't. What could be the reason?

Dimitris Sotiris Tsolis
Dimitris Sotiris Tsolis
28,141 Points
Dimitris Sotiris Tsolis
Dimitris Sotiris Tsolis
28,141 Points

This code seems correct. I'd check for typos in the rest of the code. Maybe you accidentally mistyped "imageGallery" (?)

Mark Bradshaw
Mark Bradshaw
Courses Plus Student 7,658 Points
Mark Bradshaw
Mark Bradshaw
Courses Plus Student 7,658 Points

I'm using chrome and I checked the setting to make sure that Javascript is enabled. It is. Have you ran into this problem with jquery before?

Dimitris Sotiris Tsolis
Dimitris Sotiris Tsolis
28,141 Points
Dimitris Sotiris Tsolis
Dimitris Sotiris Tsolis
28,141 Points

No i haven't. In fact, i made a simple html page right now and tested it. Though, i have ran into a problem many times (when developing without an IDE) where i wrote something like this

<!-- Notice the misspelled id -->
<ul id="imaegGallery">
...
</ul>

.....
<script>
$("#imageGallery a").click(function(event) { 
...
});
</script>
Mark Bradshaw
Mark Bradshaw
Courses Plus Student 7,658 Points
Mark Bradshaw
Mark Bradshaw
Courses Plus Student 7,658 Points

This was very helpful. Thanks. I still can't get it to work. Weird.

Jeremy Woodbridge
Jeremy Woodbridge
25,278 Points
Jeremy Woodbridge
Jeremy Woodbridge
25,278 Points

Try this code and see if the "href" for the images are being called to the console. Also the browser should not open image links when ran if correct

$("#imageGallery a").click(function(event){
   event.preventDefault();
   var href = $(this).attr("href");
   console.log(href);
Mark Bradshaw
Mark Bradshaw
Courses Plus Student 7,658 Points
Mark Bradshaw
Mark Bradshaw
Courses Plus Student 7,658 Points

Thanks for the response Jeremy. This is an old question. I was able to figure out what the problem was with my code.

RG Coders
RG Coders
3,990 Points
RG Coders
RG Coders
3,990 Points

This worked for me: 1) Double check your code for typos, etc. If it looks good, save it again. 2) Close the Treehouse Image Gallery/Preview Window. 3) In Workspaces, hit the Preview icon (upper right corner) to open a new/refreshed copy of the Image Gallery window. 4) Click on any image in the gallery. At this point, it all worked for me: a) the browser's default behavior was "prevented." b) the correct code was showing in the JavaScript console.

I hope this helps :)