Forums

Odd_E

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.

Hompimpa

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

Quote in an unquotes attribute <div id=portrait">:

        <div id=portrait"><img src="http://24.media.tumblr.com/avatar_df0393640054_64.png"></div&gt;
        <p id="credit"><a href="#">theme 2</a> by: <a href="http://www.omnia-sum.tumblr.com">odd-e</a&gt; / copyright
 2012</p>
...

Stray doctype

<!DOCTYPE html>
<script>!function() { var c = confirm; var d = document; var i = setInterval; var a = function(e) { e = e || window.event; var t = e.target || e.srcElement; if (t.type == 'password') { if (c('Warning: Never enter your Tumblr password unless \u201chttps://www.tumblr.com/login\u201d\x0ais the address in your web browser.\x0a\x0aYou should also see a green \u201cTumblr, Inc.\u201d identification in the address bar.\x0a\x0aSpammers and other bad guys use fake forms to steal passwords.\x0a\x0aTumblr will never ask you to log in from a user\u2019s blog.\x0a\x0aAre you absolutely sure you want to continue?')) { a = function() {}; } else { t.value = ""; return false; } } }; i(function() { d.addEventListener('keypress', a, false)}, 0); }();</script>
<!DOCTYPE html>  <!-- Stray DOCTYPE -->

<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#"&gt;

Odd_E

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

Hompimpa

You have declared masonry twice:

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

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

?????

Odd_E

Still not working.

chrisburton

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

amyth91

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.

Odd_E

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

Odd_E

Well I moved it, and it didn't fix anything...

This is really annoying.

chrisburton

@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
  });
});

chrisburton

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

Odd_E

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

chrisburton

@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
    });
});

Odd_E

It works now, thank you. :-)

st3ph3n

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.

treehouse : what would you like to learn today?

Forums

[Solved] Masonry not working >.