Make the plugin responsive

[loaibassam]

I am using this plugin https://github.com/johansatge/elastic-columns to create a grid layout. Documentation can be found here: http://johan.satge.io/elastic-columns/#installation

The Problem: 1) At the moment, when re-sizing the window the plugin does not respond, I am trying to make it repressive so it changes the number of columns accordingly.

2. If there is a required input for example, inside the grids generated by the plugin, when the error message show, it will overlap the item below it, the plugin won't respond to the change of height and re-arrange its elements accordingly. Note, the input just an example, it can be an image or a toggle button that maybe show more content etc... Just to give you an idea of what I mean.

What I have Tried: To solve both problems above, I realized that I need to refresh the layout each time there is a change. In the documentation it shows how to refresh the layout by using "$('.container').elasticColumns('refresh');"

So, I have tried the following:

1. To check if the height of any of the items inside that .grid has changed it will refresh the layout instantly and simultaneously using the following snippet, but no avail.

$('.grid *').bind('heightChange', function(){
$('.grid').elasticColumns('refresh');
});
2) So, I then tried to refresh the layout each time you click or hover over .grid. This approach won't be the answer...

$('.grid *').on('click' function(){
$('.grid').elasticColumns('refresh');
});
3) To make it responsive on window re-size, i tried the following but it won't work:

// Resize event: tell the plugin to refresh the layout
$(window).on('resize', $.proxy(this, 'onResize'));
*I found that snippet on the plugin home page by inspecting elements.

I have no idea what else to try, I simply want to make the grid "responsive" using the most efficient and simple approach.

[johansatge]

Hi,

if you want to adjust your blocks when adding content - by using a Show more content button for instance - the $('.grid').elasticColumns('refresh'); is actually the right command.

I'd advise you to share an example on jsfiddle or elsewhere to clarify the problem :)

Also, to make your grid responsive on resize, you can use the following snippet:

$(window).on('resize', function()
{
    var columns = [...] // you may calculate the number of columns
                        // depending on window width, for instance
    $('.container').elasticColumns('set', 'columns', columns);
    $('.grid').elasticColumns('refresh');
});

[loaibassam]

Thank you for your prompt reply John! I have tried the solution but it didn't work - it seem like it is missing something, I am not sure as I really don't know JS very well, I have submitted the question on: http://stackoverflow.com/questions/28054157/i-cant-make-the-grid-responsive it has examples which will help you understand the problem. Please help

[loaibassam]

I have also tried this: but it won't work, what I am doing wrong?

$(window).on("ready resize", function() {
if (window.innerWidth < 600) {
var columns = [1] // you may calculate the number of columns depending on window width, for instance
$('.container').elasticColumns('set', 'columns', columns);
$('.grid').elasticColumns('refresh');
} else {
var columns = [2] // you may calculate the number of columns depending on window width, for instance
$('.container').elasticColumns('set', 'columns', columns);
$('.grid').elasticColumns('refresh');
}
});

Here is the stages that I am trying to implement:

Equal or above 1024px:
.columns2 = .columns2
.columns3 = .columns3
.columns4 = .columns4
.columns5 = .columns5

Smaller than 1024px & above 770px:
.columns2 = .columns2
.columns3 = .columns2
.columns4 = .columns3
.columns5 = .columns3

Smaller than 770px & above 500px:
.columns2 = .columns2
.columns3 = .columns2
.columns4 = .columns2
.columns5 = .columns2

Smaller than 500px:
.columns2 = .columns1
.columns3 = .columns1
.columns4 = .columns1
.columns5 = .columns1

[johansatge]

The columns number has to be an integer:

    var columns = 1;
    $('.container').elasticColumns('set', 'columns', columns);

Also, check the bottom of your script, it looks like you are applying the columns number on one node, and refresh an other one.