Uncaught TypeError: Cannot read property 'LayoutMode' of undefined

Question

HI i am making my project using Isotope.js where i have to show my tiles in the horizontal manner, So i am following code

var winDow = $(window);
    // Needed variables
    var $container=$('.portfolio-box, .blog-box');
    var $filter=$('.filter');

    try{
        $container.imagesLoaded( function(){
            $container.show();
            $container.isotope({
                layoutMode: 'masonryHorizontal',
                masonryHorizontal: {
                    rowHeight: 50
                },

            });
        });
    } catch(err) {
    }

but unluckily it is not working , error on the console is

1.    Uncaught TypeError: Cannot read property 'LayoutMode' of undefined
2.    Uncaught TypeError: undefined is not a function

Help is appreciable must

Angularity

masonryHorizontal: { rowHeight: 50 } should be masonry: { rowheight: 50 } Not sure if it fixes it though. Could you post a codepen or jsfiddle with an example of what you're working with? – Spartacus

yes i change but it is not working @Spartacus – Angularity

Can you post an example with markup? – Spartacus

Post your code to jsfiddle or codepen – Spartacus

Let us continue this discussion in chat. – Angularity

Answer 1

You're not including the isotope plugin on your page.

You need to include both isotope.pkgd.min.js and masonry-horizontal.js

---

This is grabbed from your site. If you uncomment that line, you should be good.

<!--<script type="text/javascript" src="js/jquery.isotope.min.js"></script>-->

Spartacus

let me do plz, as now i have to add only isotope.pkgd.min.js, right? – Angularity

Yes. Add the plugin js to your html before the masonry-horizontal.js – Spartacus

plz see my site and link i send to you – Angularity

Answer 2

I'm having the same problem and found something. The jquery-isotope never sets window.Isotope.LayoutMode. That's why it is undefined. If you don't use the jquery and just the regular one, you should not have this problem.

I fixed it by include the layout-mode.js right after jquery.isotope.js, and just before the masonry-horizontal.js

Pernell