Responsive

[duongtv0406]

How to make this to be responsive?

[prasaddarla]

Hi I am also looking for how to implement it in mobile if responsive is there please let me know

Thanks in advance

[hrosenbauer]

This functionality is not implemented yet. Pull-requests are welcome...

[rinkurajat]

I have impleted this for my current project and it appeas to have been working good to date.

/ * Change the dimensions of widgets. * @method resize_widget_dimensions * @param {Object} [options] An Object with all options you want to * overwrite: * @param {Array} [options.widget_margins] Margin between widgets. * The first index for the horizontal margin (left, right) and * the second for the vertical margin (top, bottom). * @param {Array} [options.widget_base_dimensions] Base widget dimensions * in pixels. The first index for the width and the second for the * height. * @return {Class} Returns the instance of the Gridster Class. /

fn.resize_widget_dimensions = function (options, callback) {
    if (options.widget_margins) {
        this.options.widget_margins = options.widget_margins;
    }
    if (options.widget_base_dimensions) {
         this.options.widget_base_dimensions = options.widget_base_dimensions;
    }
    if (options.max_cols) {
         this.options.max_cols = options.max_cols;
    }
    this.min_widget_width  = (this.options.widget_margins[0] * 2) + this.options.widget_base_dimensions[0];
    this.min_widget_height = (this.options.widget_margins[1] * 2) + this.options.widget_base_dimensions[1];

    var serializedGrid = this.serialize();
    this.$widgets.each($.proxy(function(i, widget) {
        var $widget = $(widget);
        this.resize_widget($widget);
    }, this));
    this.generate_grid_and_stylesheet();
    this.get_widgets_from_DOM();
    this.set_dom_grid_height();
    return this;
};

/containerID - ID of the dom element that houses the gridster/

_resizeGridster = function (containerID) { base_size = [($(containerID).width() - 20) / gridster.get_bottom_most_occupied_cell().col, $(containerID).height() - 10 / gridster.get_bottom_most_occupied_cell().row]; gridster.resize_widget_dimensions({ namespace: '.gridster', widget_base_dimensions: base_size, widget_margins: [5, 5], min_rows: gridster.get_bottom_most_occupied_cell().row, min_cols: gridster.get_bottom_most_occupied_cell().col }); }

/_debounce - throttles the call so that grid is not redrawn as the user chnages screen size/

$(window).resize(_debounce(function () { _resizeGridster(); }, 100));

_debounce = function (func, wait, immediate) { var timeout, result; return function () { var context = this, args = arguments; var later = function () { timeout = null; if (!immediate) result = func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) result = func.apply(context, args); return result; }; };

I hope this helps :)

Regards

[ronnyek]

Seem like it depends on what constitutes responsive.

What should the desired functionality be, it tries to wrap elements to the next line when the parent container gets resized, or should functionality be simply that when browser size crosses certain threshold, we basically throw out the concept of multiple widgets per row, and just order em such that each widget is 100% width, with specified height?

Seems like there are negatives and benefits to both routes... for me, I'd prefer to basically toss out the multi widget per row, and just have widgets be 100% width, widgets wrapping on to following lines etc.

Either way seems like it would cause lots of problems with the idea of being able to reorder/resize widgets on the fly in that state.

[cjmcclean]

@rinkurajat Out of curiosity, where in the plugin did you stick that responsive code?

[rinkurajat]

@Kenuzara : I have added code to base library. You would need to add the below code to the page which has the gridster

_resizeGridster = function (containerID) { base_size = [($(containerID).width() - 20) / gridster.get_bottom_most_occupied_cell().col, $(containerID).height() - 10 / gridster.get_bottom_most_occupied_cell().row]; gridster.resize_widget_dimensions({ namespace: '.gridster', widget_base_dimensions: base_size, widget_margins: [5, 5], min_rows: gridster.get_bottom_most_occupied_cell().row, min_cols: gridster.get_bottom_most_occupied_cell().col }); }

/_debounce - throttles the call so that grid is not redrawn as the user chnages screen size/

$(window).resize(_debounce(function () { _resizeGridster(); }, 100));

_debounce = function (func, wait, immediate) { var timeout, result; return function () { var context = this, args = arguments; var later = function () { timeout = null; if (!immediate) result = func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) result = func.apply(context, args); return result; }; };