Mega Edit — I have tried to explain my issue as clearly as possible.
My goal: to set the height of newly loaded images to the same size of the browser if their height is taller than the browser.
Best way i can do this is via commented code i think. It's currently live on http://syndex.me.
The complete js file that the below transcript was taken from can be reached at http://marckremers.com/syndex/js/jquery.infinitescrollfortumblr.js
//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 && document.defaultView && 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 && 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 < 2) {
tAP.rF = false;
return;
}
d = document.createElement("div");
d.className = "tumblrAutoPager_page_info";
tAP.pp.appendChild(d);
for (var i = 0; i < 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<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;
}
Thanks in advance.
