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

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

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

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

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...

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!