Tag Archives: width

How to Use Percentage Sizes for Your FancyBox CodeUnit 13 OCT 2012

I’m a huge fan of the jQuery-driven FancyBox and make use of it in just about all of my web development work.

This is a handy little trick to use percentage (%) values for a fancybox implementation’s width and height, thereby making it easier to specify a fancybox that will work regardless of screen size.

(If you are familiar with fancybox then you are aware that it requires height and width values to be passed to it as pixel values.)

Note that I’m assuming that you are making use of the wonderful jQuery JavaScript library here.

//setting a width of 90% and a height of 75%
var fbwidth = Math.ceil(($(document).width()*90)/100);
var fbheight = Math.ceil(($(document).height()*75)/100);

$('#versioninghistory').fancybox({'type':'iframe','autoScale':true, 'width': fbwidth, 'height':fbheight, 'centerOnScroll':true});

Looking at the snippet above, you’ll see that we are first calculating the pixel value of the desired percentage value based on either the screen width or height (using jQuery’s document related functions), and then passing it through to the fancybox declaration.

Nifty.

jQuery DataTables: How to Force Specific Column Widths CodeUnit 16 AUG 2010

I’ve mentioned the wonderful jQuery plugin DataTables a number of times before, the awesome little trick that instantly transforms any HTML table fed to it into a fully sortable, paginated, searchable and zebra-striped table, requiring the most minimum of coding to implement.

Today’s tip looks at how you can specify what column widths to use in your DataTables implementation, instead of relying on the default auto column widths assigned by the plugin.

Firstly, you need to turn off DataTable’s built in auto column width calculator by feeding it a false value for the bAutoWidth switch when initialising your DataTable object. Next, you need to feed the column widths you wish to use directly into the initialization by means of the aoColumns definitions, making use of the sWidth switch to specify the width.

Looking at this in code, you should now have:

$('#activitylog').dataTable( {
"bAutoWidth": false,
"aoColumns": [{"sWidth":"60%"},{"sWidth":"20%"},{"sWidth":"20%"}]
} );

Nifty.

Related Link: http://datatables.net/

PHPExcel: How to Set the Width of Cells CodeUnit 12 JUL 2010

PHPExcel is a phenomenal Excel generating library for PHP which I have mentioned on this site numerous times before, and which is currently my defacto way for quickly knocking out all those annoying Excel downloads that clients always seem to MUST have! ;)

Today’s quick code tip is on how to specify or set the width of individual columns in your worksheet.

In order to do this, we make use of the handy setWidth function that allows us to specify the width of our targeted column using the standard Excel column width units.

So let’s see this in code then:

$workbook = new PHPExcel;
$sheet = $workbook->getActiveSheet();
$sheet->getColumnDimension('A')->setWidth(15);
$sheet->getColumnDimension('B')->setWidth(30);
$sheet->getColumnDimension('C')->setWidth(45);
$writer = new PHPExcel_Writer_Excel5($workbook);
header('Content-type: application/vnd.ms-excel');
$writer->save('php://output');

And there you go, as simple as that!

Related Link: http://phpexcel.codeplex.com