Yale Daily News Online

By: Michael Boyce (Online Staff)

Jump to Comments

Certain visual elements are repeated frequently on a Web site. On our site, tabs are frequently used as a clean and simple way of displaying related but slightly different information. You can see our implementations on the calendar, crime map and most popular side bar. To make tabs easier to put on our site, especially with their smooth JavaScript implementation that doesn’t require refreshing, we wanted to have a tab template system.

Our model for a tab is simple. There is a wrapper with the class “tab” for the entire box, and then for each actual tab it is in the class “subtab.” Each subtab has a header with the class “subtabtitle” to display the title of the tab, and one more div with the class “subtabbody,” for the content shown when a tab is clicked. It looks like this:

<div class = “tab”>

<div class = “subtab”>

<h3 class= ” subtabtitle”> Title 1 </h3>

<div class =” subtabbody”> text in the first tab</div>

</div>

<div class = “subtab”>

<h3 class= ” subtabtitle”> Title 1 </h3>

<div class =” subtabbody”> text in the second tab</div>

</div>

</div>

The real problem is how one can use this basic design layout and convert it into our standard tab look and feel. The trick is to use JavaScript to traverse and modify the DOM (document object model) or, simply put, to rearrange the HTML. One of the best JavaScript tools to do this is Prototype. Prototype is easily installed and adds a host of more powerful functions to the standard JavaScript library. The most useful ones were related to tranversing the DOM. Two that I found particularly useful were the up and down functions. For example, if I am current at the subtab class element I can easily move to the h3 by typing:

var header = subTab.down(“h3.subtabtitle”)

I can make header move back up just as easily with:

header = header.up(“div.subtab”);

With this header variable one can use other great JavaScript and Prototype functions. One I used frequently was setStyle. For example, say I wanted to change the subtab class to be a font size of 12px, I could just write:

header.setStyle({
fontSize: ‘12px’
});

The one difficulty with using Prototype is that the Prototype functions return an object that uses both standard and Prototype JavaScript functions. However, standard JavaScript functions don’t return these objects. Therefore it is important to remember when you are working with a Prototype object and when you are using a plain JavaScript one. To solve this problem, be sure to wrap any variables with $(foo) to convert it to a Prototype element. Combining some prototype functions (the API is fairly helpful) with crucial DOM functions such as removeChild() and appendChild(). Also setStyle() function was very handy when I wanted to generate precise CSS on the fly (for example if there are so many tabs that they fill a line of the div, a new row of tabs are automatically created).

A final issue was that the JavaScript originally overlaid all the tab content but using CSS hid the content that wasn’t active. This was a problem when forms were in the content, because sometimes multiple empty or default forms would be submitted that the user could see. To solve the problem we set up a dummy property in each element that stored the HTML but wasn’t displayed on the page but could still be called on for retrieving content. This meant that the forms were actually not just hidden by the CSS; they were only added to the DOM when the user clicked on the appropriate tag and the old content was cleared.