systemantics

jQue­ry Co­lum­ni­ze is a plu­gin for the Ja­vas­cript li­bra­ry jQue­ry which al­lows to crea­te a newspa­per-li­ke co­lumn lay­out. The ori­gi­nal HTML co­de on­ly needs small ad­ap­ti­ons. In most ca­ses, it is not ne­cessa­ry to ad­apt the HTML co­de at all.

Do­cu­men­ta­tion

Using the plu­gin is ea­sy:

$("#text").co­lum­ni­ze()

sets the con­tents of the DOM no­de with the ID ›text‹ in a two-co­lumn lay­out with ba­lan­ced co­lumn lengt­hs.

The plu­gin re­co­gni­zes dif­fe­rent op­ti­ons which are de­no­ted in cur­ly brackets.

Op­ti­ons

• ba­lan­ce: ›true‹ if the co­lumn lengt­hs should be ba­lan­ced. ›fal­se‹ if the co­lumns should grow to the height of the con­tai­ning ele­ment. Default: ›true‹
• co­lumn: The CSS class which should be app­lied to co­lumns. Default: ›co­lumn‹
• co­lumns: The de­si­red num­ber of co­lumns if ba­lan­ce mo­de is on. Default: ›2‹
• con­ti­nued: The CSS class which should be app­lied to DOM no­des which are con­ti­nued in the next co­lumn. Default: ›con­ti­nued‹

Tips

If ba­lan­ce mo­de is off, the ele­ment to which the co­lumn lay­out should be app­lied has to de­fi­ne a ma­xi­mum height via the CSS pro­per­ty ›max-height‹. The co­lumns will then grow to at most this height.

If ba­lan­ce mo­de is on, the ma­xi­mum height is ta­ken in­to ac­count, too. If ba­lan­cing the co­lumn lengt­hs would ex­ceed the ma­xi­mum height the plu­gin au­to­ma­ti­cal­ly di­sables ba­lan­ce mo­de. In this ca­se, the plu­gin crea­tes mo­re co­lumns than spe­ci­fied in the co­lumns op­tion.

The co­lumn wid­th is de­ri­ved from the CSS pro­per­ties of the co­lumns. You can con­trol the wid­th using the CSS class spe­ci­fied in the co­lumns op­tion.. Ty­pi­cal pro­per­ties for a co­lumn are the fol­lo­wi­ng:

float: left
wid­th: 200px
mar­gin-right: 1em

For a be­au­ti­ful lay­out it is re­com­men­ded to use the CSS pro­per­ty ›li­ne-height‹. By set­ting the li­ne height ex­pli­cit­ly and cal­cu­la­te all ver­ti­cal di­stan­ces as mul­tip­les of the li­ne height you en­su­re that all ba­se­li­nes are ali­gned to the sa­me grid.

Examp­les

• $("#text").co­lum­ni­ze({co­lumns: 3})
  Three co­lumns with ba­lan­ced co­lumn lengt­hs.
• $("#text").co­lum­ni­ze({co­lumns: 3, ba­lan­ced: fal­se})
  Three co­lumns with ba­lan­ced co­lumn lengt­hs if the co­lumn lengt­hs do not ex­ceed the ma­xi­mum height of the con­tai­ning ele­ment. In this ca­se, the plu­gin aban­d­ons the li­mi­ta­tion to three co­lumns and crea­tes as ma­ny co­lumns as nee­ded for the text.
• $("#text").co­lum­ni­ze({ba­lan­ced: fal­se})
  Co­lumns grow un­til the ma­xi­mum height of the con­tai­ning ele­ment. The num­ber of co­lumns is de­ter­mi­ned by the amount of text.

Li­cen­se

jQue­ry Co­lum­ni­ze is a con­tri­bu­tion to the jQue­ry com­mu­ni­ty and is the­re­fo­re dis­tri­bu­ted as open sour­ce soft­wa­re. The plu­gin is li­cen­sed un­der the GNU Les­ser Ge­ne­ral Pu­blic Li­cen­se.

Dow­n­load

Plea­se go to the pro­ject web­si­te in the jQue­ry plu­gin re­po­si­to­ry to dow­n­load the la­test re­lea­se.

--> website