Every quarter or so my husband, Cal, puts on an all day virtual conference called Day Camp 4 Developers. Of course this endeavor was in need of a website to give information and take registrations. The registration part was easy as we use a 3rd party service, but what to do with such a simple website.

Cal decided he wanted one page to display four different panels of information which answer the questions What, When, Where and How (the Who was obvious). My approach was to create one scrolling page containing four blocks of content. This was actually very simple using HTML, CSS and a little jQuery.

I started with one all containing div tag and made it rather large (1620 pixels square). That tag contains four other div tags (800 x 800) which are absolutely positioned so they appear in a grid. Using jQuery’s animate command each block moves when you click on the arrow. The arrow points to the next block.

The trickiest part was doing the math and discovering how many pixels to move each block, taking in to account the margins.

The results can be seen on DayCamp4Developers.com

This entry was posted on Tuesday, August 2nd, 2011 at 6:29 am and is filed under Blog. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.