0

I'm using isotope on my tumblr theme, but my post (which is an isotope-item) - on a permalink page - will not increase its height after loading more notes. These notes are dynamically inserted after one clicks a link. I've found a possible solution to this by calling .isotope('reLayout'); but it seems I can't get it to work. It will load the new notes, but they get cut off by their container which doesn't increase height at all.

I tried doing it with a click event on the 'show more notes' link, but that link already has inline javascript being executed on click. How can I have the isotope item increase its height (by executing .isotope('reLayout');) on the click of the 'show more notes' link?

Here's the default tumblr code:

<li class="note more_notes_link_container" style="text-align:center;" id="more_notes_59995759535">
            <a class="more_notes_link" rel="nofollow" href="#" onclick="this.style.display='none';document.getElementById('notes_loading_59995759535').style.display = 'block';if(window.ActiveXObject)var tumblrReq=new ActiveXObject('Microsoft.XMLHTTP');else if(window.XMLHttpRequest)var tumblrReq=new XMLHttpRequest();else return false;tumblrReq.onreadystatechange=function(){if(tumblrReq.readyState==4){var notes_html=tumblrReq.responseText.split('<!-- START '+'NOTES -->')[1].split('<!-- END '+'NOTES -->')[0];
if(window.tumblrNotesLoaded)if(tumblrNotesLoaded(notes_html)==false)return;var more_notes_link=document.getElementById('more_notes_59995759535');var notes=more_notes_link.parentNode;notes.removeChild(more_notes_link);notes.innerHTML+=notes_html;if(window.tumblrNotesInserted)tumblrNotesInserted(notes_html);}};tumblrReq.open('GET','/notes/59995759535/YbpaUsPSt?from_c=1378154277',true);tumblrReq.send();return false;">Show more notes</a><span class="notes_loading" id="notes_loading_59995759535" style="display:none;">Loading...</span>
        </li>
Jake
  • 13
  • 7

1 Answers1

0

I have a fiddle for you ..

if ($(this).hasClass('selected'))

JSFIDDLE DEMO

Hope this helps you

OK I have a link for you .. Just go through it maybe helpful link

Vaibs_Cool
  • 6,126
  • 5
  • 28
  • 61
  • Appreciate the quick answer. I forgot to mention I'm a javascript/jquery noob and I can't see how this can solve my issue. If you could, please give me some more directions on how I would implement this into my tumblr theme. I think the inline javascript that tumblr adds by default on the 'load more notes' link prevents me from executing any other javascript on the same click event on that link. – Jake Sep 03 '13 at 08:40
  • @user1145009 Just have a look at my updated answer with a link – Vaibs_Cool Sep 03 '13 at 08:56
  • Thanks, but I think it's not an issue with isotope, but with tumblr/javascript here. The inline javascript on the onclick event prevents any other javascript to be executed. I tried triggering an alert but even that didn't work. `$('.more_notes_link').click() { alert('success') };` So I guess I'm looking for a solution to execute isotope's reLayout function *in addition* to the default inline javascript on the same click event... – Jake Sep 03 '13 at 09:21
  • I got it to work somehow, but only for the first click: `$('.more_notes_link').click(function(){ alert('hi'); $container.isotope('reLayout'); });` this will trigger the alert dialog. Once I dismiss the dialog, the reLayout is triggered and increases the height of the container as intended. But it only does so on the first click of the link. How can I make it work (do the reLayout) on each click? Oh, and without the alert, it won't work at all. So a solution for that would be nice too. – Jake Sep 04 '13 at 11:58