Uncaught TypeError: Cannot set property '0' of undefined

[ayozebarrera]

When columns is declared, like this:

columns: [
  [0,768,2],
  [768,900,4]
]

I get Uncaught TypeError: Cannot set property '0' of undefined when I'm resizing the window at 768px. line 190:

for (var i = 0; i < a; i++) {
  for (var bh = 0; bh < h; bh++) {
    elements.matrix[t + bh][l] = true;
      for (var bw = 0; bw < w; bw++) {
        elements.matrix[t + bh][l + bw] = true;
      }
  }
}

Hope it helps :+1:

[theseyi]

:+1: I am seeing this issue as well, my property is declared differently however:

columns: [
   [0, 1680, 8]
]

[DrewDahlman]

Can you post your entire config?

[theseyi]

            $('.posts', this.el).mason({
                itemSelector:  '.prime-tile',
                ratio:         1,
                sizes:         [
                    [1, 1]
                ],
                columns:       [
                    [0, 1680, 8]
                ],
                promoted:      [
                    [1, 2, 'recommended-posts'],
                    [2, 2, 'recommended-promoted'],
                    [2, 1, 'recommended-posts']
                ],
                filler:        {
                    itemSelector:   '.filler-tile',
                    'filler_class': 'mason_filler'
                },
                gutter:        0,
                layout:        'fluid',
                randomFillers: true
//                randomSizes: false
            }, function () {
                console.log('grid complete.');
            });

It works as expected if I take out the columns definition, however, the cell dimensions are much larger than I'm aiming for. I see that the column length is the dividend in the dimension calculation so I'm trying to increase that to achieve smaller dimensions? Hope that helps.

[DrewDahlman]

hmm cool, do you happen to have a fiddle?

[theseyi]

I'll set one up now.

[DrewDahlman]

:+1:

[theseyi]

Here it is -> http://jsfiddle.net/fr93465n/9/ UPDATE: sorry, updated the link above

[DrewDahlman]

Cool - thanks for posting!

I am in the process of doing a rewrite and I believe I found the cause of the issue. It has to do with the number of promoted pieces and sizings. Still working through all of these issues....

[theseyi]

Thanks Drew. Looking forward to it.

On Dec 19, 2014, at 7:22 PM, Drew Dahlman notifications@github.com wrote:

Cool - thanks for posting!

I am in the process of doing a rewrite and I believe I found the cause of the issue. It has to do with the number of promoted pieces and sizings. Still working through all of these issues....

— Reply to this email directly or view it on GitHub.

[theseyi]

Any updates on this @DrewDahlman

[DrewDahlman]

Yep. Addressed in v2!

After today's commits and some working I think v2 is almost ready and can be used for some testing if you want to mess around with it.

The issue was as I expected, promoted sizes were mucking up some numbers and counts and causing mason to look for things that didn't exist. This has been resolved and you can check out the public folder in the v2 repo for examples.

[theseyi]

Sweet will take a look! Thanks.

[DrewDahlman]

Let me know if this did in fact work so we can close the issue!

[theseyi]

Will do. Quick question, is it ok if my container has a fixed height? This seems to generate the same exception Uncaught TypeError: Cannot set property '0' of undefined

[DrewDahlman]

Ahh I could see that possibly being an issue.

Mason is attempting to draw horizontally vs vertically so it is measuring that way.

There is another open issue that had the question of using height vs width, I am going to look into that possibility. Shouldn't be too wild...

Sent from my iPhone

On Jan 21, 2015, at 11:35 PM, Seyi notifications@github.com wrote:

Will do. Quick question, is it ok if my container has a fixed height? This seems to generate the same exception Uncaught TypeError: Cannot set property '0' of undefined

— Reply to this email directly or view it on GitHub.

[theseyi]

:+1: Why not both, rather than either?

[DrewDahlman]

Well, that would depend on a new setting that would be something like confined or something so that the grid is confined to a specific height and width vs just width as it is currently.

Once 2.0 is full release I will start looking into this for 2.1

If anyone feels up to taking it on, go for it! :wink:

[theseyi]

Sounds good. I'll see if I have some time to tackle it. Sent from my iPhone

On Jan 22, 2015, at 9:39 AM, Drew Dahlman notifications@github.com wrote:

Well, that would depend on a new setting that would be something like confined or something so that the grid is confined to a specific height and width vs just width as it is currently.

Once 2.0 is full release I will start looking into this for 2.1

If anyone feels up to taking it on, go for it!

— Reply to this email directly or view it on GitHub.

[UnaOmnia]

Yeah I am still getting the same error..

http://www.localnationalnews.com/

timed everything out really slow.. not sure what the issue is..

[DrewDahlman]

@UnaOmnia I am not seeing any errors on your page...

[UnaOmnia]

Guess what ?! I actually figured out what I was doing wrong.

.The container of the grid that .mason() is run on needs to have attributes width:100% and position:relative.

So if you lazy load, you need to make a class with these attributes. I.E. .mason-container {width: 100%; position:relative;} and .mason-container on all of the grid containers that come out of the lazy load.

Beyond that, there is no need to text replace the contents of the .custom_filler 's or count index. Just need to move the fillers from the first grid to the second and so on.

localnationalnews.com <-- working

My issue now is that the .custom_filler ' s have position relative. So if the last 4 (for me) are fillers, the load more button does not clear the grid. At least 1 item in the last row has to be NOT A FILLER so the load more will clear the grid.

Ted

312-292-6931

ted@unaomnia.com

unaomnia.com

On Fri, Jan 23, 2015 at 12:00 PM, Drew Dahlman notifications@github.com wrote:

@UnaOmnia https://github.com/UnaOmnia I am not seeing any errors on your page...

— Reply to this email directly or view it on GitHub https://github.com/DrewDahlman/Mason/issues/34#issuecomment-71235038.

[UnaOmnia]

O actually, right after fillers get the custom filler class added, they need to be removed from the filler area .. i.e. count custom fillers.. remove ( .remove() ) that many fillers from #fillers (container of filler boxes).. THEN move the remaining fillers to the next grid's container of fillers. If you do not remove them, you will get duplicate content in your grids via the same fillers used multiple times, instead of the next filler.. etc..

Hope that helps!

[DrewDahlman]

Please confirm that v2.0 has fixed this issue. The master branch is now up to date.

[UnaOmnia]

Yes, but it had nothing to do with V2.0.

I.E. .mason-container {width: 100%; position:relative;} (while using .mason-container in lazy load loop)

[DrewDahlman]

Ahh awesome! cheers!

[UnaOmnia]

localnationalnews.com/test-home <-- check that out

[UnaOmnia]

function randomIntFromInterval(min,max) { return Math.floor(Math.random()*(max-min+1)+min); }

promoted:[
    ['wide', randomIntFromInterval(3,4), 1],
            ['tall', 1, randomIntFromInterval(3,4)],
    ['big', randomIntFromInterval(2,3), randomIntFromInterval(2,3)]
],

I.E. randomized promoted sizes..

[theseyi]

@UnaOmnia I'm not sure that using random values in the promoted array will quite work. Mason uses the array values later and accessing that would be different each time with a random number generator.

[DrewDahlman]

Yeah that might wind up with some strange results... Though it may work since that is happening just once.

Promoted pieces are meant to be a bit more intentional but I suppose randomly sized ones could work.

Sent from my iPhone

On Jan 28, 2015, at 12:05 PM, Seyi notifications@github.com wrote:

@UnaOmnia I'm not sure that using random values in the promoted array will quite work. Mason uses the array values later and accessing that would be different each time with a random number generator.

— Reply to this email directly or view it on GitHub.

[UnaOmnia]

Thank you for the heads up.. I will see what I can do.. since it is AJAX probably could just use a PHP variable instead.. // BEGIN LOOP <?php $randNumWidthWidth = rand(3, 4); $randNumTallHeight = rand(3, 4); $randNumBigWidth = rand(2, 3); $randNumBigHeight = rand(2, 3); ?> // END LOOP // RUN MASON // ARG IN MASON JS promoted:[ ['wide', <?php echo $randNumWidthWidth; ?>, 1], ['tall', 1, <?php echo $randNumTallHeight; ?>], ['big', <?php echo $randNumBigWidth; ?>, <?php echo $randNumBigHeight; ?>] ] // .load() AJAX PAGINATION OF LOOP - renegerates random numbers in php // RUN MASON ON LOADED CONTENT // ARG IN MASON JS promoted:[ ['wide', <?php echo $randNumWidthWidth; ?>, 1], ['tall', 1, <?php echo $randNumTallHeight; ?>], ['big', <?php echo $randNumBigWidth; ?>, <?php echo $randNumBigHeight; ?>] ]

[UnaOmnia]

excuse me I am new to GitHub .. I will put this into comments? Not sure the proper educate. Feel free to move me Drew.

[DrewDahlman]

you're fine to post them here in the issues area

[UnaOmnia]

Actually, a .load probably won't do by itself. You will probably also need to use $.post() to a PHP file that runs the randomization:

$.post( [PATH TO RANDOMIZE PHP SCRIPT] . /random-promoted-sizes.php');

Inside "random-promoted-sizes.php"

// Desired randomized promoted size ranges - height and width $randNumWidthWidth = rand(3, 4); $randNumTallHeight = rand(3, 4); $randNumBigWidth = rand(2, 3); $randNumBigHeight = rand(2, 3);

Run $.post() before loop and before running .load() of next page of pagination on click (lazy load on click)

http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/

[UnaOmnia]

You could also make a random AMOUNT OF promoted size with php arrays inside "random-promoted-sizes.php" in combination with a foreach inside the .mason() promoted size args.. (I use mason() on page load and on click just like in your demo)