This article series explores the construction of the code browser tool that accompanies the book Learning jQuery, Third Edition.

The first challenge in building the code browser was finding a way to present all of the information required simultaneously. We need to be able to see the JavaScript code side-by-side with the finished product, while at the same time having easy access to the associated HTML and CSS for reference.

In addition, we need controls for navigating among code samples easily. The finished product uses a combination of accordion and splitter widgets to accomplish this.

A combination of HTML, CSS, and JavaScript is needed to put this together. First, the HTML.

Learning jQuery Code Listing Browser

This HTML 5 code sets up divisions for the navigation area, the left pane, and the right pane. Within the left pane we have subdivisions for HTML, CSS, and JavaScript code. There is obviously a significant amount of CSS involved here. The following is the portion of the CSS required for the basic page structure.

#navigation {
  padding: 10px 0;
  height: 20px;
  background-color: #000;
  color: #fff;
}

#left-pane {
  width: 250px;
}
#right-pane {
}

#splitter {
  clear: left;
  height: 100%;
  overflow: hidden;
}
#right-pane > div {
  padding-left: 20px;
  height: 100%;
}
#result {
  width: 100%;
  height: 100%;
  border: none;
}

With this HTML and CSS in place, we have a start at our page layout. There is still more work to do in styling the page, but in this instance we won't care about graceful degradation for users without JavaScript enabled, since all of the code examples rely on JavaScript anyway. So, we'll leave the rest of the styling work to the jQuery plugins we've been using. The accordion widgetAn accordion widget is pretty simple. we simply need to expand one item while collapsing the others. A basic approach is easy to outline:

$(document).ready(function() {
  $('#left-pane h3').click(function() {
    $('#left-pane div:visible').slideUp();
    $(this).next().slideDown();
  });
});

This gets the very rudimentary job done, but there are lots of details left untended. For example:

• Setting up the initially-visible item
• Gracefully handling clicks on the currently-active item
• Keyboard support
• Visual feedback that the titles are clickable
• Expanding the active item to take up as much vertical space as possible
• Various styling enhancements

These are all things we could take care of ourselves, but there's no need to when the jQuery UI project has done the job for us. The jQuery UI accordion widgetis simple to use, and very powerful.

$(document).ready(function() {
  $('#left-pane').accordion({
    fillSpace: true,
    active: 2
  });
]);

A call to .accordion() does almost all the work. The only parameters we have to provide are fillSpace, which makes sure the accordion uses all the vertical space available to it, and active, which lets us tell the widget to reveal the third item (the one containing JavaScript code) initially and to hide the other two.

The splitter widget

The accordion conserves vertical space in the left column. We also want to give the user flexibility, though, in deciding how much of the screen to devote to the source code and how much to the rendered output. A splitter widget will accomplish this. Again, using a jQuery plugin is much more efficient than trying to write the code ourselves. The jQuery UI project doesn't have a candidate to try, but Dave Methvin's splitter plugin will fit the bill nicely. Again, using the plugin couldn't be very much simpler.

$(document).ready(function() {
  $('#splitter').splitter({
    type: 'v',
    anchorToWindow: true,
    cursor: 'col-resize'
  });
});

We are using three parameters in our call to .splitter() to reach the desired effect. The type parameter lets us specify that the splitter will run vertically (splitting the content horizontally). The anchorToWindow parameter ensures that the splitter fills up the entire window height, even when the window is resized.

Finally, the cursor parameter allows us to choose an appearance for the mouse cursor while it is over the splitter, to give the user extra feedback. With these two plugins in place and active, users can now switch between the three source code viewing areas at will using the accordion widget, and resize the source code and output areas using the splitter widget.

Next up, we'll be looking at how we populate these areas with real content.