fluwi is a small jQuery plugin that:
- takes a div(or any other element) and for specified element class resizes all elements so that they fit to container.
For example:
We have a variable width ul (eg:ul with id = mydiv)
and this ul has a lot of floating(eg:left) li's with a width of lets say 100px.
Normaly if the size of container is let's say 478px, on a row there
will be 4 li's(4*100 = 400). It remains a space of 78 pixels width that
is empty.
To fill that empty space just resize all li's to have a new width (eg: 478/4).
That's it.
Just include the plugin code in the page an call'it like this:
//The plugin code:
(function($){
$.fn.extend({
fluwi: function(opt){
var variate = ((opt.variate!= undefined)?opt.variate:0);
var contWidth = this.outerWidth();
var boxWidth = opt.minWidth;
var counted = Math.floor(contWidth/boxWidth);
var extra = contWidth-boxWidth*counted;
var eachOne = extra/counted;
$(opt.boxQuery).css("width", (parseInt(boxWidth)+(eachOne))-variate);
}
});
})(jQuery);
// The plugin call code
$('#mydiv').fluwi({
minWidth: 200, //pixels
variate: 2, //pixels
boxQuery: 'li' //class name or div name, or selector for elements that are resizing
});
Enjoy! |