Get new size of Gridster widget after resize

javascript jquery gridster
microchip78 picture microchip78 · Nov 22, 2013 · Viewed 12.8k times · Source

Using Gridster, we have created a grid with resizable widgets using the resize.enabled config option.

After the user finishes resizing a Gridster widget, we would like to get new final size of the widget. How can we do this?

Answer

ne1410s picture ne1410s · Nov 27, 2013

I have recently been working with gridster resizing too. Here is how I grabbed the size

 $(function () { //DOM Ready
    $scope.gridster = $(".gridster ul").gridster({
        ...
        resize: {
            enabled: true,
            start: function (e, ui, $widget) {
                ...
            },
            stop: function (e, ui, $widget) {
                var newHeight = this.resize_coords.data.height;
                var newWidth = this.resize_coords.data.width;
                ...
            }
        },
        ...
    }).data('gridster');
});

The 'newHeight' and 'newWidth' can be read within the resize-stop event. You can also explore the 'this' instance to get the sizes in units, rather than pixels.

Related questions

gridster, how to auto fit to browser size change?

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 …

Read More
How do I redirect to another webpage?

How can I redirect the user from one page to another using jQuery or pure JavaScript?

Read More
Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?

Mod note: This question is about why Postman is not subject to CORS restrictions in the same way an XMLHttpRequest is. This question is not about how to fix a "No 'Access-Control-Allow-Origin'..." error. Please stop posting: CORS configurations for every …

Read More