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

Positioning table cells outside viewport to slide in with jQuery

My personal landing page is nearly complete, but I'm not sure how to approach this final problem. I have project rows that animate to slide the project images off the screen. This should reveal some additional text about the project while continuing to show the project summary text.

I have the animation already, but I'm not sure how to approach the content which will be hidden outside the viewport. To complicate this, I have rendered each project row as a table to enable me to vertically align my text against the image. (To clarify, the projects are enclosed in divs with display: table, display: table-row, and display: table-cell.)

What is the best way to create some additional cells on my table that will

  1. be just left or right of the viewport (depending on the direction of the slide animation for that row)
  2. have a width that, when added to the width of the project summary, will equal 100% of the viewport
  3. preferably be implemented in CSS rather than JS. (Of course, the animation is done in jQuery, but I would prefer not to rely on it for positioning of these elements.

I have uploaded the current incomplete version of the site to github so you can take a look.

http://raddevon.github.io/personal-site/

https://github.com/raddevon/personal-site/tree/slide-fix

3 Answers

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher

Hey Devon Campbell,

I took a look at the site and I couldn't quite figure out what element you were referring to specifically. Can you clarify? Looks like the site is working properly, so maybe you fixed it. :)

I was able to get it working. I'm sorry. I thought I had posted a follow-up, but I guess I wrote it out and never actually posted it.

I ended up making the table width over 100% and setting the body's overflow-x to hidden. Then, I just re-calculated the percentage widths of the existing cells to be a percentage of the new table width rather than a percentage of the viewport. That worked like a charm.

Thanks for taking a look, Nick Pettit!

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher

Awesome! Glad you were able to make it work!