Grow your CSS skills. Land your dream job.

Masonry not working >.<

  • # May 24, 2012 at 12:28 am

    After finally getting it work in JSFiddle and locally, masonry isn’t working on tumblr.

    http://omnia-sum.tumblr.com/

    If anyone else has had this problem, I’d really like to figure it, because it’s really annoying. Is it because it’s not an ordered or unordered list? I don’t know, but it’s bugging me. The worst part it is, it works locally so it taunts me like that.

    Anway, help is appreciated.

    # May 24, 2012 at 3:32 am

    Check your source code with Firefox, you have some error:

    Quote in an unquotes attribute

    :

            

    theme 2 by: odd-e / copyright
    2012


    ...

    Stray doctype

    < !DOCTYPE html>

    < !DOCTYPE html>


    # May 24, 2012 at 11:38 pm

    I added the doctype in the html file, i forgot that tumblr inserts it for you.
    However, that hasn’t fixed it. :/

    # May 26, 2012 at 8:15 am

    You have declared masonry twice:

    /*        $('#posts').masonry({
    itemSelector: '.post'
    }); REMOVE */

    $(window).load(function() {
    $('#posts').masonry({
    itemSelector: '.post',
    isAnimated: true,
    isFitWidth: true
    });
    });

    ?????

    # May 26, 2012 at 3:56 pm

    Still not working.

    # May 26, 2012 at 4:42 pm

    @Odd_E have you tried putting the scripts at the bottom, right before the body tag?

    # May 27, 2012 at 7:37 am

    here, is an example that i worked on ! i had issues with the script, later i figured it was a conflict with the jquery and my scrollto.js ! changed the positions of js, from head to the bottom and it worked. i guess it was because of the sequence of the scripts being called.

    # May 27, 2012 at 5:23 pm

    The bottom of the head or the bottom of the document?

    # May 27, 2012 at 5:26 pm

    Well I moved it, and it didn’t fix anything…

    This is really annoying.

    # May 27, 2012 at 8:18 pm

    @Odd_E “have you tried putting the scripts at the bottom, right before the body tag?”

    There may be a conflict, then. I’m not sure. It seems like it’s related to your CSS because the top one tries to animate.

    I just recently had an issue with my images using Masonry.js and the following code worked.

    var $container = $('#content');
    $container.imagesLoaded(function(){
    $container.masonry({
    itemSelector : '#posts',
    isFitWidth: true,
    isAnimated: true
    });
    });
    # May 27, 2012 at 8:46 pm

    Your footer seems to animate as well so I believe it has to do with your CSS.

    # May 27, 2012 at 10:26 pm

    Do you have any idea where? Well the worst part is that it works locally, but it’s completely useless when on tumblr.

    # May 27, 2012 at 11:13 pm

    @odd_e

    http://jsfiddle.net/CHGQ3/embedded/result/

    Change your masonry code to this:

            $(window).load(function() {
    $('#content').masonry({
    itemSelector: '#posts',
    isAnimated: true,
    isFitWidth: true
    });
    });
    # May 28, 2012 at 2:42 am

    It works now, thank you. :-)

    # June 12, 2013 at 12:42 am

    Thank you soo much Chris. I had the same problem as OP. It seems that FF and IE need the line: isFitWidth: true which isn’t in the default code.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".