Javascript — manipulating attributes of dynamically loaded (or autopaged) content
<p>Mega Edit — I have tried to explain my issue as clearly as possible.</p>

<p>My goal: to set the height of newly loaded images to the same size of the browser <em>if</em> their height is <em>taller</em> than the browser.</p>

<p>Best way i can do this is via commented code i think.
It's currently live on <a href="http://syndex.me" rel="nofollow">http://syndex.me</a>.</p>

<p>The complete js file that the below transcript was taken from can be reached at <a href="http://marckremers.com/syndex/js/jquery.infinitescrollfortumblr.js" rel="nofollow">http://marckremers.com/syndex/js/jquery.infinitescrollfortumblr.js</a></p>

<pre><code> //Gets the computed style of the image rather than the specified.
 //This was supplied very kindly by @RobG
 //The problem is that on first load, the height for the image is showing as 0 for the larger images.
 //Once it's cached, the functions shows the correct height.
 //I have no idea how to make this function work on a "on Ready" or "On Loaded"?

function getComputedStyle(el, styleProperty) {

 if (document &amp;&amp; document.defaultView &amp;&amp; document.defaultView.getComputedStyle) {
   var styleObj = document.defaultView.getComputedStyle(el, null);
   var floatStyle = (typeof document.body.style.cssFloat == 'string')?'cssFloat':'styleFloat';

   if (styleProperty == 'float') styleProperty = floatStyle;
   return styleObj &amp;&amp; styleObj[styleProperty];
  }
}
    function addNextPage(oj) {
        if (oj.status == 404) {
            tAP.remainFlg = false;
            return;
        }
        var d = document.createElement("div");
        d.innerHTML = oj.responseText;
        var posts = tAP.gP(d.getElementsByTagName("*"));
        if (posts.length &lt; 2) {
            tAP.rF = false;
            return;
        }
        d = document.createElement("div");
        d.className = "tumblrAutoPager_page_info";
        tAP.pp.appendChild(d);
        for (var i = 0; i &lt; posts.length; i++) {
        //Goal: Set newly loaded images via this autopager script for tumblr
        //      to the height of the browser
        //      (So... IF the image is taller than the browser
        //      Make the image as tall as the browser)
        //      In effect I'm trying to make a dynamic image max-height based on the browser 

        // This is loading the new posts (part of the autopager script, not my code)
        tAP.pp.appendChild(posts[i]);

        //Over here I'm trying to reference the newly loaded imgs
        //BUT this is a horrible way of getting them, apprently.
        //It gets all the imgs in the entire document.
        //But it seems to work for my array below, anyhow
        //I really just need to deal with the new ones loaded in.
        var myDivs = tAP.pp.getElementsByTagName("img");
        }

        var myHeights = [];
        for (var n=0, iLen=myDivs.length; n&lt;iLen; n++) {
    myHeights.push(getComputedStyle(myDivs[n], 'height'));
    }

    console.log(myHeights)
    //= I get an array of image heights, however the newly loaded imgs often show up as 0
    // so the "getcomputedstyle" script is not working as it should yet. 
    //once the page is cached, it works as it should
        //you can see the console logs here http://syndex.me

    //Over here would go:
    //"for each image
    //  if my height is taller then the window
    //  make me as tall as the window"

    //Finally, I have this working PERFECTLY in the jquery code
    //you can see it at http://syndex.me on the first page load.
    //since you can't bind .live or .delegate to events that don't "bubble" 
    //up the DOM tree, i.e. ".load", I can't get it to recognise
    //newly loaded images from this script
    //thats why i'm having to hack this file

        var footer = $("footer");
        footer ? footer.parentNode.appendChild(footer) : null;
        tAP.rF = true;
    }
</code></pre>

<p>Thanks in advance.</p>
