Search code examples
javascriptjquerytumblr

Running a function when loading more notes in Tumblr

I made a script to manipulate the appearance of notes in my theme, which works well for the notes that are loaded with the page. The problem arises when trying to load more notes- I need to rerun my script on them- my question is how do I do that?

This is the script that tumblr runs when loading more notes (it's an onclick event):

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_20767443750');
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/20767443750/iRC0TZaQr?from_c=1334227072',true);
tumblrReq.send();
return false;

What I'm trying to do is to make a function that will be called every instance of loading more notes, that will take those new notes as a variable, run a function on them which replaces some text with symbols, and then append them to the existing Isotope setup, like when loading a new page with Infinite Scroll.

This link here is one of the permalink pages from the blog I'm working on, where you can see what I'm talking about. Here is the reference material from the tumblr docs.

I'd appreciate any thoughts, as they might lead me in the right direction!

Solution

  • Well, it turned out that I was in the right direction myself and just made a code that was to messy too work, but it works now so I'll detail how, so that other people could use the information:

    function tumblrNotesLoaded(notes_html){  //this will be called when loading notes

     //code goes here!

};

    I placed it outside any other function, I think the term is 'in the global namespace', and so I did to every function that I needed to call when loading new notes.

    To append it to the Isotope wall (and I suppose it applies to Masonry as well, with a few keywords changed) I added this to the code:

    var newtmbnotes =  $("li.note:not(.isotope-item)");

    This selects all the note elements which hasn't been positioned by Isotope (the plugin adds the class "isotope-item" to every item it processed). This leaves the selection with only the new notes.

    $('ol.notes').isotope( 'appended', newtmbnotes, introNote() );

    And finally this, which appends the new notes that were defined previously, and then runs a function called introNote which I made to fade them in once they are ready.