Javascript — Manipulating Attributes Of Dynamically Loaded (or Autopaged) Content
Solution 1:
Probably because myDivs contains a NodeList, an array like object which contains indexed references to the matched elements, which does not have a getAttribute() member.
Instead, subscript the individual elements (either with [n] or item(n)), which will have a getAttribute() method. Or just use the width property.
Solution 2:
Your code is faulty:
> myDivs = tAP.pp.getElementsByTagName("img");getElementsByTagName returns a live NodeList.
> myWidths = myDivs.getAttribute("width");NodeLists don't have a getAttribute method, DOM elements do.
In any case, it is much more efficient to access the property, so:
var myWidths = [];
for (var i=0, iLen=myDivs.length; i<iLen; i++) {
myWidths.push(myDivs[i].width);
}
However, elements other than images usually only have a width property if it has been set as an attribute or property. You may be after the computed style, e.g.
<scripttype="text/javascript">functiongetActualWidth(el, styleProperty) {
if (document && document.defaultView && document.defaultView.getComputedStyle) {
var styleObj = document.defaultView.getComputedStyle(el, null);
var floatStyle = (typeofdocument.body.style.cssFloat == 'string')?'cssFloat':'styleFloat';
if (styleProperty == 'float') styleProperty = floatStyle;
return styleObj && styleObj[styleProperty];
}
}
</script><divonclick="alert(getActualWidth(this, 'width'));">div</div>That gets you with width. To change the width, just set it directly:
element.style.width = '500px';Solution 3:
Admittedly I never knew about computed styles until I read this post, so unfortunately I can't really comment on what else has been said here. (going to read up on it after — I promise).
You're right about event delegation in that you can't bind a jQuery live() (or equivalent) to img load events as it's a 'simple' event and doesn't bubble. So afaik you do have to manually add the load event to each individual image.
The only real tricky part is making sure that you account for already cached images. Here's one approach.
I've recreated a stripped down, static version of your tumblr page with a button that appends another image, which is basically your addNextPage() call. Hope it helps.
http://dl.dropbox.com/u/15924676/syndex/index.html
<!DOCTYPE html><html><head><title>Syndex</title><scripttype="text/javascript"src="./Syndex_files/jquery-latest.min.js"></script><linktype="text/css"href="./Syndex_files/style.css"media="screen"></head><body><div><inputtype="button"value="add image" /></div><divid="posts"><divclass="autopagerize_page_element"></div></div></body><script>
var $window = $(window);
var $pageImages;
var images = [
'<divid="10823012653"class="post photo"><divclass="theImage"><imgsrc="./Syndex_files/tumblr_lsb37adUwD1r4306n"alt="Olaf Breuning"><divclass="kremers">original height 701</div></div></div>',
'<divid="10822915844"class="post photo"><divclass="theImage"><imgsrc="./Syndex_files/tumblr_lsb33m4S7j1r4306no1_400.png"alt="Jacqueline Casey, Graphic Designer for MIT 1963 - 1990"><divclass="kremers">original height 500</div></div></div>',
'<divid="10822870581"class="post photo"><divclass="theImage"><imgsrc="./Syndex_files/tumblr_lsb31sUYvQ1r4306n"alt="Vanessa Veasley x Supreme x Terry Richardson"><divclass="kremers">original height 1280</div></div></div>',
'<divid="10822380405"class="post photo"><divclass="theImage"><imgsrc="./Syndex_files/tumblr_lsb2ivLTWQ1r4306n"alt="Xavier Delory - Habitat"><divclass="kremers">original height 857</div></div></div>',
'<divid="10822233573"class="post photo"><divclass="theImage"><imgsrc="./Syndex_files/tumblr_lsb2d6sESW1r4306n"alt="Yellow Smoke Bomb"><divclass="kremers">original height 900</div></div></div>',
'<divid="10822153538"class="post photo"><divclass="theImage"><imgsrc="./Syndex_files/tumblr_lsb2a3Gh2L1r4306n"alt="Karl Gerstner - Colour Sounds"><divclass="kremers">original height 1024</div></div></div>',
'<divid="10822119380"class="post photo"><divclass="theImage"><imgsrc="./Syndex_files/tumblr_lsb28q4g7p1r4306n"alt="Karl Gerstner - Colour Sounds"><divclass="kremers">original height 1024</div></div></div>',
'<divid="10822031937"class="post photo"><divclass="theImage"><imgsrc="./Syndex_files/tumblr_lsb258iApO1r4306n"alt="Cindy Sherman - Untitled Film Still #45"><divclass="kremers">original height 920</div></div></div>',
'<divid="10821751285"class="post photo"><divclass="theImage"><imgsrc="./Syndex_files/tumblr_lsb1u2045A1r4306n"alt="Jeff Koons - Rabbit (1986)"><divclass="kremers">original height 1280</div></div></div>',
'<divid="10821655695"class="post photo"><divclass="theImage"><imgsrc="./Syndex_files/tumblr_lsb1q8whpQ1r4306n"alt="Disabled Car Access"><divclass="kremers">original height 757</div>/div></div>',
'<divid="10821572995"class="post photo"><divclass="theImage"><imgsrc="./Syndex_files/tumblr_lsb1mw5IU11r4306n"alt="Bin Bags"><divclass="kremers">original height 725</div></div></div>',
'<divid="10821503505"class="post photo"><divclass="theImage"><imgsrc="./Syndex_files/tumblr_lsb1k3yEsf1r4306no1_400.png"alt="Untitled"><divclass="kremers">original height 326</div></div></div>'
];
$(document).ready(function() {
$('input').click(function(e){
e.preventDefault();
if (images.length > 0) {
// append first image in array to DOM
$(images[0])
.appendTo('.autopagerize_page_element')
// select img elements from appended items
.find('img').each(function(e) {
// lets hide the description as well while we're at it
$(this).parent().find('.kremers').hide();
// hide image from the DOM
$(this).hide();
// check to see if our image has been cached
// source: https://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached
$(this).one('load', function() {
imageLoadHandler($(this));
}).each(function() {
if(this.complete) {
// (image is cached)
// console.log("cached");
$(this).load();
}
});
}
);
// remove first element from array
images.shift();
// update our reference to all nested images
$pageImages = $('.autopagerize_page_element img');
} else {
// disable input (jQuery 1.6+)
$(this).prop('disabled', true);
}
});
$(window).resize(function(e){
// TODO: look into throttling these calls as it doesn't need to be called so often
// potentially with the use of something like jQuery throttle / debounce
// http://benalman.com/projects/jquery-throttle-debounce-plugin/
// add your resize code here
$pageImages.each(function(){
// resize all images to browser height
$(this).height($window.height());
});
});
});
function imageLoadHandler($img){
// resize to browser window height, even images that are initially smaller than browser window height
$img.height($window.height());
/*
// OR...
// check if this image is taller than our browser window
if ($img.height() > $window.height()) {
// resize to browser window height
$img.height($window.height());
} else {
// our image is smaller than the browser height, we don't need to do anything
}
*/
// reveal the image in the DOM
// (fade in, animate in, do whatever else you want here)
$img.show();
// finally show our description again
$img.parent().find('.kremers').show();
}
</script></html>
Post a Comment for "Javascript — Manipulating Attributes Of Dynamically Loaded (or Autopaged) Content"