Search Results columnizer

Important update for Columnizer – Internet Explorer 6 and 7 are now both fully supported. Head over to the project page for download links and more info.

Read more...

Small update to Columnizer and sample files: Ability to set column pixel width or static number of columns Column contents are constantly regenerated during resize instead of only during adding or removing a column Inline CSS for columns no longer includes padding The Plugin Check out the Columnizer Project Page for download links and the latest news. Check out the firstand second sample pages to see a fluid newspaper layout in action. Resize your browser window to see columns be automatically added based on available space. The new third sample page shows forced static number of columns instead of dynamic columns. The Columnizer Plugin can handly any html div, and can layout text, images, links, and nested tags into multiple columns on the fly. The Code The default setting lets you specify a column width, and Columnizer will auto add/remove columns of roughly that width to fill the browser window.

  $(function(){  $('.wide').columnize({width:400});  $('.thin').columnize({width:200});  });  

Or – you can specify a static number of columns for your content:

  $(function(){  $('.wide').columnize({columns:2});  $('.thin').columnize({columns:4});  });  

Styling your columns When Columnizer generates columns, it gives each column a “column” CSS class. The first column also gets a “first” class, and the last column gets a “last” class. The 1.0.1 update no longer includes inline padding, so you can specify whatever your preference in your own stylesheet. To style your columns, just use:

  .first .column { }  .last .column { }  .column { padding: 3px; }  

Read more...

Until we get native CSS support for multi-column newspaper-style layouts (and draft documents from a year ago don’t give too much hope…), our choices are limited to static column markup, and as has been discussed, there are problems with all of these solutions: Text doesn’t wrap from column to column Images and tables can’t easily span multiple columns But the primary problem with these static column layouts, is that they break down when viewed on a variety of widths. There’s no good way to have multiple dynamic columns for your content. Viewing your webpage on your high resolution wide screen monitor? Wouldn’t it be nice to see it in 4 neat columns instead of 2 extremely wide columns? Viewing on your iPhone? 4 columns is impossible to read! What’s needed is to adapt to the user’s screen width, and allow content to easily be resized and refit to as many columns as needed. What’s needed is the JQuery Columnizer Plugin. The Plugin Check out the Columnizer Project Page for download links and the latest news. Check out the sample page (mostly text) and the second sample (text, links, images) to see a fluid newspaper layout in action. Resize your browser window to see columns be automatically added based on available space. The Columnizer Plugin can handly any html div, and can layout text, images, links, and nested tags into multiple columns on the fly. The Code So how does it work? Make sure your site is using JQuery (who isn’t?). Then, just use the newly available columnize() function, passing in an optional width:

   $(function(){   $('.wide').columnize({width:400});   $('.thin').columnize({width:200});   });   

That’s it! Your text is now columnized with only 1 line of code! Styling your columns When Columnizer generates columns, it gives each column a “column” CSS class. The first column also gets a “first” class, and the last column gets a “last” class. To style your columns, just use:

   .first.column { }   .last.column { }   .column { }   

Where Did It Come From? Buck Wilson and I wrote it over the past few days.

Read more...