Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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

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/

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

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

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/

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