Smart Columns w/ CSS & Prototype
From time to time HotWax Media’s open source ERP (Apache OFBiz) business analysts and developers will use this blog to sound off on technical issues related to e-commerce, ERP, order management, accounting, user interfaces, and related topics. The following post is just such an example.
Warning: this is not for the technically faint of heart. If your eyes begin to glaze over, quickly hit the back button, take solace in the fact that HotWax Media makes it our business to handle all of your technical needs related to open source ERP, and contact us today.
The great debate of jQuery vs. Prototype has been raging for quite some time now, with many different voices offering their opinions on the matter. It does seem that JQuery has the current lead over the venerable Prototype. If you compare the amount of plugins offered up by JQuery to those that extend Prototype, it is clear JQuery appears to have much more community design and development support.
I would offer some (somewhat biased) mediation on the debate and say “What’s the big deal? In the end, it’s still just javascript.” In other words, to completely butcher Shakespeare, “A rose by any other name, will still make a button submit an Ajax form.”
We javascript developers, and indeed web developers in general, tend to be a fickle bunch. We are always attracted to the latest new and shiny technology, hence all of the excitement and support for JQuery. However, you can pretty much do anything in Prototype that you can do with JQuery.
So, in an effort to show Prototype some love, I would like to show you, in the first of a multi-part series, how to take a cool JQuery trick and replicate (and sometimes improve) it with Prototype.
Soh Tanaka’s recent blog about about creating Smart Columns w/ CSS & JQuery has been getting a lot of play around the internet lately, so I thought we could start there. In this tutorial, I will demonstrate how to create “Smart Columns” using the Prototype Framework instead.
We’ll start by creating our external javascript file. Let’s call it smartcolumns.js. We will take an Object Oriented approach and use Prototype’s awesome Class.create() method to set up our functions.
SmartColumns = Class.create({
initialize: function(){
this.position();
Event.observe(window,'resize',this.position.bind(this));
},
position: function(){
var columns = $('columns');
$(columns).setStyle({
width: '100%'
});
this.resize();
},
resize: function(){
var columns = $('columns');
var dimensions = $(columns).getDimensions();
var colWrap = $(dimensions).width;
var colNum = Math.floor(colWrap / 200);
var colFixed = Math.floor(colWrap / colNum);
$(columns).setStyle({
width: colWrap + 'px'
});
$$('.column-block').each(function(elm) {
$(elm).setStyle({
width: colFixed + 'px'
});
});
}
});
Now lets add some CSS (we’ll just copy Soh’s styling so that we can have a side by side comparison).
body {
margin: 0;
padding: 0;
font-size: 10px;
font-family: Arial, Verdana, Helvetica, sans-serif;
line-height: 1.8em;
background: #695e53;
}
img {border: none;}
a {color: #423b35;}
* {margin: 0; padding: 0;}
h1,h2{ font-weight: normal; margin: 10px 0; padding: 10px 0;}
h1 {
font-size: 4em;
padding: 15px 5%;
margin: 0 auto;
background: #2b221b;
line-height: 1em;
color: #e3e1d5;
border-bottom: 1px solid #1b140e;
}
.container {
padding: 10px 5%;
}
ul.column{
width: 100%;
padding: 0;
margin: 10px 0 50px;
list-style: none;
}
ul.column li {
float: left;
width: 200px;
padding: 0;
margin: 5px 0;
display: inline;
}
.block {
height: 355px;
font-size: 1em;
margin-right: 10px;
padding: 20px;
background: #e3e1d5;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.block h2 {
font-size: 1.8em;
}
.block img {
width: 89%;
padding: 5%;
margin: 0 auto;
background:#fff;
-ms-interpolation-mode: bicubic;
display: block;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
Finally, let put it all together. Add your CSS and Javascript to your document. Again, we’ll will just use the original example’s markup for comparison, and we’ll load in Prototype using Google’s AJAX Libraries API for convenience.
That’s all there is to it folks. Take a look at the finished product and compare it to the original. Big thanks to Soh Tanaka for the inspiration to this tutorial.
If you have made it this far, you must be a ninja! HotWax Media offers training and support to get you and your team up and running on Apache OFBiz as quickly as possible, so contact us and let us know if we can support your open source e-commerce and ERP efforts!
– Ryan
Ryan Foster is a designer and OFBiz developer for HotWax Media.
