Resizing width depending on $(window).width
Hi there, once again I need help ^^' I've recently start using Flexigrid (old JQuery grid plugin), and, as you may know, one of the few issue this really good grid plugin got is the lack of liquid layout option. My personal idea to solve the problem is to set the "width" parameter depending on $(window).width.
Here is the problem (and here's why i post this question in "General use" and not in "Plugin").
The starting, and working, code is:
- $(document).ready(function(){
$("#flex1").flexigrid
(
{
url: '/catalogo/post2.php',
dataType: 'json',
colModel : [
{display: 'Codice', name: 'Codice', width : 42, sortable : true, align: 'center'},
{display: 'Varietà', name: 'Varieta', width: 156, sortable : true, align: 'center', process: capitalize},
{display: 'Data<br/>emanazione', name: 'Data_emanazione', width: 72, sortable : true, align: 'center'},
{display: 'Sinonimi', name: 'Sinonimi', width : 100, sortable : false, align: 'center', process: capitalize},
{display: 'Annotazioni', name: 'Annotazioni', width : 100, sortable : false, align: 'center'},
{display: 'Gazzetta<br/>ufficiale', name: 'Gazzetta', width : 60, sortable : false, align: 'center'},
{display: 'del', name: 'Anno_gazzetta', width : 60, sortable : true, align: 'center'}
],
LOL, well, actually while i was writing this question i find a possible solution:
- $(document).ready(function(){
if ($(window).width() < 1000) {$prova = [38,86,66,86,86,58,58];}
else if ($(window).width() > 1200) {$prova = [42,156,66,170,170,58,58];}
else {$prova = [42,156,66,110,110,58,58];}
$("#flex1").flexigrid
(
{
url: '/catalogo/post2.php',
dataType: 'json',
colModel : [
{display: 'Codice', name: 'Codice', width : $prova[0], sortable : true, align: 'center'},
{display: 'Varietà', name: 'Varieta', width : $prova[1], sortable : true, align: 'center', process: capitalize},
- etc.
This work fine for me, but I supose it could be done way much elegant... maybe somethin without "IF" that could emulate the "%", like
- var percentage = $(#div.id).width()*0.XX
with the 0.XX picked from an array of percentage, one for each column. Probably I should set up a function... ahhhh, as you may easily see I'm a total beginner with JQuery (and JS in general...)
Suggestion? Comment?