Prototype MultiColumn Reading Layout (Version 2)

by Brian R. Miedlar.   Last updated on 11/21/2009.

An alternative layout for a large amount of text might be to present the text in a multi-column, paging format. A decent library, called codex by Sumul Shah (here), experiments with an alternative reading layout.

I ported the code over and added some new features so that it will work with behaviours and provide more control over the number of columns.

Version 2 runs on the Prototype 1.6.1 library and utilizes the improved CSS selectors to handle injected behaviours.

MultiColumn Reading Layout with Prototype 1.6.1

Following is code showing how to replace a given html element with a multi-column reading layout.

The MultiColumn constructor is called with two arguments, the first being the element to redraw into columns, the second being the observer for callbacks.

The update call takes three arguments:

  • columns: tells the MultiColumn manager how many columns to split
  • multiPageSets: If set to true then new page sets will be created when the text overflows the container element. If set to false the document will try to best fit into the number of columns using as much height as needed.
  • showNavigation: this will automatically put the next and previous buttons on the page if you don't want to manually override this.

AppBehavior.MulticolumnUpdated = function() { //Allows observation callbacks } AppBehavior.Rules = { '.multicolumn-2-onepage' : function(element) { //Load the multi column view with 2 columns, no paging var contentMulti = new MultiColumn(element, ModelBehavior); contentMulti.update(2, false, false); }, '.multicolumn-2' : function(element) { //Load the multi column view with 2 columns and paging var contentMulti = new MultiColumn(element, ModelBehavior); contentMulti.update(2, true, true); }, '.multicolumn-3-onepage' : function(element) { //Load the multi column view with 3 columns, no paging var contentMulti = new MultiColumn(element, ModelBehavior); contentMulti.update(3, false, false); } } OS.RegisterBehaviour(AppBehavior.Rules);

Loading the MultiColumn library

My scripts requires the following standard javascript imports to be made before using the OS platform.

  • prototype/prototype.js
  • os.js (defines behaviour registration)

I then use behaviours to load the necessary code dependencies.

  • model/multicolumn.js (this is the multicolumn model)
  • behavior/application.js (this code injects the microformats and creates the carousel behaviours)

Example and Code

View a sample of 2 columns without paging here

View a sample of 3 columns without paging here

View a sample of 2 columns with paging here

Download the sample code here

Comments

Nickname:
Message:
Post Message