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

Alex Chow
Alex Chow
4,521 Points
Posted by Alex Chow
Alex Chow
4,521 Points

Jquery Reveal Script

Hi everyone,

I'm new to java and would like to get a resolution to a problem I have for my personal portfolio website. I'll try to explain the situation to best of my ability.

i'm using a jquery plug-in created by Zurb. The problem I have is the way it's setup. He/she made the body of the site and the “reveal” overlay fixed together so when the user scrolls up or down, everything moves. This becomes an issue for me because if my “reveal” overlay is very long to show content, I start on the top of the site and end at the bottom when releasing it and have to scroll back to the section I left off at. The way I would like it to work is similar to the website behance (https://www.behance.net/search). If you click on any of the thumbnails, they have the body of the site fixed and only the overlay moves when scrolling. If there is anyway I can fix this, I would be very grateful.

I have shared a link of the original jquery script: https://www.dropbox.com/sh/ey53detum5ke032/AACXPdw0xnI9OY5N169y-Vb5a

Thank you!

1 Answer

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

I've made a CodePen to try and illustrate how a reveal/lightbox would work. Feel free to reuse anything you need to. I'll work on commenting through it and fixing a few other issues right now.

Alex Chow
Alex Chow
4,521 Points
Alex Chow
Alex Chow
4,521 Points

Awesome, thank you! I'll try to implement this into my code.

Alex Chow
Alex Chow
4,521 Points
Alex Chow
Alex Chow
4,521 Points

Hi Ryan,

I wanted to know if you could help troubleshoot something for me.

I finally had time to sit down and work on this but I'm not getting the desired result. I'm using sublime and have copied and pasted all the code you had in your codepen file. When I link everything and try it myself in the browser, the pop-over does not come up. I noticed it says coffeescript in the JS column and since I'm relatively new to this whole thing, is this causing some compatibility issue for me? I have attached the files here: https://www.dropbox.com/sh/1v8es7zk685r66o/AABpw-NVADsV-9QrraNUoRZOa. I'm probably making a silly mistake...

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

Whoops! So sorry about that! I use the CoffeeScript precompiler normally, and have it enabled by default on my CodePen.

I updated the pen to use vanilla JavaScript. Copy-pasting should work now!