Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Masonry not working >.<

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #38191
    Odd_E
    Member

    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.

    #103389
    Taufik Nurrohman
    Participant

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

    Quote in an unquotes attribute

    :

            

    theme 2 by: odd-e / copyright
    2012


    ...

    Stray doctype






    #103513
    Taufik Nurrohman
    Participant

    You have declared masonry twice:

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

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

    ?????

    #103527
    chrisburton
    Participant

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

    #103547
    chrisburton
    Participant

    @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
    });
    });
    #103548
    chrisburton
    Participant

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

    #103557
    chrisburton
    Participant

    @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
    });
    });
    #138403
    st3ph3n
    Member

    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 8 posts - 1 through 8 (of 8 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.