SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    London
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery Masonry Problem

    Hi There,

    Im trying to get Masonry working properly on a friends site. It seams to be sorta working, but its setting the height of the container before the page loads properly... so everything gets squashed...

    If i hit "refresh" in my browser - it stays, however if I put my cursor in the URL bar - and hit return, it rights itself ???? Go back and it "refresh" and its squashed again :-(

    Im using Chrome & Safari to test right now...

    http://res06.auserver.com.au/~kriste...ory/paintings/

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,388
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    It sounds like it's because the script is running before the images have finished loading, which can break the layout. When you go to the address bar and hit return, the images are cached and so the layout works properly.

    The fix is detailed in the Masonry Appendix docs.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    London
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm.. Im trying using this:

    // or with jQuery
    var $container = $('#image-grid');
    // initialize Masonry after all images have loaded
    $container.imagesLoaded( function() {
    $container.masonry();
    });

    But im just ending up with a JS Error:

    "Uncaught TypeError: Object [object Object] has no method 'imagesLoaded' "

  4. #4
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,388
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    It sounds like you don't have the plugin loaded.. you need to download a separate script from: http://desandro.github.io/imagesloaded/ and include it in your page.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    London
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bingo, thats it ! Dang, didn't realise it was separate ! Thanks heaps ! :-)

    Matt


Tags for this Thread

Bookmarks

Posting Permissions

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