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

Posted by Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Problems on a site with JQuery

Hi I have inherited some code and I am a bit stuck on a JQuery question.

The script on the attached JSFiddle is supposed to make the boxes at the bottom when click load their corresponding image on top of what is already there - click it again and it disappears.

http://jsfiddle.net/Be4Fw/4/

The site is http://www.thegeorgebarton.co.uk/

3 Answers

Sean Templeton
Sean Templeton
12,983 Points
Sean Templeton
Sean Templeton
12,983 Points

You have a couple of issues. First off, there is a syntax error because you have a trailing }) at the end of your javascript;

Secondly, .live is deprecated. Instead, use .on with delegation. This is done by selecting a parent element, calling the "on" function. The first parameter is the event, the second the selector of the element you want to attache the event to, and the third the function to call.

Finally, you didn't have jQuery included.

Check this fiddle out to see the working changes: http://jsfiddle.net/Be4Fw/7/

Graham Davidson
PLUS
Graham Davidson
Courses Plus Student 14,966 Points
Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Hi Sean

Thanks for that, unfortunately that only allows you one click and then stops working. Do you know how to make it so I can click on each box and it have the enlarge pop up.

G

Sean Templeton
Sean Templeton
12,983 Points
Sean Templeton
Sean Templeton
12,983 Points

Yeah, that's a tricky one. Give me a few minutes.

Sean Templeton
Sean Templeton
12,983 Points
Sean Templeton
Sean Templeton
12,983 Points

Ahh, ok. If you look what you were calling to fadeout, you'll see the parent box was still there, even though you couldn't see it. Therefore, you were never actually clicking the boxes again. Here's a working example: http://jsfiddle.net/Be4Fw/8/

Graham Davidson
PLUS
Graham Davidson
Courses Plus Student 14,966 Points
Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Sean Templeton you total genius there is not a big enough thank you possible. Super star