javascript - gridster, how to auto fit to browser size change? - Stack Overflow

admin管理员组

文章数量:1406308

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?

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?

• javascript
• jquery
• gridster

Share Improve this question Follow edited Dec 23, 2017 at 10:34 ROMANIA_engineer 56.8k3030 gold badges210210 silver badges205205 bronze badges asked Nov 21, 2013 at 2:15 user2205425user2205425 11711 gold badge11 silver badge1010 bronze badges 4

• have you had any luck with this? – Cole Commented Dec 3, 2013 at 20:51
• Should define manuel width over the base dimension .gridster li{width:34%;} percentage would make it fit to screen – Harish Boke Commented Mar 4, 2014 at 9:30
• better use Packery.js, gridster seems to be unsupported anymore – Denis Commented Jul 3, 2015 at 22:38
• Did you have any luck with this? I recently came across the container width problem, and spotted that same function in the Gridster source, but having no joy in using it... I raised an issue on GitHub, but got nowhere yet... github./ducksboard/gridster.js/issues/525 – WastedSpace Commented Aug 6, 2015 at 10:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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.

本文标签： javascriptgridsterhow to auto fit to browser size changeStack Overflow