A couple of weeks ago I talked about creating multi column lists using a simple jQuery plugin I had written.
Browsing some of my favourite blogs today, I stumbled upon this article by Trent Walton. The techniques shown in the article could be used to reproduce the exact same effect using pure CSS, as Borat would say “Very Nice!..”.
Just to recap the basic technique:
ul {
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-moz-column-count: 3;
-moz-column-gap: 20px;
-o-column-count: 3;
-o-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
Would produce 4 equal columns with a 20px gutter (see Trent’s article for more detail).
Creating the same effect using my jQuery plugin:
$(document).ready(function() {
$('ul').multilists({ cols: 3 });
});
Obviously, using pure CSS is the preferred option, but it’s good to have a fallback for users whose browsers don’t support the property. This is possible using the fantastic Modernizr library. Here is a basic implementation (un-tested, sorry!):
The CSS:
ul li {
float: left;
margin-right: 20px;
}
.csscolumns ul {
margin-right: 0; /* margin removed in favour of column-gap */
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-moz-column-count: 3;
-moz-column-gap: 20px;
-o-column-count: 3;
-o-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
See more about the .csscolumns class here.
The JavaScript:
$(document).ready(function() {
if (!Modernizr.csscolumns) {
$('ul').multilists({ cols: 3 });
}
});
Obviously, this assumes you have jQuery, Modernizr & my MultiLists plugin referenced in your code.
National Capitol Columns by cliff1066
The above basically tells the browser to render the list using the CSS property if it is supported, and if not, use the plugin as a fallback.
Please leave a comment if you have any thoughts or comments, or, if you’ve noticed an obvious mistake and feel like putting me right! :$
now your tracking code will only display when you’re not logged into the WordPress control panel – no matter what IP you use.
