Open mrupload opened 9 years ago
Here is what I've been using....although it comes with one small bug that I've noticed. When resizing the browser, the preview-holder doesn't get resized as the main panels do. This is based on a three column grid hence all of the math being used.
var gridsterWidth = $('.gridster').width(),
widgetWidth = (gridsterWidth / 3) - 23,
widgetHeight = widgetWidth / 2.1667,
widgetDimensions = [widgetWidth, widgetHeight];
var gridster = function (dx) {
$(element).gridster({
draggable: {
handle: '.handle'
},
helper: 'clone',
max_cols: 3,
widget_margins: [10, 10],
widget_base_dimensions: dx
}).data('gridster');
};
gridster(widgetDimensions);
$(window).smartresize(function () {
$(element).gridster().data('gridster').destroy();
var newGridsterWidth = $('.gridster').width(),
newWidgetWidth = (newGridsterWidth / 3) - 23,
newWidgetHeight = newWidgetWidth / 2.1667,
newWidgetDimensions = [newWidgetWidth, newWidgetHeight];
gridster(newWidgetDimensions);
});
@mrupload and @ascendantofrain - Please refer #436
Here is a better version of my previous code using Knockout JS.
ko.bindingHandlers.gridster = {
buildGrid: function (e) {
$(e).gridster().data('gridster').destroy();
var gridsterWidth = $('.gridster').width(),
widgetWidth = (gridsterWidth / 3) - 23,
widgetHeight = widgetWidth / 2.1667,
gridster = function(dx) {
$(e).gridster({
draggable: {
handle: '.handle'
},
max_cols: 3,
widget_margins: [10, 10],
widget_base_dimensions: dx
}).data('gridster');
};
gridster([widgetWidth, widgetHeight]);
},
init: function (element) {
$(window).smartresize(function () { ko.bindingHandlers.gridster.buildGrid(element); });
ko.bindingHandlers.gridster.buildGrid(element);
},
update: function(element, valueAccessor) {
var options = ko.unwrap(valueAccessor());
ko.bindingHandlers.gridster.buildGrid(element);
}
};
Hello How can I update gridster on windows resize and re initialize it ? I search for responsive gridster but I fail to do responsive gridster
Can you tell me exact code that I must use ?