Search code examples
javascriptjquerygridster

Gridster.js - Resize and maintain aspect ratio

I'm currently using Gridster.js and I was wondering if anyone with experience of the plugin knows how to maintain the aspect ratio of a widget on resize.

Currently I have squares in my grid, which I would like to keep 1:1 and rectangles which I would like to keep 3:2.

I was thinking I could do some sort of check in the resize.resize function. This sounds quite expensive though as it's fired on every mouse move.

Is there a better way to approach this?

Solution

  • I managed to solve this by modifying the Gridster.js plugin:

    On line 2020, inside the fn.on_resize method I added:

        //check the initial size to get the ratio
    var ratio = this.resize_initial_sizex / this.resize_initial_sizey;
    size_x = size_y / ratio;

    That maintains the current widgets current aspect ratio. I've put the full code up in a Gist if anyone would like to see it in context.