What I've Learned (2 of 4)

by Michael Clark
March 20, 2012 10:10 PM

A recent project I've been working on has been the Admissions Checklist - a site for prospective students to track what they've turned in, see deadlines, and get in touch with Admissions. This has been a fairly big project and there have been several things I've had to figure out through trial and error.

One of the first things that stands out to me involves CSS positioning. In the Checklist, we've got three sliding "panels" which the user can alternate between for their profile, FAQs, and contact information.

This is accomplished using postions absolute and relative. In the markup, I have a "container" div with its position set to relative with overflow set to hidden. Setting the container position to relative is necessary to position the panel absolute inside the container, and setting overflow to hidden hides the panel when it's out of view. The container div also gets a positive z-index.

My panel divs are then given an absolute position. By default, I then use Javascript to set the "profile" div to display on load by setting it's position (top, bottom, left, right) attributes and it's z-index to a value greater than the container's. The other two divs - "FAQs" and "Contact" - are then hidden by pushing them right and off the screen and a z-value less than the container's.

When the user clicks to move to a different panel, I use jQuery animate to switch the positions/z-indexes of my panel divs.

It might sound more complicated than it is, but in the end, it provides a nice little user experience.

Add comment

  • Comment
  • Preview