I'm trying to find a way to auto-resize gridster container.
In a way that when user changes browser size, corresponding gridster widgets resized. (In which number of columns and rows does not change, but actual size will)
I can calculate the values for "widget_base_dimensions" as browser size changes,
however I couldn't find a way to update/execute to widgets to cope with new size.
I was seeking if there is a function that supports this kind of feature and I noticed that
on line 3529 on jquery.gridster.js,
/**
* Recalculates the offsets for the faux grid. You need to use it when
* the browser is resized.
*
* @method recalculate_faux_grid
* @return {Object} Returns the instance of the Gridster class.
*/
fn.recalculate_faux_grid = function() {
var aw = this.$wrapper.width();
this.baseX = ($(window).width() - aw) / 2;
this.baseY = this.$wrapper.offset().top;
$.each(this.faux_grid, $.proxy(function(i, coords) {
this.faux_grid[i] = coords.update({
left: this.baseX + (coords.data.col -1) * this.min_widget_width,
top: this.baseY + (coords.data.row -1) * this.min_widget_height
});
}, this));
return this;
};
I tried to some how utilize them but failed :(
If anyone have been successfully utilized this code or work around, can you please help me?
There's long standing issue #5 on project's issue tracket at Github, titled Auto refresh - Responsive grid and several others closed as duplicates. There you will find code posted by people trying to add responsiveness to gridster.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With