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
Devon Campbell
2,225 PointsPositioning 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
- be just left or right of the viewport (depending on the direction of the slide animation for that row)
- have a width that, when added to the width of the project summary, will equal 100% of the viewport
- 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.
3 Answers
Nick Pettit
Treehouse TeacherHey 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. :)
Devon Campbell
2,225 PointsI 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
Treehouse TeacherAwesome! Glad you were able to make it work!