Understanding the Inside Out left column

13October2010

Written by Administrator

Democontent - Setting Up

One of the striking things about this template is the menu you can see in the left column. The menu is fixed in its position so that regardless of where you are on the content page you will always have access to the menu items.

One of the key considerations in using fixed dynamic fixed elements in web design is that to make sure that the element is never longer than the browser window or that if it is there is a work around in place. This is crucial because when a fixed element such as a menu extends beyond the browser window then the menu items that are below the browser window are not accessible to the user.

So the Inside Out template establishes a few different scenarios via some nifty javascript that tests the height of the left column to see if its smaller or taller than the browser window and implements either a fixed positioned menu (if the contents are smaller) or an absolutely positioned menu (if the contents are taller). The javascript for this function is in the templates/insideout/js/template.js file.

The menu in a fixed state.

The end result being that when the menu is smaller it's fixed in position and it stays at the same place regardless of where you are on the page as per the screenshot below. Notice that there is plenty of room in between the left menu and the bottom of the browser window.

The menu in an absolutely positioned state.

While if it's taller then it becomes absolutely positioned and scrolls as per the normal behaviour of elements that are not fixed in position. Notice that the left menu items extend beyond the browser window.

As you scroll down the page the left column moves upwards.

You can test this on the page by resizing the browser window to see the menu switch between fixed and absolute mode.

* Please note: because ie6 lacks the intelligence to understand the nature of the fixed position and despite there being some techniques that you can use to encourage it to used fixed positions for elements we have decided to give it an absolute position at all times.

Please note that the Inside Out template has an option to transform the left column so that it is either fixed or scrolls - this has been implemented for use with the panel menu. Given that the panel menu contents are dynamic - the height of the module changes - depending on which tabs are open, it's not possible to calculate the dynamic changes and therefore toggle the left column between absolute or fixed in its position.

If you are using a panel menu that never extends below the browser window eg it only has a few menu items in each panel - then you may like to keep the default behaviour (left column dynamic) otherwise it's recommended to set this option to "scrolling" in order to avoid having the menu items slip below the browser window.