eZColumns

current release: v1.0.0

How it works - $(selector).ezColumns({options});

eZColumns is a jQuery plugin for newspaper-like columns on the web. It grabs the child elements of a container and organizes them into a top-down, customizable, set of columns.

eZColumns Properties
Arguments Type Description
colWrapper string or DOM object The HTML wrapper for each column. Default: <div class="col"></div>
target DOM object The target element to append the columns. Default: plugin selector
groups DOM object collection A collection of DOM objects to organize into columns. Default: plugin selector children
columns string The max number of columns to use. Default: 3
callback function A function to run after the plugin finishes appending all elements to the DOM.

Setup

Include Dependencies

<!-- somewhere in the html head -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="javascript/jquery.ezColumns.js"></script>

Examples

Basic Example

Sample JavaScript

$("#groups").ezColumns();

Sample HTML

<style>
   #groups {overflow:hidden;} 
   .col{float:left; width:20%; padding:5px; background:#C6F; margin-right:10px;}
</style>

<div id="groups">
<p>A - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
<p>B - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
<p>C - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
<p>D - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
<p>E - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
<p>F - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
<p>G - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
<p>H - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero</p>
</div>

Results: Notice the first letter of each paragraph. It shows how the columns are organized top-down.

A - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

B - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

C - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

D - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

E - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

F - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

G - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

H - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

Example with 4 columns and custom column template

JavaScript

$("#groups").ezColumns({columns: 4, colWrapper: '<div class="col" style="background: black; color:white;"></div>'});

Before Plugin

A - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

B - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

C - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

D - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

E - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

F - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

G - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

H - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

Results after plugin

A - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

B - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

C - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

D - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

E - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

F - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

G - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

H - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis libero

Example with data option and search ability

JavaScript

$(function(){
// group parent selector
$(".list").ezColumns({colWrapper: '<ul class="col"></ul>', target: $(".countries")});

jQuery.expr[':'].Contains = function(a,i,m){
return (a.textContent || a.innerText || "").toLowerCase().indexOf(m[3].toLowerCase())>=0;
};
// or use :StartsWith() jQuery.expr[':'].StartsWith = function(a,i,m){
return (a.textContent || a.innerText || "").toLowerCase().indexOf(m[3].toLowerCase())== 0;
};

$("#search").bind("change keyup", function(){
var filter = jQuery.trim($(this).val());

var LIs = false;
if(filter){
LIs = $(".list").data("groups").clone().filter(":Contains(" + filter + ")");
} else {
LIs = $(".list").data("groups").clone();
}
$(".list").ezColumns({groups: LIs, colWrapper: '<ul class="col"></ul>', target: $(".countries")});
LIs = null;
});
});

Sample HTML

<form>
<p><label>Search Countries: <input id="search" type="text"></label></p> </form> <div class="countries"></div>
<ul class="list"> <li>Afghanistan</li> <li>Albania</li> <li>Algeria</li> <li>American Samoa</li> <li>Andorra</li> <li>Angola</li> <li>Anguilla</li> <li>Antarctica</li> <li>Antigua and Barbuda</li> <li>Argentina</li> <li>Armenia</li> <li>Aruba</li> <li>Australia</li> <li>Austria</li> <li>Azerbaijan</li> <li>Bahamas</li> <li>Bahrain</li> <li>Bangladesh</li> <li>Barbados</li> <li>Belarus</li> <li>Belgium</li> <li>Belize</li> <li>Benin</li> <li>Bermuda</li> <li>Bhutan</li> <li>Bolivia</li> <li>Bosnia and Herzegovina</li> <li>Botswana</li> <li>Bouvet Island</li> <li>Brazil</li> <li>British Indian Ocean Territory</li> <li>Brunei Darussalam</li> <li>Bulgaria</li> <li>Burkina Faso</li> <li>Burundi</li> <li>Cambodia</li> <li>Cameroon</li> <li>Canada</li> <li>Cape Verde</li> <li>Cayman Islands</li> <li>Central African Republic</li> <li>Chad</li> <li>Chile</li> <li>China</li> <li>Christmas Island</li> <li>Cocos (Keeling) Islands</li> <li>Colombia</li> <li>Comoros</li> <li>Congo</li> <li>Congo, The Democratic Republic of The</li> <li>Cook Islands</li> <li>Costa Rica</li> <li>Cote D'ivoire</li> <li>Croatia</li> <li>Cuba</li> <li>Cyprus</li> <li>Czech Republic</li> <li>Denmark</li> <li>Djibouti</li> <li>Dominica</li> <li>Dominican Republic</li> <li>Ecuador</li> <li>Egypt</li> <li>El Salvador</li> <li>Equatorial Guinea</li> <li>Eritrea</li> <li>Estonia</li> <li>Ethiopia</li> <li>Falkland Islands (Malvinas)</li> <li>Faroe Islands</li> <li>Fiji</li> <li>Finland</li> <li>France</li> <li>French Guiana</li> <li>French Polynesia</li> <li>French Southern Territories</li> <li>Gabon</li> <li>Gambia</li> <li>Georgia</li> <li>Germany</li> <li>Ghana</li> <li>Gibraltar</li> <li>Greece</li> <li>Greenland</li> <li>Grenada</li> <li>Guadeloupe</li> <li>Guam</li> <li>Guatemala</li> <li>Guinea</li> <li>Guinea-bissau</li> <li>Guyana</li> <li>Haiti</li> <li>Heard Island and Mcdonald Islands</li> <li>Holy See (Vatican City State)</li> <li>Honduras</li> <li>Hong Kong</li> <li>Hungary</li> <li>Iceland</li> <li>India</li> <li>Indonesia</li> <li>Iran, Islamic Republic of</li> <li>Iraq</li> <li>Ireland</li> <li>Israel</li> <li>Italy</li> <li>Jamaica</li> <li>Japan</li> <li>Jordan</li> <li>Kazakhstan</li> <li>Kenya</li> <li>Kiribati</li> <li>Korea, Democratic People's Republic of</li> <li>Korea, Republic of</li> <li>Kuwait</li> <li>Kyrgyzstan</li> <li>Lao People's Democratic Republic</li> <li>Latvia</li> <li>Lebanon</li> <li>Lesotho</li> <li>Liberia</li> <li>Libyan Arab Jamahiriya</li> <li>Liechtenstein</li> <li>Lithuania</li> <li>Luxembourg</li> <li>Macao</li> <li>Macedonia, The Former Yugoslav Republic of</li> <li>Madagascar</li> <li>Malawi</li> <li>Malaysia</li> <li>Maldives</li> <li>Mali</li> <li>Malta</li> <li>Marshall Islands</li> <li>Martinique</li> <li>Mauritania</li> <li>Mauritius</li> <li>Mayotte</li> <li>Mexico</li> <li>Micronesia, Federated States of</li> <li>Moldova, Republic of</li> <li>Monaco</li> <li>Mongolia</li> <li>Montserrat</li> <li>Morocco</li> <li>Mozambique</li> <li>Myanmar</li> <li>Namibia</li> <li>Nauru</li> <li>Nepal</li> <li>Netherlands</li> <li>Netherlands Antilles</li> <li>New Caledonia</li> <li>New Zealand</li> <li>Nicaragua</li> <li>Niger</li> <li>Nigeria</li> <li>Niue</li> <li>Norfolk Island</li> <li>Northern Mariana Islands</li> <li>Norway</li> <li>Oman</li> <li>Pakistan</li> <li>Palau</li> <li>Palestinian Territory, Occupied</li> <li>Panama</li> <li>Papua New Guinea</li> <li>Paraguay</li> <li>Peru</li> <li>Philippines</li> <li>Pitcairn</li> <li>Poland</li> <li>Portugal</li> <li>Puerto Rico</li> <li>Qatar</li> <li>Reunion</li> <li>Romania</li> <li>Russian Federation</li> <li>Rwanda</li> <li>Saint Helena</li> <li>Saint Kitts and Nevis</li> <li>Saint Lucia</li> <li>Saint Pierre and Miquelon</li> <li>Saint Vincent and The Grenadines</li> <li>Samoa</li> <li>San Marino</li> <li>Sao Tome and Principe</li> <li>Saudi Arabia</li> <li>Senegal</li> <li>Serbia and Montenegro</li> <li>Seychelles</li> <li>Sierra Leone</li> <li>Singapore</li> <li>Slovakia</li> <li>Slovenia</li> <li>Solomon Islands</li> <li>Somalia</li> <li>South Africa</li> <li>South Georgia and The South Sandwich Islands</li> <li>Spain</li> <li>Sri Lanka</li> <li>Sudan</li> <li>Suriname</li> <li>Svalbard and Jan Mayen</li> <li>Swaziland</li> <li>Sweden</li> <li>Switzerland</li> <li>Syrian Arab Republic</li> <li>Taiwan, Province of China</li> <li>Tajikistan</li> <li>Tanzania, United Republic of</li> <li>Thailand</li> <li>Timor-leste</li> <li>Togo</li> <li>Tokelau</li> <li>Tonga</li> <li>Trinidad and Tobago</li> <li>Tunisia</li> <li>Turkey</li> <li>Turkmenistan</li> <li>Turks and Caicos Islands</li> <li>Tuvalu</li> <li>Uganda</li> <li>Ukraine</li> <li>United Arab Emirates</li> <li>United Kingdom</li> <li>United States</li> <li>United States Minor Outlying Islands</li> <li>Uruguay</li> <li>Uzbekistan</li> <li>Vanuatu</li> <li>Venezuela</li> <li>Viet Nam</li> <li>Virgin Islands, British</li> <li>Virgin Islands, U.S.</li> <li>Wallis and Futuna</li> <li>Western Sahara</li> <li>Yemen</li> <li>Zambia</li> <li>Zimbabwe</li> </ul>

Results

Latest Source

Changelog

Documentation was last modified on 25 October 2011 at 11:51 PM
1.07.2011 Version 1.0.0
Initial Release