Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I am unable to get Masonry js working

    Hi everyone,

    I am a js novice but can usually grab pre-made scripts and get stuff working!!

    I am trying to implement a "pinterest style" portfolio page for a client and am having trouble getting masonry to do its thing.

    My page is here:

    http://airbase.adamcrohill.com/portfolio-test2.html

    I have been using the masonry installation guidelines from here:

    http://masonry.desandro.com

    I have the development version of the js (masonry.pkgd.js) downloaded from the masonry site and I have uploaded it to my server into a folder in the site root called js and I have used a debugger to check that I have linked to the js file correctly. I am linking to it in my html head.

    I am initialising the masonry script via a script at the bottom of my html called adam.js which I have also checked is correctly linked. The adam.js code is as follows:

    Code:
    $(document).ready(function() {
    
    	// Initialize Masonry
    	var container = document.querySelector('#container');
    var msnry = new Masonry( container, {
      // options
      columnWidth: 200,
      itemSelector: '.item'
    });
    
    });
    I was expecting to see my images fill the page in the "pinterest style" but they are all stacking up in a single column.

    If I initialise masonry using html as described on http://masonry.desandro.com I can get the effect working (to a degree) but I need the flexibility provided by the js initialisation (image load features etc...)

    I am sure that I am missing something simple but having spent the best part of two days tinkering around with this, I thought it was best to seek some help.

    Any comments or suggestions would be very much appreciated.

    Best wishes,

    Adam

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    It would appear from the error console and the comments in that script that you need to use jQuery to make it work

  • #3
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    It would appear from the error console and the comments in that script that you need to use jQuery to make it work
    Thanks xelawho... I will look into this.

    It did state explicitly on the masonry site http://masonry.desandro.com that query is not needed (last paragraph on the home page) but I'll follow your theory and see if that solves my problem

    Thanks again,

    Adam

  • #4
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    It would appear from the error console and the comments in that script that you need to use jQuery to make it work
    Think I got it sorted - xelawho, you saying it looks like the code was calling query got me thinking... i'd got some erroneous code in my initialisation script - I have corrected it to
    Code:
    // Initialize Masonry
    	var container = document.querySelector('#container');
    var msnry = new Masonry( container, {
      // options
      columnWidth: 200,
      itemSelector: '.item'
    });
    and preliminary observations are showing that at least it's doing it's thing now. Hopefully with some CSS tweaks it'll be all sorted.

    Thanks again,

    Adam.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •