Now, we'll be attaching the new function to the above logic. However, we're not going to rely on automatic widths for achieving the effect, since they are not rendered in the same manner by the major browsers. So, our alternative solution will be to have the script itself calculate the column widths and manipulate them according to the user's click actions. Going one step further, the function will match the heights of each containing column, rendering a consistent, height-matched layout. Although this last added functionality is not really necessary for making the script work properly, it's good to implement for final visual consistency.
Here's the code for the improved "switchBar()" function:
var navbar,content,headlines,swbar,maxheight, contentWidth,navbarWidth;
Although the code is fairly well commented, let's go over each section to explain what it does. To begin with, the function gets all of the main columns, that is, "navbar," "content," and "headlines," respectively. Surely, you're wondering why we're going to the trouble of getting the "headlines" <div> element? Well, since the script is going to perform a height-matching operation at the end, this element is really needed. If you're using a two-column layout, you should remove the lines that reference the third column to keep the script working. The section below grasps the main <div> elements:
// get navbar element
// get content element
// get headlines element
The next step is to create the "switcher" bar in memory, insert it into the document tree and assign its attributes. We do it in the following way:
// create switcher bar
// assign attributes to switcher bar
// insert switcher bar in document
Now, we calculate the width values for the "navbar" and "content" elements:
Using the "offsetWidth" object property, we get the width values expressed in pixels for each element, which is fairly well supported by modern browsers. Next, we need to assign the "onclick" event handler to the "switcher" bar and hide or show our side navigation bar, alternately. In conjunction, we need to manipulate the "content" column width, according to the state of the "navbar" element.
It's a little messy, but not really difficult to understand. If the "navbar" element is hidden, then we need to add its width value to the width of the "content" column, making it expand to the left and occupy the whole screen space. Otherwise, if the "navbar" element is displayed, the width value of the "content" column is set to its original value. Hopefully, the following code helps to clarify the process described above:
will increase the width of the "content" column, making it expand to the left, while the following expression:
will restore the width to its original size.
At this point, we have the script doing the job for the hide-show sequence when the visitor clicks on the switcher bar. However, we need to match all of the columns' heights, in order for them to be consistently displayed on the page. We manage the height-matching process with the below lines:
// assign greatest height value to containing divs
Here, we calculate the greatest height value of all the columns, and then assign that value to each one of them. As you can see, the process is very simple. Finally, we need to wrap the complete source code into a function that is called when the document is loaded:
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.